/* ==========================================================================
   Typos are on purpose, actually
   ========================================================================== */
:root {
  /* color-scheme: light dark;

  --background-color: light-dark(#fff, #1b1313);
  --color: light-dark(black, #d1baba);
  --highlight: light-dark(#e6dada, #3d2b2b); */

  --accent: aliceblue;
  --background-color: white;
  --color: black;
  --highlight: #e6dada;
  --gradient: linear-gradient(to left, #3d2b2b, pink, #6360a0);

  --mid-width: 500px;
  --large-width: 700px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #3d2b2b;
    --background-color: #130d0d;
    --color: #efe3e3;
    --highlight: #3d2b2b;
    --gradient: linear-gradient(to left, #3d2b2b, pink, #6360a0);
  }
}

/* ==========================================================================
   Colors, defaults
   ========================================================================== */
html {
  /* Color functions not working as of 2024/03/19, so I can't use var here
   * https://chromium.googlesource.com/chromium/src/+/6db46180a7cde348b4fb78fe19e94d4695b91bd3
   * */
  background-color: var(--background-color);
  color: var(--color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 0.9em;
  line-height: 1.5;
  padding: 6em 3em;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 */
::selection {
  background: var(--highlight);
  text-shadow: none;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.main {
  display: flex;
  flex-direction: column;
  gap: 5em;
  margin: auto;
  max-width: 1120px;
  container: columns / inline-size;
}

@media screen and (min-width: 500px) {
  .main {
    gap: 9em;
  }
}

@media screen and (min-width: 700px) {
  .main {
    gap: 7em;
  }
}

.section {
  display: grid;
  gap: 1em;
  grid-template-columns: 1fr;
  grid-template-areas:
    "a"
    "b"
    "c";
}

.wide {
  grid-area: a;
}

@container columns (min-width: 500px) {
  .section {
    grid-template-areas:
      "a a"
      "b c";
    gap: 3em;
    grid-template-columns: 1fr 1fr;
  }
}

@container columns (min-width: 700px) {
  .section {
    grid-template-areas: "a b c";
    gap: 4em;
    grid-template-columns: 1fr 2fr 2fr;
  }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide from screen readers
 */
.sr-only {
  border-width: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.font-medium {
  font-weight: 500;
}

.display-large {
  display: none;
}

@container columns (min-width: 700px) {
  .display-large {
    display: block;
  }
}

/* ==========================================================================
   Links
   ========================================================================== */
@keyframes BackgroundMovement {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

a {
  background-color: var(--background-color);
  color: var(--color);
  display: inline-block;
  text-decoration: none;
  transform: translate(0, 0);
  transition-timing-function: ease-out;
  transition: 0.15s;
}

a::after {
  background-color: var(--color);
  content: "";
  display: block;
  height: 1px;
  width: 100%;
}

a:hover {
  /* transform: translate(8px, 0); */
  transition-timing-function: ease-out;
  transition: 0.15s;
}

a:hover::after {
  animation: BackgroundMovement 10s ease infinite;
  background: var(--gradient);
  background-size: 400% 400%;
  content: "";
  display: block;
  height: 1px;
  width: 100%;
}

/* ==========================================================================
   Light
   ========================================================================== */
#light {
  --size: 10vw;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  background: radial-gradient(
    closest-side,
    #8be3d1 0%,
    #8be3d1 25%,
    #ee9d41 67%,
    var(--background-color) 100%
  );
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
  will-change: transform, opacity;
  transform: translate3d(-50%, -50%, 0px);
}

/* .spotlight {
  animation: BackgroundMovement 10s ease infinite;
  background: var(--gradient);
  bottom: 0;
  clip-path: polygon(100% 0, 0 0, 0 100%);
  display: grid;
  height: 100vmax;
  left: 0;
  position: absolute;
  top: 0;
  width: 50%;
  z-index: 1;
} */

.content {
  position: relative;
  width: 640px;
  height: 480px;
  background: black;
  overflow: hidden;
}

.spotlight {
  display: none;
  position: absolute;
  background: url(https://picsum.photos/640/480) no-repeat 0 0;
}

/* ==========================================================================
   Resets
   ========================================================================== */
dl {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin: 0;
}

dd {
  margin-left: 0;
}

dd:not(:last-of-type) {
  padding-bottom: 2em;
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}