@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Anybody:ital,wght@0,100..900;1,100..900&family=Galindo&display=swap");
@font-face {
  font-family: "Trickster";
  src: local("Trickster"), url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf") format("opentype"), url("trickster-outline.woff2") format("woff2");
}
:root {
  --landingmode-nav-font-size: 10vh;
  --landingmode-nav-width: calc(var(--landingmode-nav-font-size) * 6);
  --landingmode-nav-gap: 8vh;
  --pagemode-nav-font-size: 4vh;
  --pagemode-nav-width: calc(var(--pagemode-nav-font-size) * 8);
  --pagemode-nav-gap: 2vh;
  --content-max-width: 75ch;
  --pagemode-nav-leftoffset: calc(100vw - calc(var(--pagemode-nav-width) + min(var(--main-width), var(--content-max-width))));
  --bigguy-max-width: 70vh;
  --main-width: calc(100vw - var(--pagemode-nav-width));
  --home-button-height: 56px;
  --animation-time: 0.6s;
  --animation-ease: cubic-bezier(.27, .94, .58, 1.17);
  --main-padding: 20px;
  --page-hue: 35;
  --page-background-color: hsla(var(--page-hue), 70%, 13%, 80%);
  --p-color: hsl(var(--page-hue), 35%, 71%);
  --h1-color: hsl(calc(var(--page-hue) + 20), 100%, 90%);
  --strong-color: hsl(var(--page-hue), 80%, 86%);
  --accent-color: hsl(var(--page-hue), 100%, 50%) ;
}

@keyframes bob-vertically {
  0%, 100% {
    translate: 0 -1vh;
  }
  50% {
    translate: 0 1vh;
  }
}
@keyframes bob-rotate {
  0%, 100% {
    rotate: -2deg;
  }
  50% {
    rotate: 2deg;
  }
}
*:not(#content *) {
  box-sizing: border-box;
  flex-shrink: 0 !important;
}

body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  background: #000000 radial-gradient(circle, rgba(89, 29, 47, 0.5) 0%, rgba(25, 2, 33, 0.5) 100%);
  color: white;
  font-size: max(12pt, 2vh);
  font-family: "Anybody", sans-serif;
  transition: background 1s linear;
}
body.landing {
  background: #000000 radial-gradient(circle, rgba(89, 29, 47, 0) 0%, rgba(25, 2, 33, 0) 100%);
}
body.landing .particles-js {
  opacity: 0;
}
body.landing #particlesb {
  opacity: 0.2;
}
body.landing #big_guy,
body.landing nav {
  opacity: 0;
  pointer-events: none;
}
body.landing #landing {
  pointer-events: all;
  opacity: 1;
  scale: 1;
}
body.page #big_guy {
  filter: blur(10px);
  max-width: 0;
  opacity: 0;
}
body.page nav {
  width: var(--pagemode-nav-width);
  margin-left: var(--pagemode-nav-leftoffset);
}
body.page nav:before {
  opacity: 1;
}
body.page nav ul {
  gap: var(--pagemode-nav-gap);
  width: var(--pagemode-nav-width);
  transform: translateY(0%);
  top: var(--home-button-height);
}
body.page nav ul > li > a {
  font-size: var(--pagemode-nav-font-size);
}
body.page .sublist a {
  font-size: calc(var(--pagemode-nav-font-size) * 0.7);
}
body.page #home_button {
  transform: translateY(0%);
  pointer-events: all;
}
body.page #main_container {
  max-width: var(--main-width);
  opacity: 1;
}
body.page main {
  pointer-events: all;
}

.particles-js {
  opacity: 1;
  transition: opacity 1s linear;
}
.particles-js canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#particlesa {
  position: fixed;
  width: 200%;
  height: 400vh;
  top: 0;
  left: 0;
  z-index: -1;
}

#particlesb {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1;
}

#big_guy {
  position: relative;
  width: 100%;
  max-width: var(--bigguy-max-width);
  height: 120vh;
  margin: -10vh 0;
  transition: max-width var(--animation-time) var(--animation-ease), opacity var(--animation-time) var(--animation-ease), filter var(--animation-time) var(--animation-ease), transform 1s var(--animation-ease), scale 1s var(--animation-ease);
  animation: bob-vertically 24s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite, bob-rotate 16s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.2666666667));
  transform: rotate(0deg);
  cursor: pointer;
}
#big_guy img {
  height: 100%;
  position: absolute;
  left: 100%;
  transform: translateX(-100%);
}
#big_guy:hover {
  transform: rotate(5deg);
  scale: 1.025;
}

nav {
  position: relative;
  width: var(--landingmode-nav-width);
  min-width: var(--pagemode-nav-width);
  margin-left: 0;
  transition: width var(--animation-time) var(--animation-ease), margin-left var(--animation-time) var(--animation-ease);
}
nav:before {
  content: "";
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.2666666667);
  backdrop-filter: blur(2px) contrast(1.3);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  margin-left: calc(50% - 100vw);
  padding-left: calc(100vw - 50%);
  opacity: 0;
  transition: opacity var(--animation-time) var(--animation-ease);
}
nav #home_button {
  font-family: "Galindo", sans-serif;
  opacity: 0.7;
  display: block;
  margin-left: calc(50% - 100vw);
  padding-left: calc(100vw - 50%);
  height: var(--home-button-height);
  transition: transform var(--animation-time) var(--animation-ease), opacity var(--animation-time) var(--animation-ease);
  color: var(--accent-color);
  text-decoration: none;
  display: flex;
  justify-content: left;
  align-items: center;
  transform: translateY(-100%);
  pointer-events: none;
}
nav #home_button:hover:not(:active) {
  opacity: 1;
}
nav #home_button:hover:not(:active) i {
  scale: 1.5;
}
nav #home_button i {
  display: inline-block;
  transition: scale var(--animation-time) var(--animation-ease);
}
nav #home_button img {
  height: 1em;
}
nav > ul {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--landingmode-nav-gap);
  flex: 1;
  text-align: center;
  padding: 0;
  transition: gap var(--animation-time) var(--animation-ease), width var(--animation-time) var(--animation-ease), transform var(--animation-time) var(--animation-ease), top var(--animation-time) var(--animation-ease);
  width: var(--landingmode-nav-width);
}
nav > ul > li {
  position: relative;
}
nav > ul > li > a {
  padding-top: 0.2em;
}
nav > ul > li .sublist {
  opacity: 0;
  display: grid;
  grid-template-rows: 0fr;
  pointer-events: none;
  transition: grid-template-rows var(--animation-ease) var(--animation-time), opacity var(--animation-ease) var(--animation-time);
}
nav > ul > li .sublist ul {
  padding-left: 0;
  overflow: hidden;
  min-height: 0;
}
nav > ul > li .sublist a {
  padding: 0.2em;
  margin-bottom: 0.2em;
  font-size: calc(var(--landingmode-nav-font-size) * 0.5);
  color: var(--h1-color);
}
nav > ul > li:has(a.active) .sublist {
  opacity: 1;
  pointer-events: all;
  grid-template-rows: 1fr;
}
nav > ul > li:has(a.active):before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  left: 2ch;
  width: calc(100% - 4ch);
  height: 100%;
  border-radius: 20px;
  filter: blur(10px);
  scale: 1;
  background-color: var(--accent-color);
  opacity: 0.4;
}
nav footer {
  position: absolute;
  bottom: 0;
  font-size: 2vh;
  line-height: 1.25em;
  padding: 1em;
  opacity: 0.6;
}
nav ul li a {
  text-decoration: none;
  color: white;
  font-size: var(--landingmode-nav-font-size);
  transition: font-size var(--animation-time) var(--animation-ease), rotate 0.2s var(--animation-ease), scale 0.2s var(--animation-ease), text-shadow 0.2s var(--animation-ease);
  text-wrap: nowrap;
  line-height: 1em;
  font-family: "Galindo", sans-serif;
  display: block;
  rotate: 0deg;
  text-shadow: 0 0 0px;
}
nav ul li a.active {
  color: var(--accent-color);
}
nav ul li a:hover:not(:active) {
  rotate: -4deg;
  scale: 1.2;
  text-shadow: 0 0 0.2em;
}

#main_container {
  position: relative;
  width: 100vw;
  max-width: 0;
  opacity: 0;
  backdrop-filter: brightness(2.2) contrast(4) blur(15px);
  height: 100vh;
  transition: max-width var(--animation-time) var(--animation-ease), opacity var(--animation-time) var(--animation-ease);
}

#content {
  max-width: var(--content-max-width);
  min-height: 100%;
}

main {
  position: absolute;
  left: calc(var(--main-width) / 2);
  transform: translateX(-50%);
  width: var(--main-width);
  overflow-x: hidden;
  overflow-y: auto;
  height: 100vh;
  pointer-events: none;
  padding: var(--main-padding);
  font-weight: 400;
  line-height: 140%;
  background-color: var(--page-background-color);
  box-shadow: 0px 0px 10px var(--accent-color);
  background-image: linear-gradient(to right, hsla(var(--page-hue), 100%, 50%, 20%) 0, transparent 4px);
  outline: var(--accent-color) 2px solid;
  color: var(--p-color);
}
main h1 {
  font-size: 200%;
  font-weight: 700;
  line-height: 120%;
  margin-top: 1ex;
  font-family: "Galindo", sans-serif;
  color: var(--h1-color);
  text-shadow: 0 0 10px var(--p-color);
}
main h2 {
  color: var(--h1-color);
  font-size: 167%;
  font-family: "Galindo", sans-serif;
  line-height: 120%;
  padding-top: 0.75ex;
}
main strong {
  color: var(--strong-color);
}
main details {
  border-radius: 10px;
  border: 1px solid var(--accent-color);
  background-color: hsla(var(--page-hue), 100%, 50%, 25%);
  overflow: hidden;
  padding: 1ch;
  cursor: pointer;
}
main details summary {
  background-color: hsla(var(--page-hue), 100%, 50%, 25%);
  outline: 1px solid hsla(var(--page-hue), 100%, 50%, 45%);
  padding: 1ch;
  margin: -1ch;
  color: var(--h1-color);
  font-size: 110%;
}
main details[open] summary {
  margin-bottom: 1ch;
}
main ul {
  list-style: none;
  margin-left: 0;
  padding-left: 3em;
}
main ul li {
  margin-top: 5pt;
  margin-bottom: 5pt;
}
main ul li ::before {
  content: "•";
  color: #aaffff;
  font-weight: bold;
  display: inline-block;
  width: 1.1em;
  margin-left: -1.1em;
}
main a {
  text-decoration: none;
  font-weight: 600;
  color: #fffcd2;
}
main a:hover {
  color: #ffc000;
}

#landing {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  scale: 2;
  transition: opacity var(--animation-ease) var(--animation-time), scale var(--animation-ease) var(--animation-time);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
#landing:has(#crystal:hover) #warning {
  opacity: 0.2;
}
#landing #crystal {
  cursor: pointer;
  scale: 1.1;
}
#landing #crystal:hover:not(:active) img {
  scale: 1.05;
  filter: drop-shadow(0 0 10px rgba(156, 238, 47, 0)) drop-shadow(0 0 50px rgb(156, 238, 47));
}
#landing #warning {
  flex: 0.7;
  height: 70vh;
  width: 100%;
  font-size: 120%;
  opacity: 0.6;
  transition: opacity 0.5s;
  max-width: 40ch;
  line-height: 1.25em;
}
#landing img {
  height: 100vh;
  animation: bob-vertically 6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite, bob-rotate 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  scale: 1;
  transition: scale 0.2s var(--animation-ease), filter 0.2s var(--animation-ease);
  filter: drop-shadow(0 0 10px rgb(156, 238, 47)) drop-shadow(0 0 10px rgba(156, 238, 47, 0));
}

@media screen and (width <= 500px) {
  :root {
    --pagemode-nav-width: 0;
    --landingmode-nav-width: 0;
    --main-width: 100vw;
  }
  body.page nav {
    opacity: 0;
    pointer-events: none;
  }
  body.page #main_container {
    pointer-events: all;
    display: block;
    scale: 1;
  }
  #big_guy {
    display: none;
  }
  nav {
    width: 100vw;
  }
  nav ul {
    width: 100%;
  }
  nav ul li a {
    text-wrap: wrap;
  }
  #main_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: unset;
    opacity: 1;
    scale: 0;
    transition: scale var(--animation-time) var(--animation-ease);
  }
}

/*# sourceMappingURL=style.css.map */