@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap");
/* my styles */
html {
  background: var(--bg);
  color: var(--fg);

  tab-size: 2;
  hanging-punctuation: first allow-end last;
  word-break: break-word;
}
body {
  max-width: 100ch;
  margin: 0 auto;
  padding: 1rem;
}

nav ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0;
  li {
    padding-inline-start: 0.25rem;
    padding-inline-end: 0.25rem;
  }
}

p,
li {
  text-wrap: pretty;
}

/* coyer css */
a {
  color: light-dark(var(--faded_blue), var(--bright_blue));
  text-underline-offset: 2px;
  &:not(:is(:hover, :focus)) {
    text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
  }
}
a:hover {
  color: light-dark(var(--faded_aqua), var(--bright_aqua));
}
a:visited {
  color: light-dark(var(--faded_purple), var(--bright_purple));
}

img,
video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  border-style: none;
}

hr {
  border-style: solid;
  border-width: 1px 0 0;
  color: inherit;
}

.film-rolls {
  .header {
    h1 {
      margin-block-end: 0.25rem;
    }
    p {
      margin: 0;
      color: var(--subtext);
    }
  }
  .grid {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: 0.75rem;
  }

  .card {
    a {
      text-decoration: none;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-block-size: 5rem;
      padding: 1rem;
      border: 1px solid color-mix(in srgb, currentColor, transparent 80%);
      border-radius: 0.75rem;
      background: color-mix(in srgb, var(--fg), transparent 96%);
      &::after {
        content: "→";
        opacity: 0.55;
      }
      &:hover,
      &:focus-visible {
        background: color-mix(in srgb, var(--fg), transparent 92%);
        border-color: color-mix(in srgb, currentColor, transparent 55%);
      }
    }
  }
}

.album {
  .header {
    h1 {
      margin-block-end: 0.25rem;
    }
    p {
      margin: 0;
      color: var(--subtext);
    }
  }
  .gallery {
    columns: 16rem;
    column-gap: 0.75rem;
  }
  .frame {
    margin-block-start: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    margin-block-end: 0.75rem;
    border-radius: 0.75rem;
    overflow: clip;
    img {
      transition:
        transform 160ms ease,
        filter 160ms ease;

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

.post-date {
  margin-block-start: 0.25rem;
  color: var(--subtext);
}

:root {
  color-scheme: light dark;
  --dark0_hard: #1d2021;
  --dark0: #282828;
  --dark0_soft: #32302f;
  --dark1: #3c3836;
  --dark2: #504945;
  --dark3: #665c54;
  --dark4: #7c6f64;

  --light0_hard: #f9f5d7;
  --light0: #fbf1c7;
  --light0_soft: #f2e5bc;
  --light1: #ebdbb2;
  --light2: #d5c4a1;
  --light3: #bdae93;
  --light4: #a89984;

  --gray_245: #928374;
  --gray_244: #928374;

  --red: #cc241d;
  --green: #98971a;
  --yellow: #d79921;
  --blue: #458588;
  --purple: #b16286;
  --aqua: #689d6a;
  --orange: #d65d0e;

  --bright_red: #fb4934;
  --bright_green: #b8bb26;
  --bright_yellow: #fabd2f;
  --bright_blue: #83a598;
  --bright_purple: #d3869b;
  --bright_aqua: #8ec07c;
  --bright_orange: #fe8019;

  --faded_red: #9d0006;
  --faded_green: #79740e;
  --faded_yellow: #b57614;
  --faded_blue: #076678;
  --faded_purple: #8f3f71;
  --faded_aqua: #427b58;
  --faded_orange: #af3a03;

  --bg: light-dark(var(--light0), var(--dark0));
  --fg: light-dark(var(--dark1), var(--light1));

  --subtext: light-dark(var(--dark4), var(--light4));
}

/* coyier css */
:target {
  scroll-margin: 3rlh;
}

@layer syntax-highlighting {
  pre {
    overflow-x: auto;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--fg), transparent 85%);
    code {
      line-height: 1.3;
      .comment {
        color: var(--subtext);
      }

      .keyword,
      .operator,
      .punctuation.special {
        color: light-dark(var(--faded_red), var(--bright_red));
      }
      .string,
      .markup.raw,
      .markup.raw.block,
      .markup.raw.inline {
        color: light-dark(var(--faded_green), var(--bright_green));
      }
      pre
        code
        :is(.escape, .string.escape, .string.special, .string.special.symbol) {
        color: light-dark(var(--faded_orange), var(--bright_orange));
      }
      .number,
      .boolean,
      .constant,
      .constant.builtin {
        color: light-dark(var(--faded_purple), var(--bright_purple));
      }
      .function,
      .function.builtin {
        color: light-dark(var(--faded_blue), var(--bright_blue));
      }
      .type,
      .type.builtin,
      .constructor,
      .constructor.builtin {
        color: light-dark(var(--faded_yellow), var(--bright_yellow));
      }
      .attribute,
      .property,
      .property.builtin,
      .variable.member {
        color: light-dark(var(--faded_aqua), var(--bright_aqua));
      }
      .module,
      .tag {
        color: light-dark(var(--faded_orange), var(--bright_orange));
      }
      .variable {
        color: var(--fg);
      }
      .variable.builtin {
        color: light-dark(var(--faded_red), var(--bright_red));
      }
      .variable.parameter {
        color: light-dark(var(--faded_orange), var(--bright_orange));
      }
      .punctuation,
      .punctuation.bracket,
      .punctuation.delimiter {
        color: var(--subtext);
      }
    }
  }
}
@layer fonts {
  html {
    font-family: "Atkinson Hyperlegible", sans-serif;
  }

  code,
  kbd,
  samp,
  pre {
    font-family: "Berkeley Mono", monospace;
  }

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

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

  @font-face {
    font-family: "Berkeley Mono";
    src: url("/static/fonts/BerkeleyMono-Oblique.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Berkeley Mono";
    src: url("/static/fonts/BerkeleyMono-Bold-Oblique.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }
}