@charset "UTF-8";

@font-face {
  font-family: 'Basement Grotesque';
  src: url('assets/fonts/BasementGrotesque-Black_v1.202.woff2') format("woff2"),
  url('assets/fonts/BasementGrotesque-Black_v1.202.woff') format("woff"),
  url('assets/fonts/BasementGrotesque-Black_v1.202.otf') format("opentype");
}

@font-face {
  font-family: "Space Mono";
  font-display: swap;
  font-weight: normal;
  font-style: normal;
  src: url("assets/fonts/SpaceMono-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Space Mono";
  font-display: swap;
  font-weight: normal;
  font-style: italic;
  src: url("assets/fonts/SpaceMono-Italic.ttf") format("truetype");
}

@font-face {
  font-family: "JetBrains Mono";
  font-display: swap;
  font-weight: normal;
  font-style: normal;
  src: url("assets/fonts/JetBrainsMono[wght].ttf") format("truetype");
}

@font-face {
  font-family: "JetBrains Mono";
  font-display: swap;
  font-weight: normal;
  font-style: italic;
  src: url("assets/fonts/JetBrainsMono-Italic[wght].ttf") format("truetype");
}

@font-face {
  font-family: "Miriam Libre";
  font-display: swap;
  font-weight: 200;
  font-style: normal;
  src: url("assets/fonts/MiriamLibre-Regular.ttf") format("truetype");
}

@font-face {
  font-family: 'Iosevka';
  src: url('assets/fonts/Iosevka-Bold.woff2') format('woff2'),
  url('assets/fonts/Iosevka-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Iosevka';
  src: url('assets/fonts/Iosevka-Heavy.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Iosevka';
  src: url('assets/fonts/Iosevka-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Iosevka';
  src: url('assets/fonts/Iosevka-Italic.woff2') format('woff2'),
  url('assets/fonts/Iosevka-Italic.ttf') format('truetype');
  font-style: italic;
}

@font-face {
  font-family: 'Iosevka';
  src: url('assets/fonts/Iosevka-Oblique.ttf') format('truetype');
  font-style: oblique;
}

@font-face {
  font-family: 'Iosevka';
  src: url('assets/fonts/Iosevka-Extended.woff2') format('woff2'),
  url('assets/fonts/Iosevka-Extended.ttf') format('truetype');
  font-stretch: expanded;
}

@font-face {
  font-family: 'Iosevka';
  src: url('assets/fonts/Iosevka-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Pixelify Sans Variable';
  src: url('assets/fonts/PixelifySans-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

/* Custom Properties */
@property --surface-1 {
  syntax: "<color>";
  initial-value: #040d0e;
  inherits: true;
}

@property --overlay-1 {
  syntax: "<color>";
  initial-value: #111;
  inherits: false;
}

@property --text-1 {
  syntax: "<color>";
  initial-value: #b0deda;
  inherits: true;
}

@property --text-2 {
  syntax: "<color>";
  initial-value: #e5ecea;
  inherits: false;
}

:root {
  --surface-1: #040D0E;
  --surface-2: #0b2021;
  --surface-3: #1e1e1e;

  --backdrop: #B9DDDA19;

  --overlay-1: rgba(17, 17, 17, 0.11);
  --overlay-2: rgba(185, 221, 218, 0.2);

  --text-1: #B9DDDA;
  --text-2: #ffffff;
  ---text-3: #c5c5c5;

  --bg-clr: var(--surface-1);
  --text-clr: var(--text-2);
  --border-clr: var(--overlay-1);

  --wrapper-width: 1000px;

  scroll-behavior: smooth;
  interpolate-size: allow-keywords;
}

::selection {
  background: #B9DDDA80;
}

@layer base {
  :root {
    --surface-1: #061515;
    --surface-2: #0b2021;

    --backdrop: #B9DDDA19;


    --text-1: rgba(185, 221, 218, 0.5);
    --text-2: #ffffff;
    --text-3: #81afac;

    --bg-clr: var(--surface-1);
    --text-clr: var(--text-1);
    --border-clr: var(--overlay-1);

  }

  body {
    background-color: var(--bg-clr);
    color: var(--text-clr);
    font-family: 'Space Mono', monospace;
    font-size: 16px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  ul {
    padding-left: 0;

    & ::marker {
      display: none;
      content: "";
    }
  }

  a {
    color: var(--text-1);

    &:hover {
      color: #17e5d2;
    }

    &:visited {
      color: var(--text-3);
    }
  }
}

@layer components {
  :root {
    --bg-clr: #b0deda;
    --shadow-clr: #B0DEDA33;
    --text-clr: #b0deda;
    --default-text: #e5ecea;

    --image-size: 30px;
  }

  site-navbar {
    font-family: Iosevka, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--text-clr);
    display: flex;
    justify-content: center;
    box-sizing: border-box;

    & nav {
      display: flex;
      gap: 1rem;
      align-items: center;
      justify-content: space-between;
      padding: 1rem;
      max-width: 1000px;
      width: 100%;

    }

    & a {
      color: var(--default-text);
      text-decoration: none;

      padding: 0.5rem;
      border-radius: 5rem;
      transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
      backdrop-filter: blur(10px);

      &:hover {
        background-color: rgba(210, 210, 210, 0.1);
      }


    }

    & img.site-icon-sheet {
      width: var(--image-size);
      height: var(--image-size);
      object-fit: cover;
      image-rendering: pixelated;
      object-position: left;

      &:hover {
        object-position: calc(-1 * var(--image-size)) 0;
        animation: sprite-sheet 1s infinite steps(5);
      }
    }
  }

  /*---------- footer styles -------------*/
  site-footer {
    --surface-1: #1111114C;
    --surface-2: rgba(10, 21, 20, 0.3);
    background-color: var(--surface-2);
    background-image: radial-gradient(circle, var(--surface-1) 0%, var(--surface-2) 100%);
    margin-block: 0;
    padding-block: 2rem;
    backdrop-filter: blur(1rem);
    display: block;
    margin-top: 4rem;
    border-top: 1px solid var(--overlay-2);
  }

  .site-footer-content {
    max-width: var(--wrapper-width);
    margin: 0 auto;
    padding: 0 1rem;
  }

  .footer-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .footer-section {
    & h3 {
      font-family: Iosevka, sans-serif;
      font-weight: bold;
      color: var(--text-1);
      margin-bottom: 1rem;
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    & p {
      color: var(--text-3);
      line-height: 1.6;
      margin-bottom: 0.5rem;
      font-size: 0.9rem;
    }
  }

  .footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    & a {
      color: var(--text-2);
      text-decoration: none;
      font-family: 'Space Mono', monospace;
      font-size: 0.9rem;
      padding: 0.25rem 0;
      transition: color 0.2s ease-in-out, padding-left 0.2s ease-in-out;

      &:hover {
        color: var(--text-1);
        padding-left: 0.5rem;
      }
    }
  }

  .footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    & a {
      color: var(--text-2);
      text-decoration: none;
      font-family: 'Space Mono', monospace;
      font-size: 0.9rem;
      padding: 0.25rem 0;
      transition: color 0.2s ease-in-out;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;

      &:hover {
        color: var(--text-1);
      }

      &[target="_blank"]::after {
        content: "↗";
        font-size: 0.8rem;
        opacity: 0.7;
      }
    }
  }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--overlay-1);
    flex-wrap: wrap;
    gap: 1rem;

    & p {
      color: var(--text-3);
      font-size: 0.8rem;
      margin: 0;
      font-family: 'Space Mono', monospace;
    }
  }

  .footer-tech {
    display: flex;
    gap: 0.5rem;

    & span {
      background: var(--overlay-2);
      color: var(--text-1);
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
      font-size: 0.7rem;
      font-family: Iosevka, monospace;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
  }

  @media (max-width: 768px) {
    .footer-main {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .footer-bottom {
      flex-direction: column;
      text-align: center;
      gap: 1rem;
    }

    .footer-nav,
    .footer-links {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 1rem;
    }
  }
}

@keyframes sprite-sheet {
  from {
    object-position: left;
  }
  to {
    object-position: right;
  }
}

/*---------------------- UTIlITY CLASSES ------------------------*/

@layer utility {
  .inline-block {
    display: inline-block;
  }

  /* TODO: Convert to custom tag */
  .icon-and-text-line {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* TODO: Convert to section[appearance=column][size=sm] */
  .section,
  .sm-column-section,
  .md-column-section,
  .lg-column-section {
    margin: 60px auto;
    padding: 0 12px;
  }

  .sm-column-section {
    max-width: 800px;
  }

  .md-column-section {
    max-width: 1200px;
  }

  .lg-column-section {
    max-width: 1800px;
  }

  /* TODO: convert to img[appearance=icon][size=sm] */
  .sm-icon {
    width: 16px;
    height: 16px;
  }

  .md-icon {
    width: 32px;
    height: 32px;
  }

  .lg-icon {
    width: 64px;
    height: 64px;
  }

  .full-width {
    width: 100%;
  }

  .rounded {
    border-radius: 12px;
  }

  .center-text {
    text-align: center;
  }

  .wrap-text {
    overflow-wrap: anywhere;

    code,
    code:where(&) {
      white-space: pre-wrap;
    }
  }

  .no-text-decoration {
    text-decoration: none;
  }

  .title-font {
    font-family: var(--display-font);
    font-style: italic;
  }

  .text2-color {
    color: var(--text2-clr);
  }

  .text-accent-color0 {
    color: var(--clr0-light);
  }

  .text-accent-color1 {
    color: var(--clr1);
  }

  .bold {
    font-weight: bold;
  }

  .empty-line {
    height: 2em;
    height: 1lh;
  }

  .pixelated {
    image-rendering: pixelated;
  }

  .invert {
    filter: invert(1);
  }

  .invert-on-hover:hover {
    filter: invert(1);
  }

  .wrapper {
    width: min(var(--wrapper-width, 1200px), 100% - 2rem);
    margin-inline: auto;
  }

  /* HTML: <div class="inverted-radius"></div> */
  .inverted-radius {
    --r: 20px; /* the radius */
    --s: 30px; /* size of inner curve */
    --x: 20px; /* horizontal offset (no percentage) */
    --y: 10px; /* vertical offset (no percentage) */

    width: 250px;
    aspect-ratio: 1;
    background: #3FB8AF;
    border-radius: var(--r);
    --_m: / calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000 72%);
    --_g: conic-gradient(from 180deg at var(--r) calc(100% - var(--r)), #0000 25%, #000 0);
    --_d:(var(--s) + var(--r));
    mask: calc(var(--_d) + var(--x)) 100% var(--_m),
    0 calc(100% - var(--_d) - var(--y)) var(--_m),
    radial-gradient(var(--s) at 0 100%, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(-1 * var(--r) - var(--y)),
    var(--_g) calc(var(--_d) + var(--x)) 0,
    var(--_g) 0 calc(-1 * var(--_d) - var(--y));
    mask-repeat: no-repeat;
  }

  .row-span-2 {
    grid-row: span 2;
  }

  .row-span-3 {
    grid-row: span 3;
  }
}


kbd > kbd {
  color: midnightblue;
  background: aliceblue;
  border-radius: 4px;
  padding-inline: 4px;
  box-shadow: 2px 2px 0 3px lightsteelblue;

  &:last-child {
    margin-inline-end: 4px;
  }
}

.item:empty {
  display: none;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}


/*----------------- CUSTOM COMPONENT STYLES -----------------------*/
@layer components {
  code {
    font-family: "JetBrains Mono", monospace;
  }

  code-block {
    display: block;
    overflow-x: auto;
    padding: 0 18px;
    border-radius: 12px;
    scrollbar-width: none;
    font-size: .9em;
    font-weight: 100;
    max-height: 500px;
    background: #161b1e;
    font-family: "JetBrains Mono", monospace;
  }


  code:not(code-block code) {
    font-family: "JetBrains Mono", monospace;
    font-size: .9em;
    background: #1c2322;
    color: #ddeaff;
    padding: 3px;
    padding-inline: 5px;
    font-style: italic;
    font-weight: 100;
  }

  .tags span {
    display: inline-block;
    padding: 0 3px;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    font-weight: bold;
    text-wrap: nowrap;
    background: oklch(
      from var(--tag-chip-color, #ccc) calc(max(l, 0.7)) calc(min(c, 0.15)) h
    );
    color: oklch(
      from var(--tag-chip-color, #444) calc(l * 0.4) calc(c * 0.8) h
    );
    border-radius: 3px;

    &::after {
      content: attr(title);
    }

    &[title="✎hidden"] {
      --tag-chip-color: #ffeeff;
    }

    /* content types */

    &[title="essay"] {
      --tag-chip-color: #eeeeee;
    }

    &[title="µpost"] {
      --tag-chip-color: #aaaaaa;
    }

    &[title^="/"] {
      --tag-chip-color: #ffffc5;
    }

    &[title="↗"] {
      --tag-chip-color: #ffffff;
    }

    /* topics */

    &[title="algo"] {
      --tag-chip-color: #00ffff;
    }

    &[title="art"] {
      --tag-chip-color: #ff88bb;
    }

    &[title="games"] {
      --tag-chip-color: #00ff00;
    }

    &[title="keyboard"] {
      --tag-chip-color: #77ccff;
    }

    /* brands */

    &[title="c"] {
      /* from gcc logo */
      --tag-chip-color: #e2bb9e;
    }

    &[title="css"] {
      --tag-chip-color: rebeccapurple;
    }

    &[title="js"] {
      --tag-chip-color: #f7df1e;
    }

    &[title="html"] {
      --tag-chip-color: #fcbe03;
    }

    &[title="rust"] {
      --tag-chip-color: #f46623;
    }

    &[title="android"] {
      --tag-chip-color: #3ddc84;
    }
  }

}