/* stylelint-disable max-line-length */

:root {
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='9.97' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  --orange: rgb(255 229 195);
  --orange-t10: rgb(255 229 195 / 10%);
  --orange-t25: rgb(255 229 195 / 25%);
  --orange-t40: rgb(255 229 195 / 40%);
  --orange-t50: rgb(255 229 195 / 50%);
  --orange-t75: rgb(255 229 195 / 75%);
  --orange-t90: rgb(255 229 195 / 90%);
  --white-t25: rgb(255 255 255 / 25%);
}

body {
  background: #16171a;
  color: white;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "IBM Plex Sans", "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, "Liberation Sans", Cantarell, Ubuntu, Roboto, Noto, Arial, sans-serif;
  font-size: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
}

@media screen and (max-width: 699.9px) {
  body {
    padding: 1rem 2rem;
  }
}

@media screen and (min-width: 700px) {
  body {
    padding: 4rem;
  }
}

.reveal::before {
  animation: fade-in 3s ease-out;
  background: transparent;
  content: "";
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 5;
}

@keyframes fade-in {
  0% {
    background: black;
  }

  100% {
    background: transparent;
  }
}

.noise {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 4;
}

.noise::after {
  background: rgb(22 23 26 / 20%);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  mask-image: var(--noise);
  mask-size: cover;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}

.background {
  background: #3a495c linear-gradient(to bottom, #4b5a6c, #596575 5rem, #858384 12rem, #a69387 14rem, #c5a084 16rem, #d0a37e 18rem, #cc9f79 20rem, #c29774 25rem);
  background-attachment: fixed;
  background-position: top center;
  background-size: cover;
  color: white;
  height: 100%;
  left: -5%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
  width: 105%;
  z-index: 1;
}

.background::before {
  background: url("mountain.svg") no-repeat 48% 10rem;
  background-attachment: scroll;
  background-size: 250rem;
  content: "";
  filter: blur(1px) drop-shadow(0 0 0.3rem rgb(14 23 34 / 50%)) brightness(1.2);
  height: 20rem;
  left: 0;
  margin: 0 -4%;
  position: absolute;
  top: 0;
  transition: filter 1.5s;
  width: 108%;
  z-index: 1;
}

.background.active::before {
  filter: blur(20px) drop-shadow(0 0 0 rgb(14 23 34 / 0%)) brightness(1.2);
  transition: filter 0.5s;
}

.stars {
  background: url("stars.jpg") top center;
  background-size: 800px;
  height: 100%;
  left: 0;
  mask-image: linear-gradient(to top, transparent, #000);
  max-height: 11rem;
  mix-blend-mode: color-dodge;
  opacity: 0.6;
  position: absolute;
  top: 0;
  transition: filter 1.5s;
  width: 100%;
  z-index: 1;
}

.stars.active {
  filter: blur(20px);
  transition: filter 2s;
}

.light {
  background: radial-gradient(30% 20% at 50% center, rgb(253 208 171 / 25%), transparent);
  content: "";
  height: 30rem;
  left: 0;
  mask-image: url("clouds.webp");
  mask-size: 800px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}

.fade {
  background: linear-gradient(to bottom, transparent, transparent 17.25rem, #111c27 18.25rem, #000);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

main {
  align-content: center;
  align-items: center;
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  margin: 0;
  position: relative;
  z-index: 5;
}

h1 {
  animation: reveal 4s ease-out;
  color: var(--orange);
  display: block;
  font-size: 200%;
  font-weight: 100;
  letter-spacing: clamp(0.01rem, 3vw, 2rem);
  margin: 3vh auto 0;
  max-width: 78rem;
  padding: 0 0 0 clamp(0.01rem, 3vw, 2rem);
  position: relative;
  text-align: center;
  text-shadow: 0 0.1rem 1.5rem var(--orange);
  text-transform: uppercase;
  transform: translateY(0);
  transition: color 0.5s, text-shadow 0.5s, transform 1s;
}

h1:hover {
  color: white;
  text-shadow: 0 0.1rem 1.5rem white;
  transform: scale(1.06);
  transition: color 0.5s, text-shadow 0.25s, transform 0.25s;
}

@keyframes reveal {
  0% {
    opacity: 0;
    filter: blur(5px);
  }

  20% {
    opacity: 0;
    filter: blur(5px);
  }

  40% {
    opacity: 1;
    filter: blur(2px);
  }

  60% {
    filter: blur(1px);
  }

  100% {
    filter: blur(0);
  }
}

article {
  animation: opacity-in 1.5s ease-in-out;
  background: linear-gradient(to bottom, rgb(255 229 195 / 15%), rgb(0 0 0 / 60%) 42%);
  border-bottom: 1px solid var(--orange-t25);
  border-left: 1px solid var(--orange-t50);
  border-radius: 1rem;
  border-right: 1px solid var(--orange-t50);
  border-top: 1px solid var(--orange);
  margin: 3rem 0 0;
  max-width: 35rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  position: relative;
  width: 100%;
  z-index: 6;
}

@keyframes opacity-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

article::after {
  background: linear-gradient(to bottom, transparent, var(--orange-t25), transparent);
  content: "";
  height: 1rem;
  left: 0;
  mask-image: linear-gradient(to right, transparent, white 25%, white, white 75%, transparent);
  position: absolute;
  top: -0.5rem;
  width: 100%;
}

article h2 {
  animation: opacity-in 2s ease-in-out forwards 1s;
  color: var(--orange-t90);
  font-size: 95%;
  font-weight: 200;
  letter-spacing: clamp(0.01rem, 0.5vw, 0.5rem);
  margin: 0;
  opacity: 0;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  text-wrap: pretty;
  transition: color 2s;
}

article h2:hover {
  color: white;
  transition: color 0.5s;
}

article p {
  margin: 0;
  padding: 0;
}

article details {
  background: transparent;
  cursor: pointer;
  margin: 0;
  padding: 0.75rem 1rem;
  transition: background 2s;
}

article ul {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

article details ul {
  margin: 1rem 0 0;
}

article details:not([open]) ul {
  opacity: 0;
}

article details[open] {
  background: #0006;
}

article details[open] ul {
  opacity: 1;
  transition: opacity 1s;
}

article details summary {
  font-weight: 600;
}

article ul li {
  background: linear-gradient(to right, var(--orange-t25), rgb(0 0 0 / 25%));
  border-radius: 0.5rem;
  border: 1px solid var(--orange-t50);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  text-shadow: 0 0 0.25rem rgb(0 0 0 / 25%);
  transition: 0.25s;
}

article ul li:hover,
article ul li:focus-within {
  background: linear-gradient(to right, var(--orange-t40), var(--orange-t40));
  border-color: var(--orange);
  box-shadow: 0 0 2rem var(--orange-t25);
  transition: 0.1s;
}

article ul li:first-child {
  margin: 0;
}

article ul li:not(:first-child) {
  margin: 1.75rem 0 0;
}

article details ul li:not(:first-child) {
  margin: 1rem 0 0;
}

article ul li:not(:first-child):has(details) {
  margin: 1rem 0 0;
}

article ul li a {
  color: white;
  margin: 0;
  padding: 0.75rem 1rem;
  text-decoration: none;
}

article ul li small {
  display: block;
  font-size: 70%;
  font-style: italic;
  opacity: 0.8;
  padding: 0 1rem 0.75rem;
}

article ul li small a {
  padding: unset;
  text-decoration: underline;
}

@media screen and (max-width: 699.9px) {
  article ul li a {
    display: block;
  }

  article ul li small {
    text-align: left;
  }

  article ul li small a {
    display: inline;
  }
}

@media screen and (min-width: 700px) {
  article ul li a {
    display: flex;
    flex-flow: row nowrap;
  }

  article ul li small {
    line-height: 2;
  }

  article ul li small a {
    display: inline;
  }
}

article ul li span {
  color: #f3d0ba;
  margin: 0 0 0 auto;
}

article ul li a:hover strong,
article ul li a:active strong,
article ul li a:focus strong {
  text-decoration: underline;
}

article ul li a:hover span,
article ul li a:active span,
article ul li a:focus span {
  color: white;
}

@media screen and (max-width: 699.9px) {
  article ul li span {
    display: block;
    margin: 0.5rem 0 0;
  }
}

hr {
  border-bottom: unset;
  border-left: unset;
  border-right: unset;
  border-top: 1px dotted var(--orange);
  margin: 1.5rem 0;
  opacity: 0.5;
  padding: 0;
}