:root {
  --transition-time: 0.3s ease;
  --ui-opacity: 0.3;
  --palette-bg: white;
  /* Overridden by js */
  --palette-fg: black;
  /* Overridden by js */
  --palette-pop: red;
  /* Overridden by js */
  --palette-darker: grey;
  /* Overridden by js */
  --palette-lighter: gray;
  /* Overridden by js */
  --palette-0: #000000;
  /* Overridden by js */
  --palette-1: #1D2B53;
  /* Overridden by js */
  --palette-2: #7E2553;
  /* Overridden by js */
  --palette-3: #008751;
  /* Overridden by js */
  --palette-4: #AB5236;
  /* Overridden by js */
  --palette-5: #5F574F;
  /* Overridden by js */
  --palette-6: #C2C3C7;
  /* Overridden by js */
  --palette-7: #FFF1E8;
  /* Overridden by js */
  background-color: var(--palette-darker); }

* {
  margin: 0;
  padding: 0;
  font-family: "marlide-display-variable", sans-serif;
  font-variation-settings: "wght" 400;
  color: #2a2a2a;
  /* Disable text selection */
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
   supported by Chrome, Edge, Opera and Firefox */
  pointer-events: none; }

#loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--palette-darker);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center; }

#loading img {
  width: 80%;
  max-width: 40rem;
  margin-bottom: 5rem; }

#three_canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  cursor: pointer;
  pointer-events: auto; }

/* INTERACT PROMPT */
#prompt {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  font-size: 1.2rem;
  text-align: center; }

#prompt h1, #prompt h4 {
  font-weight: 400;
  width: 70%;
  padding: 1rem;
  border: 1px solid var(--palette-bg);
  background-color: var(--palette-lighter);
  color: var(--palette-bg); }

#badge_mode {
  position: absolute;
  top: 3rem;
  transition: top var(--transition-time); }

#badge_mode.hidden {
  top: -5rem; }

/* UI */
#credits {
  z-index: 200;
  pointer-events: auto; }
  #credits svg {
    position: absolute;
    left: 0.8rem;
    bottom: 1rem;
    width: 3.5rem; }

.icon svg {
  fill: var(--palette-lighter);
  transition: fill var(--transition-time);
  pointer-events: auto; }

.loaded .icon svg {
  fill: var(--palette-pop); }

.interactive {
  cursor: pointer;
  transition: color var(--transition-time); }

.interactive:hover {
  color: var(--palette-bg); }

.cursor_grab {
  cursor: move !important; }

#fs_button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  cursor: pointer; }

#rectangle {
  width: 90%;
  height: 93%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: lighten;
  border: 8px solid var(--palette-pop);
  border-radius: 10px;
  box-shadow: inset 0 0 2rem var(--palette-pop), 0 0 2rem var(--palette-pop); }
  #rectangle::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--palette-pop) 0%, transparent 30%, transparent 70%, var(--palette-pop) 100%);
    opacity: 0.3;
    pointer-events: none; }

#stripes {
  mix-blend-mode: lighten; }
  #stripes::before, #stripes::after {
    content: "";
    position: absolute;
    width: 5%;
    height: 58%;
    background: repeating-linear-gradient(45deg, var(--palette-pop), var(--palette-pop) 5px, transparent 1px, transparent 10px);
    pointer-events: none; }
  #stripes::before {
    top: 7%;
    left: 0; }
  #stripes::after {
    bottom: 7%;
    right: 0; }

#pronouns h1 {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--palette-pop);
  font-family: "din-condensed", "DIN Condensed", sans-serif;
  padding: 0 0.5rem 0.2rem 0.3rem;
  border-radius: 0 0 10px 0;
  font-size: 1.5rem; }

#circles {
  mix-blend-mode: lighten;
  content: "";
  position: absolute;
  width: 20%;
  height: 3%;
  background: repeating-radial-gradient(circle, var(--palette-pop), var(--palette-pop) 0.2rem, transparent 0.2rem, transparent 0.5rem);
  pointer-events: none;
  top: -0.3%;
  left: 5.5%; }

#code {
  position: absolute;
  bottom: 3.3rem;
  left: 0.8rem;
  width: 8rem;
  height: 1.6rem;
  overflow: hidden; }
  #code svg {
    width: 8rem;
    animation: scroll-vertical 7s linear infinite; }
@keyframes scroll-vertical {
  0%, 25% {
    transform: translateY(0); }
  26%, 30% {
    transform: translateY(-2rem); }
  31%, 60% {
    transform: translateY(-3rem); }
  61%, 65% {
    transform: translateY(-5rem); }
  66%, 95% {
    transform: translateY(-6rem); }
  96%, 100% {
    transform: translateY(-9.05rem); } }
#volume-bars {
  width: 8rem;
  position: absolute;
  left: 0.8rem;
  bottom: 6rem; }
  #volume-bars div {
    display: inline-block;
    width: 0.35rem;
    height: 1rem;
    margin-right: 0.1rem;
    background-color: var(--palette-pop);
    animation: volume-bars 0.5s infinite;
    position: relative;
    bottom: 0; }
  #volume-bars div:nth-child(2) {
    animation-delay: 0.2s;
    animation-duration: 0.6s; }
  #volume-bars div:nth-child(3) {
    animation-delay: 0.3s;
    animation-duration: 0.5s; }
  #volume-bars div:nth-child(4) {
    animation-delay: 0.4s;
    animation-duration: 0.4s; }
  #volume-bars div:nth-child(5) {
    animation-delay: 0.5s;
    animation-duration: 0.3s; }
  #volume-bars span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-left: 0.3rem;
    border-radius: 50%;
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 50%, transparent 50%);
    animation: pie-graph 7.2s infinite;
    position: relative;
    bottom: 0;
    transform: rotate(-90deg); }
@keyframes pie-graph {
  0% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 0%, transparent 0%); }
  1% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 1%, transparent 1%); }
  2% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 2%, transparent 2%); }
  3% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 3%, transparent 3%); }
  4% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 4%, transparent 4%); }
  5% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 5%, transparent 5%); }
  6% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 6%, transparent 6%); }
  7% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 7%, transparent 7%); }
  8% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 8%, transparent 8%); }
  9% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 9%, transparent 9%); }
  10% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 10%, transparent 10%); }
  11% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 11%, transparent 11%); }
  12% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 12%, transparent 12%); }
  13% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 13%, transparent 13%); }
  14% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 14%, transparent 14%); }
  15% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 15%, transparent 15%); }
  16% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 16%, transparent 16%); }
  17% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 17%, transparent 17%); }
  18% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 18%, transparent 18%); }
  19% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 19%, transparent 19%); }
  20% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 20%, transparent 20%); }
  21% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 21%, transparent 21%); }
  22% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 22%, transparent 22%); }
  23% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 23%, transparent 23%); }
  24% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 24%, transparent 24%); }
  25% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 25%, transparent 25%); }
  26% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 26%, transparent 26%); }
  27% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 27%, transparent 27%); }
  28% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 28%, transparent 28%); }
  29% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 29%, transparent 29%); }
  30% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 30%, transparent 30%); }
  31% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 31%, transparent 31%); }
  32% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 32%, transparent 32%); }
  33% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 33%, transparent 33%); }
  34% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 34%, transparent 34%); }
  35% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 35%, transparent 35%); }
  36% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 36%, transparent 36%); }
  37% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 37%, transparent 37%); }
  38% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 38%, transparent 38%); }
  39% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 39%, transparent 39%); }
  40% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 40%, transparent 40%); }
  41% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 41%, transparent 41%); }
  42% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 42%, transparent 42%); }
  43% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 43%, transparent 43%); }
  44% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 44%, transparent 44%); }
  45% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 45%, transparent 45%); }
  46% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 46%, transparent 46%); }
  47% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 47%, transparent 47%); }
  48% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 48%, transparent 48%); }
  49% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 49%, transparent 49%); }
  50% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 50%, transparent 50%); }
  51% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 51%, transparent 51%); }
  52% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 52%, transparent 52%); }
  53% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 53%, transparent 53%); }
  54% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 54%, transparent 54%); }
  55% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 55%, transparent 55%); }
  56% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 56%, transparent 56%); }
  57% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 57%, transparent 57%); }
  58% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 58%, transparent 58%); }
  59% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 59%, transparent 59%); }
  60% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 60%, transparent 60%); }
  61% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 61%, transparent 61%); }
  62% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 62%, transparent 62%); }
  63% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 63%, transparent 63%); }
  64% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 64%, transparent 64%); }
  65% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 65%, transparent 65%); }
  66% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 66%, transparent 66%); }
  67% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 67%, transparent 67%); }
  68% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 68%, transparent 68%); }
  69% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 69%, transparent 69%); }
  70% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 70%, transparent 70%); }
  71% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 71%, transparent 71%); }
  72% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 72%, transparent 72%); }
  73% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 73%, transparent 73%); }
  74% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 74%, transparent 74%); }
  75% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 75%, transparent 75%); }
  76% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 76%, transparent 76%); }
  77% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 77%, transparent 77%); }
  78% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 78%, transparent 78%); }
  79% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 79%, transparent 79%); }
  80% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 80%, transparent 80%); }
  81% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 81%, transparent 81%); }
  82% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 82%, transparent 82%); }
  83% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 83%, transparent 83%); }
  84% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 84%, transparent 84%); }
  85% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 85%, transparent 85%); }
  86% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 86%, transparent 86%); }
  87% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 87%, transparent 87%); }
  88% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 88%, transparent 88%); }
  89% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 89%, transparent 89%); }
  90% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 90%, transparent 90%); }
  91% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 91%, transparent 91%); }
  92% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 92%, transparent 92%); }
  93% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 93%, transparent 93%); }
  94% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 94%, transparent 94%); }
  95% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 95%, transparent 95%); }
  96% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 96%, transparent 96%); }
  97% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 97%, transparent 97%); }
  98% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 98%, transparent 98%); }
  99% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 99%, transparent 99%); }
  100% {
    background: conic-gradient(var(--palette-pop) 0%, var(--palette-pop) 100%, transparent 100%); } }
    #volume-bars span:nth-of-type(2) {
      animation-delay: 5s;
      animation-duration: 3s;
      transform: rotate(0deg); }
@keyframes volume-bars {
  0%, 100% {
    height: 1rem; }
  50% {
    height: 0.5rem; } }
/* Palette test display */
.palette_test {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

.palette_test .palette_test {
  width: 10%;
  height: 10%;
  display: block; }

.palette_test div:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 400;
  text-align: center; }
.palette_test div:nth-of-type(1) {
  background-color: var(--palette-0);
  left: 0%; }
  .palette_test div:nth-of-type(1):before {
    content: "0";
    content: "0 fg"; }
.palette_test div:nth-of-type(2) {
  background-color: var(--palette-1);
  left: 10%; }
  .palette_test div:nth-of-type(2):before {
    content: "1"; }
.palette_test div:nth-of-type(3) {
  background-color: var(--palette-2);
  left: 20%; }
  .palette_test div:nth-of-type(3):before {
    content: "2";
    content: "2 lighter"; }
.palette_test div:nth-of-type(4) {
  background-color: var(--palette-3);
  left: 30%; }
  .palette_test div:nth-of-type(4):before {
    content: "3";
    content: "3 midtone"; }
.palette_test div:nth-of-type(5) {
  background-color: var(--palette-4);
  left: 40%; }
  .palette_test div:nth-of-type(5):before {
    content: "4"; }
.palette_test div:nth-of-type(6) {
  background-color: var(--palette-5);
  left: 50%; }
  .palette_test div:nth-of-type(6):before {
    content: "5";
    content: "6 darker";
    color: white; }
.palette_test div:nth-of-type(7) {
  background-color: var(--palette-6);
  left: 60%; }
  .palette_test div:nth-of-type(7):before {
    content: "6";
    content: "7 bg";
    color: white; }
.palette_test div:nth-of-type(8) {
  background-color: var(--palette-7);
  background-color: var(--palette-pop);
  left: 70%; }
  .palette_test div:nth-of-type(8):before {
    content: "7";
    content: "pop"; }

.marquee__container {
  position: absolute;
  height: 5rem;
  max-width: 4rem;
  left: 0.8rem;
  bottom: 7rem;
  overflow: hidden; }

.marquee {
  position: absolute;
  background: red;
  top: 2.8rem;
  height: 0.3rem; }

.track {
  position: absolute;
  bottom: -0.65rem;
  white-space: nowrap;
  will-change: transform;
  color: var(--palette-pop);
  font-size: 0.8rem;
  font-weight: 400;
  animation: marquee 13s linear infinite; }

@keyframes marquee {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-25%); } }
.marquee__capital-i {
  margin-top: 0.8rem;
  width: 4rem; }

.fade_out {
  opacity: 0 !important;
  transition: opacity 0.5s ease; }

/* PORTRAIT MODAL */
#portrait-modal {
  display: none; }

@media screen and (orientation: landscape) {
  #portrait-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--palette-darker);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999; }

  #portrait-modal h1 {
    text-align: center;
    color: white;
    margin-bottom: 1rem;
    padding: 0 1rem; } }

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