@font-face {
  font-family: "Inter Regular";
  src: url(/fonts/inter/Inter-Regular.woff2) format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Inter Medium";
  src: url(/fonts/inter/Inter-Medium.woff2) format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Inter Bold";
  src: url(/fonts/inter/Inter-Bold.woff2) format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Inter ExtraBold";
  src: url(/fonts/inter/Inter-ExtraBold.woff2) format("woff2");
  font-display: swap;
}

@keyframes switch {
  from {
    transform: none;
  }
  30% {
    transform: scale(0.9);
  }
  to {
    transform: none;
    margin: 0 0.2em;
  }
}

@keyframes bounce-appear {
  from {
    transform: translateY(5em);
    opacity: 0;
  }
  50% {
    transform: translateY(-0.2em);
    opacity: 100;
  }
  to {
    transform: translateY(0);
    opacity: 100;
  }
}

:root {
  --fg: light-dark(#302a25, snow);
  --bg: light-dark(snow, #110f0f);
  --accent-bright: #ff4000;
  --accent: color-mix(in srgb, var(--accent-bright) 80%, var(--fg));

  --regular: "Inter Regular", sans-serif;
  --medium: "Inter Medium", sans-serif;
  --bold: "Inter Bold", sans-serif;
  --extrabold: "Inter ExtraBold", sans-serif;

  color-scheme: light dark;
}

:focus-visible {
  outline: solid 1px var(--accent-bright);
  border-radius: 2px;
}

::selection {
  color: var(--bg);
  background: var(--fg);
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0 auto 0;
  height: 100%;
  text-align: center;
  min-width: 22em;

  font-family: var(--regular);
  text-underline-offset: 0.15em;

  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;

  background-color: var(--bg);
  color: var(--fg);

  &#plain-body {
    display: flex;
    flex-direction: column;
  }
}

main {
  flex: 1 0 auto;
  padding-bottom: 4em;

  &#content {
    margin: 1em 1em 0;
  }

  @media not (prefers-reduced-motion) {
    transition: opacity 0.3s;

    @starting-style {
      opacity: 0;
    }
  }
}

h1 {
  font-family: var(--extrabold);
}

h2,
h3,
h4,
h5,
h6 {
  font-family: var(--bold);
}

hr {
  border: 1px solid rgb(from var(--fg) r g b / 30%);
  border-radius: 1px;
}

img,
video {
  max-width: clamp(0px, 90%, 60em);
  display: block;
  margin: auto;
  object-fit: contain;
}

.rounded {
  img& {
    border-radius: 18px;
  }

  video& {
    border-radius: 9px;
  }
}

.selectable {
  -webkit-user-select: text;
  user-select: text;
}

a {
  color: var(--accent);
  font-family: var(--medium);
  text-decoration: none;
  transition-duration: 0.2s;

  &:hover {
    @media (pointer: fine) {
      color: var(--fg);
    }

    .arrow {
      @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
        margin-left: 0.6em;
      }
    }
  }

  &::selection {
    color: white;
    background: var(--accent);
  }

  &.dim {
    color: rgb(from var(--fg) r g b / 70%);

    &:hover {
      color: var(--accent-bright);
    }
  }

  &.button {
    border: 1px solid rgb(from var(--fg) r g b / 5%);
    background-color: rgb(from var(--fg) r g b / 9%);
    padding: 0.7em 2em;
    border-radius: 9999px;
    display: inline-block;
    font-family: var(--bold);
    color: var(--fg);
    margin: 0.6em 0.8%;

    &:hover {
      color: var(--fg);

      @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
        transform: scale(1.05);
      }
    }

    &:active {
      @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
        transform: scale(0.9);
      }
    }

    &.suggested {
      background-color: var(--fg);
      color: var(--bg);

      &:hover {
        color: var(--bg);
      }
    }
  }

  .arrow {
    margin-left: 0.3em;
    transition: margin-left 0.4s;
  }

  &[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg)) {
    white-space: nowrap;
  }

  &[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
    margin: 0 0.1em 0 0.25em;
    content: "";
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    mask-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMSIgaGVpZ2h0PSIxMSIgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjgiIGQ9Ik04IDd2LjVhMiAyIDAgMCAxLTIgMkgzYTIgMiAwIDAgMS0yLTJ2LTNhMiAyIDAgMCAxIDItMmguNW0xIDMuNSA1LTVtMCAwSDZtMy41IDB2My41Ii8+PC9zdmc+");
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: currentColor;
  }

  @media (prefers-reduced-motion) {
    transition-duration: 0s;
  }
}

nav {
  display: flex;
  padding: 0.8em 0 0;
  justify-content: center;

  ul {
    font-family: var(--medium);
    list-style: none;
    display: flex;
    background-color: rgb(from var(--fg) r g b / 6%);
    border: 1px solid rgb(from var(--fg) r g b / 3%);
    border-radius: 9999px;
    padding: 0.2em 0;

    > li {
      padding: 0.4em 0.7em;
      border-radius: 9999px;

      > a.dim:hover {
        @media (prefers-color-scheme: dark) {
          color: var(--fg);
        }
      }

      &.selected {
        padding: 0.4em 1em;
        background-color: light-dark(white, rgb(255 255 255 / 10%));

        @media (prefers-reduced-motion) {
          margin: 0 0.2em;
        }

        @media not (prefers-reduced-motion) {
          animation: switch 0.5s forwards;
        }

        > a {
          color: var(--accent);

          @media (prefers-color-scheme: dark) {
            color: var(--fg);
          }
        }
      }

      &:first-child:not(.selected) {
        margin-left: 0.5em;
      }

      &:last-child:not(.selected) {
        margin-right: 0.5em;
      }
    }
  }
}

footer {
  flex-shrink: 0;
  background-color: rgb(from var(--fg) r g b / 5%);
  border-top: 1px solid rgb(from var(--fg) r g b / 5%);

  > div {
    display: flex;
    justify-content: center;
    column-gap: 2em;

    > ul {
      list-style-type: none;
      padding: 0;

      > li {
        display: inline-block;
        padding: 1em;
      }
    }
  }

  > p {
    margin: 0 1.25em;
    padding: 1em 0 1.5em;
  }

  a {
    color: var(--fg);

    &:hover {
      color: var(--accent-bright);
    }
  }
}

.card {
  border-radius: 36px;

  @media not (prefers-reduced-motion) {
    animation: bounce-appear forwards;
  }
}

main.post {
  max-width: 45em;
  text-align: left;
  align-self: center;

  -webkit-user-select: text;
  user-select: text;

  p,
  li {
    line-height: 1.5em;
    color: rgb(from var(--fg) r g b / 85%);
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 1.5em;
  }

  img,
  video {
    max-width: 100%;
  }
}