*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-text: #f0ede8;
  --color-bg: #232121;
  --color-link: #f0ede8;
  --color-link-hover: #fff;
  --page-padding: 1.5rem;

  font-size: 12px;
}

html {
  text-size-adjust: 100%;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
}

body {
  min-block-size: 100svb;
  margin: 0;
  overflow: hidden;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

html,
body {
  overscroll-behavior: none;
}

img {
  block-size: auto;
  inline-size: 100%;
  max-inline-size: 100%;
  vertical-align: middle;
}

a {
  color: var(--color-link);
  text-decoration: none;
  cursor: pointer;

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

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

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid #f00;
  outline-offset: 3px;
}

@media (scripting: enabled) {
  .loading {
    &::before,
    &::after {
      position: fixed;
      z-index: 10000;
      content: "";
    }

    &::before {
      inset: 0;
      background: var(--color-bg);
    }

    &::after {
      inset-block-start: 50%;
      inset-inline-start: 50%;
      inline-size: 100px;
      block-size: 1px;
      margin-inline-start: -50px;
      background: var(--color-link);
      animation: loader 1.5s ease-in-out infinite alternate forwards;
    }
  }
}

@keyframes loader {
  0% {
    transform: scaleX(0);
    transform-origin: 0% 50%;
  }

  50% {
    transform: scaleX(1);
    transform-origin: 0% 50%;
  }

  50.1% {
    transform: scaleX(1);
    transform-origin: 100% 50%;
  }

  100% {
    transform: scaleX(0);
    transform-origin: 100% 50%;
  }
}

.no-script-message {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-content: center;
  gap: 0.75rem;
  padding: 2rem;
  color: var(--color-text);
  text-align: center;
  background: var(--color-bg);

  h1 {
    font-size: 1rem;
  }
}

.frame {
  position: relative;
  z-index: 1000;
  display: grid;
  grid-template:
    "title" auto
    "links" auto
    "tags" auto
    "sponsor" auto / 100%;
  gap: 1rem;
  justify-items: start;
  padding: var(--page-padding);
  pointer-events: none;

  #cdawrap {
    grid-area: sponsor;
    justify-self: start;
  }

  a,
  button {
    pointer-events: auto;
  }
}

.frame-title {
  grid-area: title;
  margin: 0;
  font-size: inherit;
  font-weight: 400;
}

.frame-links,
.frame-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.frame-links {
  grid-area: links;
}

.frame-tags {
  grid-area: tags;
}

@media screen and (width >= 53em) {
  .frame {
    position: fixed;
    inset: 0;
    grid-template:
      "title links ." auto
      "tags tags sponsor" auto / auto auto 1fr;
    align-content: space-between;
    inline-size: 100%;
    block-size: 100%;

    #cdawrap {
      justify-self: end;
      max-inline-size: 300px;
      text-align: end;
    }
  }
}

.webgl-ready [data-mesh] {
  opacity: 0;
}