: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; }

#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); } }
/* 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: relative;
  height: 100%;
  max-width: 4rem;
  margin-left: 0.8rem;
  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 */