/* --------------------------
   Comic Code Ligatures Fonts
----------------------------- */

/* UltraLight (normal and italic) */
@font-face {
    font-family: 'Comic Code Ligatures';
    src: url('https://bear-images.sfo2.cdn.digitaloceanspaces.com/xer0x/comiccodeligatures-ultralight.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Comic Code Ligatures';
    src: url('https://bear-images.sfo2.cdn.digitaloceanspaces.com/xer0x/comiccodeligatures-ultltita.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
}

/* Thin (normal and italic) */
@font-face {
    font-family: 'Comic Code Ligatures';
    src: url('https://bear-images.sfo2.cdn.digitaloceanspaces.com/xer0x/comiccodeligatures-thin.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Comic Code Ligatures';
    src: url('https://bear-images.sfo2.cdn.digitaloceanspaces.com/xer0x/comiccodeligatures-thinitalic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
}

/* Light (normal and italic) */
@font-face {
    font-family: 'Comic Code Ligatures';
    src: url('https://bear-images.sfo2.cdn.digitaloceanspaces.com/xer0x/comiccodeligatures-light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Comic Code Ligatures';
    src: url('https://bear-images.sfo2.cdn.digitaloceanspaces.com/xer0x/comiccodeligatures-lightita.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

/* Regular (normal and italic) */
@font-face {
    font-family: 'Comic Code Ligatures';
    src: url('https://bear-images.sfo2.cdn.digitaloceanspaces.com/xer0x/comiccodeligatures-regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Comic Code Ligatures';
    src: url('https://bear-images.sfo2.cdn.digitaloceanspaces.com/xer0x/comiccodeligatures-italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}

/* Medium (normal and italic) */
@font-face {
    font-family: 'Comic Code Ligatures';
    src: url('https://bear-images.sfo2.cdn.digitaloceanspaces.com/xer0x/comiccodeligatures-medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Comic Code Ligatures';
    src: url('https://bear-images.sfo2.cdn.digitaloceanspaces.com/xer0x/comiccodeligatures-medita.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}

/* SemiBold (normal and italic) */
@font-face {
    font-family: 'Comic Code Ligatures';
    src: url('https://bear-images.sfo2.cdn.digitaloceanspaces.com/xer0x/comiccodeligatures-semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Comic Code Ligatures';
    src: url('https://bear-images.sfo2.cdn.digitaloceanspaces.com/xer0x/comiccodeligatures-sembdita.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
}

/* Bold (normal and italic) */
@font-face {
    font-family: 'Comic Code Ligatures';
    src: url('https://bear-images.sfo2.cdn.digitaloceanspaces.com/xer0x/comiccodeligatures-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Comic Code Ligatures';
    src: url('https://bear-images.sfo2.cdn.digitaloceanspaces.com/xer0x/comiccodeligatures-bolditalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}


:root {
    --width: 720px;
    --font-main: 'Comic Code Ligatures', 'Fira Code', monospace;
  	--font-comic: 'Comic Code Ligatures', 'Fira Code', monospace;
    --font-secondary: 'Comic Code Ligatures', 'Source Code Pro', monospace;
    --font-scale: 1em;
    --background-color: #1a1a1a;
    --heading-color: #00ff66;
    --text-color: #a9b7c6;
    --link-color: #00d7ff;
    --visited-color: #8862f3;
    --code-background-color: #2b2b2b;
    --code-color: #dcdcaa;
    --blockquote-color: #808080;
    --border-color: #3b3b3b;
    --highlight-color: #44475a;
    --button-bg: #333;
    --button-hover-bg: #444;
    --button-text-color: #00d7ff;
    --table-border: #3e3e3e;
    --img-border-radius: 4px;
    --text-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.3); /* Text shadow for readability */
    --transition-speed: 0.3s;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #0d1b2a;
        --heading-color: #00d7ff;
        --text-color: #b2becd;
        --link-color: #00ffcc;
        --visited-color: #b381e6;
        --code-background-color: #121212;
        --code-color: #00e6a6;
        --blockquote-color: #757575;
        --highlight-color: #444444;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased; /* Improves font rendering on Webkit browsers */
    -moz-osx-font-smoothing: grayscale; /* Improves font rendering on Firefox */
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-secondary);
    font-size: var(--font-scale);
    margin: auto;
    padding: 20px;
    max-width: var(--width);
    text-align: left;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    letter-spacing: 0.02em;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main);
    color: var(--heading-color);
    text-shadow: var(--text-shadow);
}

a {
    color: var(--link-color);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition-speed) ease, text-decoration var(--transition-speed) ease;
}

a:hover {
    color: var(--link-color);
    text-decoration: underline;
}

nav a {
    margin-right: 8px;
    font-weight: bold;
}

strong, b {
    color: var(--heading-color);
}

button {
    background-color: var(--button-bg);
    color: var(--button-text-color);
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color var(--transition-speed) ease;
}

button:hover {
    background-color: var(--button-hover-bg);
}

time {
    font-family: monospace;
    font-style: normal;
    font-size: 0.95em;
    color: var(--blockquote-color);
}

main {
    line-height: 1.6;
}

table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--table-border);
}

table, th, td {
    border: 1px solid var(--table-border);
    padding: 8px;
    text-align: left;
    font-size: 0.95em;
    transition: border-color var(--transition-speed) ease;
}

hr {
    border: none;
    border-top: 1px dashed var(--border-color);
    margin: 1.5em 0;
}

img {
    max-width: 100%;
    border-radius: var(--img-border-radius);
    transition: transform var(--transition-speed) ease;
}

img:hover {
    transform: scale(1.02);
}

code, .highlight, .code {
    font-family: 'Fira Code', monospace;
    background-color: var(--code-background-color);
    color: var(--code-color);
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.95em;
}

.highlight, .code {
    display: block;
    padding: 12px;
    overflow-x: auto;
    margin: 1em 0;
}

blockquote {
    border-left: 4px solid var(--blockquote-color);
    padding-left: 16px;
    font-style: italic;
    color: var(--blockquote-color);
    margin: 1em 0;
    background: var(--highlight-color);
}

footer {
    padding: 25px 0;
    text-align: center;
    color: var(--blockquote-color);
}

ul.blog-posts {
    list-style-type: none;
    padding: 0;
}

ul.blog-posts li {
    display: flex;
    margin-bottom: 0.8em;
}

ul.blog-posts li span {
    flex: 0 0 120px;
    color: var(--blockquote-color);
}

ul.blog-posts li a {
    color: var(--link-color);
}

ul.blog-posts li a:visited {
    color: var(--visited-color);
}

.title:hover {
    text-decoration: none;
}

.title h1 {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--heading-color);
}

.inline {
    width: auto !important;
}

/* ==========================================================================
   Advanced Platform-Specific CSS Overrides
   --------------------------------------------------------------------------
   The following media queries target:
     – iPhone 15 & 16 (all models) via characteristic device widths and iOS-only features
     – Generic Android devices using coarse pointers and common width breakpoints
     – Google Pixel devices via resolution and dimension clues
     – Older iPhones via smaller device widths and legacy iOS indicators

   These styles are designed to harmonize with the global vibe defined above.
   ========================================================================== */


/* --------- iPhone 15 & 16 Specific Styles (All Models) --------- */
/* Uses approximate device-width range combined with iOS-only feature detection */
@media only screen and (min-device-width: 393px) and (max-device-width: 430px) and (-webkit-touch-callout: none) {
  body {
    /* Slightly increased font size and tighter padding for optimal readability */
    font-size: 1.1em;
    padding: 10px;
    /* Maintain the dark themed background and text colors */
    background-color: var(--background-color);
    color: var(--text-color);
  }
  nav a {
    /* Enhance navigation spacing for touch devices */
    margin-right: 10px;
  }
  h1, h2, h3, h4, h5, h6 {
    /* Emphasize headings with a subtle increased text shadow */
    text-shadow: 0.1em 0.1em 0.15em rgba(0, 0, 0, 0.4);
  }
  button {
    /* Enhanced tap targets for touch, with adjusted padding */
    padding: 8px 16px;
    border-radius: 6px;
    transition: background-color var(--transition-speed) ease;
  }
  /* Additional adjustments for layout and touch response */
  img {
    transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease;
  }
}


/* --------- Generic Android Devices --------- */
/* Targets devices with coarse pointers and common small screen sizes */
@media only screen and (max-device-width: 600px) and (pointer: coarse) and (orientation: portrait) {
  body {
    /* Standard mobile font size with a bit more padding for readability */
    font-size: 1em;
    padding: 15px;
  }
  nav a {
    margin-right: 8px;
  }
  button {
    /* Optimized button sizes for touch screens */
    padding: 6px 14px;
    font-size: 0.9em;
  }
  /* Maintain the comic/code vibe with slightly adjusted letter spacing */
  p, li, code {
    letter-spacing: 0.03em;
  }
}


/* --------- Pixel Device Specific Styles --------- */
/* Approximation: devices with typical Google Pixel screen dimensions and high resolution */
@media only screen and (min-device-width: 370px) and (max-device-width: 420px) and (resolution: 3dppx) and not (-webkit-touch-callout: none) {
  body {
    font-size: 1.05em;
    padding: 12px;
  }
  nav a {
    margin-right: 9px;
  }
  /* Fine-tuned heading scales to balance readability and style */
  h1 {
    font-size: 1.75em;
  }
  h2 {
    font-size: 1.5em;
  }
  /* Pixel devices might benefit from a sharper contrast in buttons */
  button {
    background-color: var(--button-bg);
    color: var(--button-text-color);
  }
}


/* --------- Older iPhone Devices --------- */
/* Targets devices with smaller screen widths and legacy iOS detection */
@media only screen and (max-device-width: 375px) and (-webkit-touch-callout: none) and (orientation: portrait) {
  body {
    /* Slightly smaller text size for legacy hardware while keeping clear legibility */
    font-size: 0.95em;
    padding: 12px;
  }
  nav a {
    margin-right: 7px;
  }
  button {
    /* Smaller touch targets on older devices, respecting the overall visual style */
    padding: 5px 10px;
  }
  /* Reduce text-shadow intensity on headings to account for older screen rendering */
  h1, h2, h3 {
    text-shadow: none;
  }
  /* Optimize images for potentially lower performance devices */
  img {
    transition: transform 0.4s ease;
  }
}