/* Regular */
@font-face {
  font-family: 'Berkeley Mono';
  src: url('/fonts/BerkeleyMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* Italic */
@font-face {
  font-family: 'Berkeley Mono';
  src: url('/fonts/BerkeleyMono-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

/* Bold */
@font-face {
  font-family: 'Berkeley Mono';
  src: url('/fonts/BerkeleyMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* Bold Italic */
@font-face {
  font-family: 'Berkeley Mono';
  src: url('/fonts/BerkeleyMono-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
}

html {
    background-color: #FAFAFA;
    color: #1c364e;
    font-family: sans-serif;
    line-height: 1.25;
}

pre {
    font-family: 'Berkeley Mono', 'Courier New', Courier, monospace;
}

a {
    color: #2f5c85;
    text-decoration: none;
}

a:hover {
    color: #fb9120;
    text-decoration: underline;
}

/* Mobile responsiveness */
@media screen and (max-width: 768px) {
    body {
        margin: 10px !important;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    div[style*="margin-top:30px;margin-left:20px"] {
        margin-top: 15px !important;
        margin-left: 10px !important;
        flex-grow: 1;
    }
    
    div[style*="font-size:28px"] {
        font-size: 24px !important;
    }
    
    div[style*="max-width:500px"] {
        max-width: calc(100vw - 40px) !important;
    }
    
    #implied-ascii {
        zoom: 25% !important;
        transform-origin: left top;
    }
    
    div[style*="position:absolute;bottom:20px"] {
        position: fixed !important;
        bottom: 10px !important;
        left: 10px !important;
        right: 10px !important;
        font-size: 11px !important;
        text-align: left;
    }
}

@media screen and (max-width: 480px) {
    body {
        margin: 5px !important;
    }
    
    div[style*="margin-top:30px;margin-left:20px"] {
        margin-left: 5px !important;
    }
    
    div[style*="font-size:28px"] {
        font-size: 22px !important;
    }
    
    div[style*="max-width:500px"] {
        max-width: calc(100vw - 20px) !important;
        font-size: 13px !important;
    }
    
    #implied-ascii {
        zoom: 20% !important;
    }
    
    div[style*="position:absolute;bottom:20px"] {
        font-size: 10px !important;
        left: 5px !important;
        right: 5px !important;
    }
}