/* Remove default padding and margin */
*, *::before, *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --maxWidthXs: 480px;
  --maxWidthSm: 640px;
  --maxWidthMd: 800px;
  --maxWidthLg: 960px;
  --maxWidthXl: 1120px;
  --maxWidthXxl: 1600px;

  --typography-fontSizeH1: 7.5rem;
  --typography-fontSizeH2: 5rem;
  --typography-fontSizeH3: 3.25rem;
  --typography-fontSizeH4: 2.5rem;
  --typography-fontSizeH5: 1.5rem;
  --typography-fontSizeH6: 1.25rem;
  --typography-fontSizeBody: 1rem;
  --typography-fontSizeSm: 0.9rem;
  --typography-fontSizeXs: 0.75rem;

  --typography-fontWeightBold: 700;
  --typography-fontWeightSemiBold: 600;
  --typography-fontWeightRegular: 400;
  --typography-fontWeightLight: 100;

  --off-black: #030101;
  --gray: #3e3c3c;
  --off-white: #fefcfc;
  --background-color: var(--off-white);
  --color: var(--gray);
  --dark-background-font-color: var(--off-white);
  --selection: rgba(25, 32, 162, 0.5);
  --side-menu: rgba(84, 84, 84, 0.8);
  
  --primary: #e58908;
  --secondary: #087ee5;
  --accent: #3cf658;
  --contrast-color: #fff705;

  --zag-point-size: 45px;
  --bezier-smooth-transition: cubic-bezier(0.25, 0.5, 0.25, 0.9);
  
  h1, h2, h3, label {
    color: var(--off-black);
    transition: color 0.75s ease-in-out;
  }
}
.dark {
  --background-color: #323232;
  --color: var(--off-white);
  --dark-background-font-color: var(--off-white);
  transition: all 0.75s ease-in-out;
  h1, h2, h3, label {
    color: var(--off-white);
    transition: color 0.75s ease-in-out;
  }
}
.contrast {
  --background-color: #000000;
  --color: var(--contrast-color);
  --dark-background-font-color: var(--contrast-color);
  transition: all 0.75s ease-in-out;
  h1, h2, h3, label {
    color: var(--contrast-color);
    transition: color 0.75s ease-in-out;
  }
  a {
    color: var(--accent);
  }
}

html{
  scroll-behavior: smooth;
}

body {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  background-color: var(--background-color);
  color: var(--color);
  font-size: var(--typography-fontSizeBody);
  transition: all 0.75s ease-in-out;
  /* Ensure moving layers fit within body of page */
  width: 100vw;
  overflow-x: hidden;
}

.reduced-motion .dark {
  --background-color: #323232;
  --color: var(--off-white);
  transition: all 0.75s ease-in-out;
  h1, h2, h3, label {
    color: var(--off-white);
    transition: color 0.75s ease-in-out;
  }
}
.reduced-motion .contrast {
  --background-color: #000000;
  --color: var(--contrast-color);
  transition: all 0.75s ease-in-out;
  h1, h2, h3, label {
    color: var(--contrast-color);
    transition: color 0.75s ease-in-out;
  }
  a {
    color: var(--accent);
  }
}
.reduced-motion body {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  background-color: var(--background-color);
  color: var(--color);
  font-size: var(--typography-fontSizeBody);
  transition: all 0.75s ease-in-out;
  /* Ensure moving layers fit within body of page */
  width: 100vw;
  overflow-x: hidden;
}

a {
  color: var(--primary);
}

/* Avoid wonky scaling - preferred for gallary previews */
img {
  object-fit: cover;
}

input, textarea {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  width: 100%;
  padding: 16px;
  border: 2px solid var(--secondary);
  border-radius: 24px;
  background-color: rgba(254, 252, 252, 0.65);
  backdrop-filter: blur(5px);
}

textarea {
  resize: none;
  height: 120px;
}

::selection {
  background-color: var(--selection);
}

.display-none {
  display: none;
}

/* Navbar */
.sidenav-container {
  z-index: 500;
  position: fixed;
  width: "100%";
  height: "100%";
  top: 0;
  right: 0;
  padding: 32px;
}
.sidenav {
  gap: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: end;
  top: 0;
  right: 0;
  @media (width < 960px) or (height < 640px)  {
    justify-content: space-between;
  }
}
.sidenav-bg {
  display: none;
  @media (width < 960px) or (height < 640px)  {
    display: block;
    pointer-events: none;
    position: fixed;
    bottom: 0%;
    right: 0%;
    mask-image: linear-gradient(to right, rgba(0,0,0,0.05) 25%,rgba(0,0,0,0.15) 100%);
    width: 50%;
  }
}
.sidenav .menu {
  z-index: 75;
  @media (width < 960px) or (height < 640px) {
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    background-color: var(--side-menu);
    backdrop-filter: blur(5px);
    translate: 100vw 0;
    transition: translate 0.65s ease-in-out;
    @media (prefers-reduced-motion) {
      translate: 0;
      opacity: 0;
      transition: opacity 0.65s ease-in-out;
    }
  }
}
.sidenav .close {
  font-size: var(--typography-fontSizeH4);
  margin-inline-start: auto;
}
.sidenav .open {
  translate: 0 0;
  @media (prefers-reduced-motion) {
    opacity: 1;
  }
}
.sidenav .items {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  flex-direction: column;
  @media (width < 960px) or (height < 640px)  {
    align-items: start;
    flex-direction: column;
  }
}
.sidenav .item {
  a {
    writing-mode: vertical-lr;
    text-decoration: none;
    color: var(--color);
    text-transform: uppercase;
    font-weight: var(--typography-fontWeightSemiBold);
    font-size: var(--typography-fontSizeSm);
    transition: color 0.75s ease-in-out;
    @media (width < 960px) or (height < 640px)  {
      color: var(--dark-background-font-color);
      writing-mode: initial;
    }
  }
  a:hover, a.active {
    color: var(--primary);
    transition: color 0.25s ease-in-out;
  }
  .sub-item a {
    writing-mode: horizontal-tb;
    position: absolute;
    margin-right: 32px;
    white-space: nowrap;
    @media (width < 960px) or (height < 640px) {
      align-items: start;
      writing-mode: initial;
      position: relative;
      margin-left: 32px;
    }
  }
}
.sidenav .logo {
  a {
    z-index: 99;
    writing-mode: horizontal-tb;
    text-decoration: none;
  }
}

/* TODO: A lot of this styling doesn't have an impact as hamburger is now an icon */
.sidenav .hamburger {
  z-index: 99;
  background: none;
  border: none;
  padding: 0;
  font-weight: var(--typography-fontWeightSemiBold);
  color: var(--dark-background-font-color);
  position: relative;
  transition: color 0.65s ease-in-out;
  @media (width >= 960px) and (height >= 640px) {
    display: none;
  }
}
.sidenav .hamburger:not(.open) {
  color: var(--color);
}
/*

.hamburger a {
  padding: 0;
  margin: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  border-radius: 50%;
  background-color: rgba(115, 115, 155, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  justify-content: center;
  align-items: center;
}

.hamburger .bar {
  position: relative;
  width: 50%;
  height: 2px;
  background-color: #FFFFFF;
  border-radius: 2px;
}

.hamburger .bar::before, .hamburger .bar::after {
  content: "";
  position: absolute;
  background-color: inherit;
  left: 50%;
  transform: translate(-50%);
  width: 100%;
  height: 100%;
  height: 2px;
  border-radius: 2px;
}

.hamburger .bar::before {
  top: -8px;
}

.hamburger .bar::after {
  top: 8px;
}*/

main {
  padding-top: 80px;
  padding-bottom: 80px;
  max-width: 1024px;
  @media (width < 1120px) {
    max-width: 640px;
  }
  @media (width < 800px) {
    max-width: 360px;
  }
  @media (width < 640px) {
    max-width: 240px;
  }
}

/* Content section */
.main-content-container {
  padding-left: 80px;
  padding-right: 160px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-top-container {
  overflow: hidden;
}

.bg-top {
  position: absolute;
  max-height: 400px;
  z-index: -5;
  width: 100vw;
  /* TODO: This method may not work for older browsers */
  mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.50) 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.50) 100%);
}

.section-container {
  @media (width < 1600px) {
    width: 640px;
    padding-left: 0px;
    padding-right: 0px;
  }
  @media (width < 1120px) {
    width: 480px;
  }
  @media (width < 800px) {
    width: 360px;
  }
  @media (width < 640px) {
    width: 240px;
  }
}

.top-jagged-mask {
  -webkit-mask-image: url("images/Mask1.5.png");
  mask-image: url("images/Mask1.5.png");
  mask-size: cover;
  mask-repeat: no-repeat;
  margin-top: -240px;
}

.top-jagged-mask-no-margin {
  -webkit-mask-image: url("images/Mask1.5.png");
  mask-image: url("images/Mask1.5.png");
  mask-size: cover;
  mask-repeat: no-repeat;
}

.parallax-150vh-section-container {
  position: relative;
  height: 150vh;
  width: 100vw;
  overflow: hidden;
  @media (640px < width < 960px) {
    height: 200vh;
  }
  @media (width < 480px) {
    height: 125vh;
  }
  @media (height < 800px) {
    height: 200vh;
  }
  @media (height < 640px) {
    height: 275vh;
  }
  @media (height < 480px) {
    height: 350vh;
  }
}

.contrast .parallax-150vh-section-container:before {
  opacity: 1;
  content: "";
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  transition: all 0.5s ease-in-out;
  pointer-events: none;
}
.dark .parallax-150vh-section-container:before {
  opacity: 1;
  content: "";
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(5, 1, 24, 0.65);
  transition: all 0.5s ease-in-out;
  pointer-events: none;
}
.parallax-150vh-section-container:before {
  opacity: 1;
  content: "";
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.75);
  transition: all 0.5s ease-in-out;
  pointer-events: none;
}

.dynamic-parallax-div-container {
  position: relative;
  height: 100vh;
  width: 100vw;
}

.parallax {
  position: absolute;
  transform: translate(-50%, -50%);
  /* TODO: If pointer event are wanted within the main section, re-enable this */
  pointer-events: none;
  transition: 0.45s var(--bezier-smooth-transition);
}

/* .dark .layer-0-stratosphere, .dark .layer-0-surface, .dark .layer-0-epipelagic, .dark .layer-0-mesopelagic, .dark .layer-0-deepdive,*/ .dark .layer-0-vault/*, .dark .layer-0-void*/ {
  filter: brightness(0.25);
}
/*.contrast .layer-0-stratosphere, .contrast .layer-0-surface, .contrast .layer-0-epipelagic, .contrast .layer-0-mesopelagic, .contrast .layer-0-deepdive, .contrast .layer-0-void {
  opacity: 0;
}*/
.contrast .layer-0-vault {
  filter: brightness(1);
}

.reduced-motion .text-layer-hero {
  animation: none;
  animation-iteration-count: none;
}
.text-layer-hero {
  z-index: 9;
  top: 50%;
  left: 50%;
  width: 65vw;
  max-width: 1024px;
  pointer-events: auto;
  text-transform: uppercase;
  text-align: center;
  animation: bob-up-and-down 5s;
  animation-iteration-count: infinite;
  @media (width < 640px) {
    width: 75vw;
  };
}

.text-layer {
  z-index: 9;
  top: 50%;
  left: 50%;
  width: 65vw;
  max-width: 1024px;
  pointer-events: auto;
  @media (width < 960px) {
    top: 100%;
    width: 75vw;
  };
  @media (width < 640px) {
    top: 85%;
    width: 75vw;
  };
  @media (width < 480px) {
    top: 50%;
    width: 75vw;
  };
  @media (height < 640px) {
    top: 125%;
    width: 75vw;
  };
}

.text-layer-synopsis {
  z-index: 9;
  top: 50%;
  left: 50%;
  width: 65vw;
  max-width: 1024px;
  pointer-events: auto;
  h5 {
    font-size: var(--typography-fontSizeH5);
    @media (width < 640px) {
      font-size: var(--typography-fontSizeH6);
    }
  }
}

.text-layer-hero h1 {
  font-weight: var(--typography-fontWeightLight);
  font-size: var(--typography-fontSizeH1);
  color: var(--off-black);
  letter-spacing: 8px;
  line-height: 0.75;
  @media (width < 1120px) {
    font-size: var(--typography-fontSizeH2);
  };
  @media (width < 960px) {
    font-size: var(--typography-fontSizeH3);
  };
  @media (width < 640px) {
    font-size: var(--typography-fontSizeH4);
  };
}
.text-layer-hero h3 {
  font-weight: var(--typography-fontWeightBold);
  font-size: var(--typography-fontSizeH3);
  margin-top: 170px;
  @media (width < 1120px) {
    font-size: var(--typography-fontSizeH4);
    margin-top: 115px;
  };
  @media (width < 960px) {
    font-size: var(--typography-fontSizeH5);
    margin-top: 75px;
  };
  @media (width < 640px) {
    font-size: var(--typography-fontSizeH6);
    margin-top: 56px;
  };
}
.text-layer-content h1 {
  position: absolute;
}
.dark .text-layer-content h1:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 2px #f45f03;
}
.text-layer-content h1:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 2px #03a9f4;
}
.reduced-motion .dark .text-layer-content h1:nth-child(2),
.reduced-motion .text-layer-content h1:nth-child(2) {
  animation: fluidWater-2-limited 5s ease-in-out infinite;

}
.reduced-motion .dark .text-layer-content h1:nth-child(3),
.reduced-motion .text-layer-content h1:nth-child(3) {
  animation: fluidWater-limited 5s ease-in-out infinite;
}
.dark .text-layer-content h1:nth-child(2) {
  color: var(--primary);
  animation: fluidWater-2 5s ease-in-out infinite;
}
.text-layer-content h1:nth-child(2) {
  color: var(--secondary);
  animation: fluidWater-2 5s ease-in-out infinite;
}
.dark .text-layer-content h1:nth-child(3) {
  color: #f45f03;
  animation: fluidWater 5s ease-in-out infinite;
}
.text-layer-content h1:nth-child(3) {
  color: #03a9f4;
  animation: fluidWater 5s ease-in-out infinite;
}
.project-numbering {
  font-size: var(--typography-fontSizeH2);
  position: absolute;
  z-index: 25;
  opacity: 0.25;
  transform: rotate(180deg) translate(100px, 0px);
  writing-mode: vertical-lr;
}
/* TODO: curve path if possible */
@keyframes fluidWater
{
  0%, 100%
  {
    clip-path: polygon(0 47%, 19% 39%, 36% 47%, 52% 64%, 70% 68%, 85% 60%, 100% 46%, 100% 120%, 0% 120%);
  }
  50%
  {
    clip-path: polygon(0 65%, 16% 75%, 36% 65%, 52% 49%, 72% 39%, 86% 46%, 100% 54%, 100% 120%, 0% 120%);
  }
}
@keyframes fluidWater-limited
{
  0%, 100%
  {
    clip-path: polygon(0 47%, 19% 39%, 36% 47%, 52% 64%, 70% 68%, 85% 60%, 100% 46%, 100% 120%, 0% 120%);
  }
}
@keyframes fluidWater-2
{
  0%, 100%
  {
    clip-path: polygon(0 27%, 19% 19%, 36% 27%, 52% 44%, 70% 48%, 85% 40%, 100% 36%, 100% 120%, 0% 120%);
  }
  50%
  {
    clip-path: polygon(0 45%, 16% 55%, 36% 45%, 52% 29%, 72% 19%, 86% 26%, 100% 34%, 100% 120%, 0% 120%);
  }
}
@keyframes fluidWater-2-limited
{
  0%, 100%
  {
    clip-path: polygon(0 27%, 19% 19%, 36% 27%, 52% 44%, 70% 48%, 85% 40%, 100% 36%, 100% 120%, 0% 120%);
  }
}
@keyframes bob-up-and-down {
  from {
    bottom: 16px;
  }
  50% {
    bottom: -16px;
  }
  to {
    bottom: 16px;
  }
}
.bottom-gradient {
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 100%);
}
.layer-0-stratosphere {
  z-index: 8;
  width: 120%;
  top: calc(110%);
  left: calc(75%);
  filter: brightness(0.25);
  @media (width < 1600px) {
    top: calc(130%);
  }
  @media (width < 1120px) {
    top: calc(140%);
  }
  @media (width < 960px) {
    width: 250%;
    top: calc(175vh);
  }
  @media (width < 640px) {
    width: 175%;
    top: calc(160%);
  }
  @media (width < 480px) {
    z-index: 8;
    width: 150%;
    left: calc(45%);
    top: calc(100%);
  }
}

.layer-1-stratosphere {
  z-index: 7;
  width: 110%;
  top: calc(100%);
  left: calc(30%);
  @media (width < 480px) {
    width: 125%;
    left: calc(55%);
    top: calc(95%);
  }
}

.layer-2-stratosphere {
  z-index: 6;
  width: 110%;
  top: calc(85%);
  left: calc(60%);
  @media (width < 480px) {
    width: 75%;
    left: calc(45%);
    top: calc(100%);
  }
}

.layer-3-stratosphere {
  z-index: 4;
  width: 110%;
  top: calc(95%);
  left: calc(50%);
  @media (width < 480px) {
    width: 175%;
    left: calc(85%);
    top: calc(85%);
  }
}

.layer-4-stratosphere {
  z-index: 3;
  width: 125%;
  top: calc(75%);
  left: calc(35%);
  @media (width < 480px) {
    width: 200%;
    top: calc(75%);
  }
}

.layer-4-5-theme-stratosphere {
  z-index: 3;
  width: 10%;
  top: calc(35%);
  left: calc(25%);
  @media (width < 480px) {
    top: calc(85%);
  }
}

.layer-5-stratosphere {
  z-index: 2;
  width: 105%;
  top: calc(50%);
  left: calc(35%);
  @media (width < 480px) {
    width: 175%;
    top: calc(20%);
  }
}

.layer-bg {
  z-index: 1;
  height: 1000vh;
  width: 250vw;
}

.layer-0-surface {
  z-index: 8;
  width: 110%;
  top: calc(105%);
  left: calc(75%);
  @media (width < 480px) {
    z-index: 8;
    width: 125%;
    left: calc(50%);
    top: calc(100%);
  }
}

.layer-1-surface {
  z-index: 7;
  width: 75%;
  top: calc(75%);
  left: calc(75%);
  @media (width < 480px) {
    width: 125%;
    left: calc(70%);
    top: calc(55%);
  }
}

.layer-2-surface {
  z-index: 6;
  width: 90%;
  top: calc(105%);
  left: calc(85%);
  @media (width < 480px) {
    width: 175%;
    left: calc(100%);
    top: calc(85%);
  }
}

.layer-3-surface {
  z-index: 4;
  width: 100%;
  top: calc(50%);
  left: calc(60%);
  @media (width < 480px) {
    width: 175%;
    left: calc(85%);
    top: calc(55%);
  }
}

.layer-4-surface {
  z-index: 3;
  width: 125%;
  top: calc(130%);
  left: calc(55%);
  @media (width < 480px) {
    width: 300%;
    left: calc(95%);
    top: calc(80%);
  }
}

.layer-5-surface {
  z-index: 2;
  width: 105%;
  top: calc(50%);
  left: calc(55%);
  @media (width < 480px) {
    width: 300%;
    top: calc(50%);
  }
}

.layer-0-epipelagic {
  z-index: 8;
  width: 50%;
  top: calc(125%);
  left: calc(110%);
  @media (width < 480px) {
    z-index: 8;
    width: 125%;
    left: calc(50%);
    top: calc(90%);
  }
}

.layer-1-epipelagic {
  z-index: 7;
  width: 70%;
  top: calc(90%);
  left: calc(10%);
  @media (width < 480px) {
    width: 125%;
    left: calc(25%);
    top: calc(65%);
  }
}

.layer-2-epipelagic {
  z-index: 6;
  width: 70%;
  top: calc(75%);
  left: calc(90%);
  @media (width < 480px) {
    width: 125%;
    left: calc(100%);
    top: calc(50%);
  }
}

.layer-3-epipelagic {
  z-index: 4;
  width: 110%;
  top: calc(125%);
  left: calc(47%);
  @media (width < 480px) {
    width: 250%;
    top: calc(65%);
  }
}

.layer-4-epipelagic {
  z-index: 3;
  width: 120%;
  top: calc(55%);
  left: calc(50%);
  @media (width < 480px) {
    width: 200%;
    left: calc(95%);
    top: calc(45%);
  }
}

.layer-5-epipelagic {
  z-index: 2;
  width: 105%;
  top: calc(65%);
  left: calc(45%);
  @media (width < 480px) {
    width: 175%;
    top: calc(30%);
  }
}

.layer-0-mesopelagic {
  z-index: 8;
  width: 65%;
  top: calc(115%);
  left: calc(90%);
  @media (width < 480px) {
    z-index: 8;
    width: 125%;
    left: calc(50%);
    top: calc(100%);
  }
}

.layer-1-mesopelagic {
  z-index: 7;
  width: 90%;
  top: calc(125%);
  left: calc(75%);
  @media (width < 480px) {
    width: 150%;
    left: calc(70%);
    top: calc(85%);
  }
}

.layer-2-mesopelagic {
  z-index: 6;
  width: 110%;
  top: calc(125%);
  left: calc(50%);
  @media (width < 480px) {
    width: 195%;
    left: calc(85%);
    top: calc(95%);
  }
}

.layer-3-mesopelagic {
  z-index: 4;
  width: 100%;
  top: calc(50%);
  left: calc(55%);
  @media (width < 480px) {
    width: 175%;
    left: calc(95%);
    top: calc(35%);
  }
}

.layer-4-mesopelagic {
  z-index: 3;
  width: 125%;
  top: calc(100%);
  left: calc(55%);
  @media (width < 480px) {
    width: 250%;
    left: calc(95%);
    top: calc(30%);
  }
}

.layer-5-mesopelagic {
  z-index: 2;
  width: 105%;
  top: calc(50%);
  left: calc(55%);
  @media (width < 480px) {
    width: 300%;
    top: calc(50%);
  }
}

.layer-0-deepdive {
  z-index: 8;
  width: 50%;
  top: calc(65%);
  left: calc(120%);
  @media (width < 480px) {
    z-index: 8;
    width: 125vh;
    height: 125vh;
    left: calc(195%);
    top: calc(55%);
  }
}

.layer-1-deepdive {
  z-index: 7;
  width: 50%;
  top: calc(50%);
  left: calc(80%);
  @media (width < 480px) {
    width: 125%;
    top: calc(70%);
  }
}

.layer-2-deepdive {
  z-index: 6;
  width: 90%;
  top: calc(75%);
  left: calc(35%);
  @media (width < 480px) {
    width: 125vh;
    height: 125vh;
    left: calc(75%);
    top: calc(55%);
  }
}

.layer-3-deepdive {
  z-index: 4;
  width: 110%;
  top: calc(100%);
  left: calc(50%);
  @media (width < 480px) {
    width: 300%;
    top: calc(50%);
  }
}

.layer-4-deepdive {
  z-index: 3;
  width: 110%;
  top: calc(85%);
  left: calc(50%);
  @media (width < 480px) {
    width: 150%;
    top: calc(40%);
  }
}

.layer-5-deepdive {
  z-index: 2;
  width: 105%;
  top: calc(50%);
  left: calc(40%);
  @media (width < 480px) {
    width: 175%;
    top: calc(20%);
  }
}

.layer-1-contact {
  z-index: 7;
  width: 60%;
  top: calc(50%);
  left: calc(0%);
  @media (width < 480px) {
    width: 125%;
    left: calc(-25%);
    top: calc(70%);
  }
}

.layer-2-contact {
  z-index: 6;
  width: 50%;
  top: calc(75%);
  left: calc(100%);
  @media (width < 480px) {
    width: 125%;
    left: calc(100%);
    top: calc(55%);
  }
}

.layer-3-contact {
  z-index: 4;
  width: 70%;
  top: calc(80%);
  left: calc(10%);
  @media (width < 480px) {
    width: 200%;
    top: calc(75%);
    left: calc(-35%);
  }
}

.layer-4-contact {
  z-index: 3;
  width: 60%;
  top: calc(75%);
  left: calc(75%);
  @media (width < 480px) {
    width: 200%;
    top: calc(40%);
  }
}

.layer-5-contact {
  z-index: 2;
  width: 45%;
  top: calc(70%);
  left: calc(52.5%);
  @media (width < 480px) {
    width: 75%;
    left: calc(30%);
    top: calc(30%);
  }
}

.layer-0-vault {
  z-index: 9;
  width: 50%;
  top: calc(75%);
  left: calc(45%);
  @media (width < 480px) {
    z-index: 8;
    width: 75%;
    left: calc(42.5%);
    top: calc(55%);
  }
}

.layer-2-vault {
  z-index: 4;
  width: 35%;
  top: calc(55%);
  left: calc(25%);
  @media (width < 480px) {
    width: 50%;
    left: calc(25%);
    top: calc(30%);
  }
}

.layer-0-void {
  z-index: 8;
  width: 85%;
  top: calc(65%);
  left: calc(50%);
  animation: bob-up-and-down 5s ease-in-out infinite;
  @media (width < 480px) {
    z-index: 8;
    width: 105%;
    top: calc(65%);
  }
}

.layer-1-void {
  z-index: 7;
  width: 75%;
  top: calc(65%);
  left: calc(50%);
  animation: bob-up-and-down 5s ease-in-out infinite;
  @media (width < 480px) {
    width: 200%;
    top: calc(65%);
  }
}

.layer-2-void {
  z-index: 6;
  width: 25%;
  top: calc(20%);
  left: calc(40%);
  animation: clockwise-rotation 5s linear infinite;
  @media (width < 480px) {
    width: 45%;
    left: calc(30%);
    top: calc(45%);
  }
}

.layer-3-void {
  z-index: 4;
  width: 35%;
  top: calc(10%);
  left: calc(35%);
  animation: counter-clockwise-rotation 5s linear infinite;
  @media (width < 480px) {
    width: 55%;
    left: calc(25%);
    top: calc(45%);
  }
}

.layer-4-void {
  z-index: 3;
  width: 55%;
  top: calc(5%);
  left: calc(25%);
  animation: clockwise-rotation 20s linear infinite;
  @media (width < 480px) {
    width: 100%;
    left: calc(5%);
    top: calc(37.5%);
  }
}

.layer-5-void {
  z-index: 2;
  width: 65%;
  top: calc(5.5%);
  left: calc(20%);
  animation: clockwise-rotation 30s linear infinite;
  @media (width < 480px) {
    width: 110%;
    left: calc(0%);
    top: calc(35%);
  }
}

.layer-bg-void {
  height: 350vh;
  top: calc(50%);
  left: calc(50%);
}

.reduced-motion .fade-in {
  opacity: 1;
  animation: none;
  transition: none;
}

.fade-in {
  animation: zerotooneopacity 1s ease-in-out forwards;
}
 
.fade-out {
  animation: onetozeroopacity 1s ease-in-out forwards;
}

@keyframes onetooneopacity
{
  0%
  {
    opacity: 1;
  }
  100%
  {
    opacity: 1;
  }
}

@keyframes zerotooneopacity
{
  0%
  {
    opacity: 0;
  }
  100%
  {
    opacity: 1;
  }
}
@keyframes onetozeroopacity
{
  0%
  {
    opacity: 1;
  }
  100%
  {
    opacity: 0;
  }
}

.opacity-0 {
  opacity: 0;
}

.sun-moon-idle-up {
  animation: sunmoonidleup 0.5s ease-in-out forwards;
}

.sun-moon-idle-down {
  animation: sunmoonidledown 0.5s ease-in-out forwards;
}


.sun-moon-rotate-up {
  animation: sunmoonup 2.5s ease-in-out forwards;
}

.sun-moon-rotate-down {
  animation: sunmoondown 2.5s ease-in-out forwards;
}

@keyframes sunmoonidleup { 
  0% { 
    opacity: 1;
    transform: rotate(540deg) translateY(240px) rotate(540deg); 
  } 
  100% { 
    opacity: 1;
    transform: rotate(540deg) translateY(240px) rotate(540deg); 
  } 
}

@keyframes sunmoonidledown {
  0% { 
    opacity: 0;
    transform: rotate(360deg) translateY(160px) rotate(360deg); 
  }
  100% { 
    opacity: 0;
    transform: rotate(360deg) translateY(160px) rotate(360deg); 
  }
}

@keyframes sunmoonup {
  0% { 
    opacity: 0;
    transform: rotate(360deg) translateY(160px) rotate(360deg); 
  }
  100% { 
    opacity: 1;
    transform: rotate(540deg) translateY(240px) rotate(540deg); 
  } 
}

@keyframes sunmoondown {
  0% { 
    opacity: 1;
    transform: rotate(180deg) translateY(240px) rotate(180deg); 
  }
  100% { 
    opacity: 0;
    transform: rotate(360deg) translateY(160px) rotate(360deg); 
  }
}

.flex {
  display: flex;
}

.flex-to-grid {
  display: flex;
  @media (width < 960px) {
    display: grid;
  }
}

/* TODO: GALLERY IMPLEMENTS SOMETHING SIMILAR THAT COULD BE BETTER */
.divide-half {
  width: 50%;
  @media (width < 960px) {
    width: 100%;
  }
}
.padding-1 {
  padding: 16px;
}
.padding-l-1 {
  padding-left: 16px;
}
.padding-r-1 {
  padding-right: 16px;
}
.padding-2 {
  padding: 32px;
}
.padding-t-1 {
  padding-top: 16px;
}
.padding-t-2 {
  padding-top: 32px;
}
.padding-t-10 {
  padding-top: 160px;
}
.padding-b-1 {
  padding-bottom: 16px;
}
.padding-b-2 {
  padding-bottom: 32px;
}

.margin-1 {
  margin: 16px;
}
.margin-l-1 {
  margin-left: 16px;
}
.margin-r-1 {
  margin-right: 16px;
}
.margin-2 {
  margin: 32px;
}
.margin-t-1 {
  margin-top: 16px;
}
.margin-t-2 {
  margin-top: 32px;
}
.margin-t-10 {
  margin-top: 160px;
}
.margin-t-20 {
  margin-top: 320px;
}
.margin-b-1 {
  margin-bottom: 16px;
}
.margin-b-2 {
  margin-bottom: 32px;
}
.margin-b-10 {
  margin-bottom: 160px;
}

.solid-background {
  background-color: var(--background-color);
  z-index: 10;
}

.pill-content {
  border-radius: 32px;
  border: 2px solid var(--color);
  padding: 8px;
  padding-left: 16px;
  padding-right: 16px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: inline-flex;
}

/* Dividers */
.wave-divider {
  background: var(--secondary);
  height: 80px;
  animation: fluidWater 5s ease-in-out infinite;
}

.zig-zag-divider-top {
  /* TODO: Change up numbers and values */
  --point-angle: 90deg;
  height: 480px;
  /*background: repeating-linear-gradient(135deg, var(--primary) 0 16px, var(--secondary) 0 32px);*/
  mask: conic-gradient(from calc(180deg - var(--point-angle)/2) at top, #03a9f4, #03a9f4 0deg var(--point-angle), #0000 var(--point-angle)) 50%/var(--zag-point-size);
  /* background: url("images/Binary.png"); */
  background-color: #03a9f4;
}

.zig-zag-divider-bottom {
  --point-angle: 90deg;
  height: 480px;
  /* background: repeating-linear-gradient(135deg, var(--primary) 0 15px, var(--secondary) 0 30px); */
  mask: conic-gradient(from calc(var(--point-angle)/-2) at bottom, #03a9f4, #03a9f4 1deg var(--point-angle),#0000 calc(var(--point-angle) + 1deg)) 50%/var(--zag-point-size);
  /* background: url("images/Binary.png"); */
  background-color: #03a9f4;
}

.dark .zig-zag-divider-top {
  /* TODO: Change up numbers and values */
  --point-angle: 90deg;
  height: 480px;
  /*background: repeating-linear-gradient(135deg, var(--primary) 0 16px, var(--secondary) 0 32px);*/
  background: conic-gradient(from calc(180deg - var(--point-angle)/2) at top, var(--secondary), var(--secondary) 0deg var(--point-angle), #0000 var(--point-angle)) 50%/var(--zag-point-size);
}

.dark .zig-zag-divider-bottom {
  --point-angle: 90deg;
  height: 480px;
  /* background: repeating-linear-gradient(135deg, var(--primary) 0 15px, var(--secondary) 0 30px); */
  background: conic-gradient(from calc(var(--point-angle)/-2) at bottom, var(--secondary), var(--secondary) 1deg var(--point-angle),#0000 calc(var(--point-angle) + 1deg)) 50%/var(--zag-point-size);
}

.synopsis-container {
  width: 100vw;
  z-index: 5;
  position: absolute;
  margin-top: -32px;
  height: 512px;
  overflow: hidden;
}

.top-text {
  z-index: 6;
  position: absolute;
}

.reduced-motion .zig-zag-container-left, .reduced-motion .zig-zag-container-right {
  animation: none;
}
.zig-zag-container-left {
  width: 115%;
  position: absolute;
  margin-top: -32px;
  animation: leftzag 1s linear infinite;
}

.zig-zag-container-right {
  width: 115%;
  position: absolute;
  animation: rightzag 1s linear infinite;
}


@keyframes leftzag {
  0% {left: 0;}
  100% {left: calc(var(--zag-point-size) * -1);}
}

@keyframes rightzag {
  0% {right: 0;}
  100% {right: calc(var(--zag-point-size) * -1);}
}

/* Section scrolling indicators */
.scroll-fade-in {
  display: block;
  color: black;
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.scroll-fade-out {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.reduced-motion #scroll-indicator-up, .reduced-motion #scroll-indicator-down {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
#scroll-indicator-up {
  z-index: 50;
  position: fixed;
  top: 40px;
  left: 50%;
  max-width: 32px;
  animation: pointup 3s ease-in-out infinite;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
#scroll-indicator-down {
  z-index: 50;
  position: fixed;
  bottom: 40px;
  left: 50%;
  max-width: 32px;
  animation: pointdown 3s ease-in-out infinite;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

@keyframes pointup {
  0% { 
    opacity: 0;
    transform: translateY(16px); 
  }
  50% {
    opacity: 0.5;
    transform: translateY(0px);
  }
  100% { 
    opacity: 0;
    transform: translateY(0px);
  }
}
@keyframes pointdown {
  0% { 
    opacity: 0;
    transform: translateY(-16px); 
  }
  50% {
    opacity: 0.5;
    transform: translateY(0px);
  }
  100% { 
    opacity: 0;
    transform: translateY(0px);
  }
}
@keyframes clockwise-rotation {
  0% {
    transform :rotate(0deg)
  }
  100% {
    transform :rotate(360deg)
  }
}
@keyframes contrast-clockwise-rotation {
  0% {
    transform :rotate(0deg)
  }
  100% {
    transform :rotate(360deg)
  }
}
@keyframes counter-clockwise-rotation {
  0% {
    transform :rotate(360deg);
  }
  100% {
    transform :rotate(0deg);
  }
}

#scroll-up-anchor {
  display: none;
  z-index: 300;
}
#scroll-down-anchor {
  display: block;
  z-index: 300;
}

/* Perspective images */
.perspective-image-container {
  position: relative;
  transform-style: preserve-3d;
  transition: 0.45s var(--bezier-smooth-transition);
}

.perspective-image {
  width: 100%;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #333;
}

.required:before {
  content:"* ";
  color: var(--primary);
}

.form-error-msg {
  color: var(--primary);
  font-size: var(--typography-fontSizeXs);
  display: none;
}

.form-alert-msg {
  font-size: var(--typography-fontSizeXs);
  display: none;
}

.primary-button:hover {
  background-color: var(--secondary);
  border: 2px solid var(--secondary);
  color: var(--off-white);
  transition: all 0.5s;
}
.primary-button {
  cursor: pointer;
  background-color: var(--primary);
  border: 2px solid var(--primary);
  color: var(--off-white);
  border-color: var(--primary);
  border-radius: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 32px;
  padding-right: 32px;
  transition: all 0.5s;
}
.secondary-button:hover {
  background-color: var(--secondary);
  border: 2px solid var(--secondary);
  color: var(--off-white);
  transition: all 0.5s;
}
.secondary-button {
  cursor: pointer;
  background-color: none;
  color: var(--primary);
  border: 2px solid var(--primary);
  border-radius: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 32px;
  padding-right: 32px;
  transition: all 0.5s;
}

/* Gallery */
.gallery-double-row-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  max-height: 100%;
}

.gallery-row-section {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 50%;
}

.gallery-half-section-container {
  width: 50%;
  flex-wrap: wrap;
}

.gallery-quarter-section-container {
  width: 25%;
  flex-wrap: wrap;
}

.gallery-row-section img {
  width: 100%;
  height: 100%;
  transform: scale(1);
  transition: transform 0.25s ease-in-out;
}

.gallery-row-section img:hover {
  width: 100%;
  height: 100%;
  transform: scale(1.05);
  transition: transform 0.25s ease-in-out;
}

/* TODO: Rename - Really just fills half of half container */
.gallery-row-section .image-sm {
  vertical-align: middle;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

/* TODO: Rename - Really just fills a quarter/half container */
.gallery-row-section .image-lg {
  vertical-align: middle;
  min-width: 100%;
  height: 200%;
  overflow: hidden;
}

/* TODO: Rename - Really just fills double a container */
.gallery-row-section .image-portrait {
  vertical-align: middle;
  max-width: 200%;
  height: 200%;
  overflow: hidden;
}
.gallery-image {
  cursor: pointer;
}
.gallery image:nth-child(odd) {
  animation: zerotooneopacity 1s ease-in-out forwards;
}

/* Modal */
.modal-container {
  z-index: 500;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

.modal-container.show {
  z-index: 500;
  backdrop-filter: blur(2px);
  pointer-events: auto;
  opacity: 1;
}

.modal-inner-top-container {
  display: flex;
  position: relative;
  padding: 16px;
  width: 100%;
  max-height: 25%;
}

.modal-close-container {
  display: flex;
  justify-content: end;
}
.light .gallery-modal-text-container {
  h2, h4  {
    color: var(--dark-background-font-color);
  }
}
.modal-text-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.contrast .modal {
  border: 2px solid var(--color);
}
.modal {
  min-width: 50vh;
  max-width: 95%;
  min-height: 25vh;
  max-height: 85vh;
  overflow: hidden;
}

.gallery-modal-image-container {
  max-width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.gallery-modal-image {
  max-width: 100%;
}

.modal-background {
  opacity: 0.8;
  background-color: var(--background-color);
  padding: 16px;
  padding-bottom: 40px;
  border-radius: 16px;
}


/* Common styles */
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.bottom {
  position: absolute;
  bottom: 0;
}
.bottom-fixed {
  z-index: 1000;
  position: fixed;
  bottom: 0;
}
.width-full {
  width: 100vw;
}
.width-fill {
  width: 100%;
}
.align-left {
  display: flex;
  justify-content: left;
}
.align-center {
  display: flex;
  justify-content: center;
}
.align-right {
  display: flex;
  justify-content: right;
}
.grid {
  display: grid;
}
.vertical-space-1 {
  margin-top: 224px;
}
.vertical-space-2 {
  margin-top: 448px;
}
.rotate-180 {
  transform: rotate(180deg);
}
.pointer-event-auto {
  pointer-events: auto;
}

.light .gallery-modal-close:hover {
  color: var(--off-black);
  border: 1px solid var(--off-black);
  background: var(--background-color);
  transition: all 0.25s ease-in-out;
}
.light .gallery-modal-close {
  color: var(--off-white);
  transition: all 0.25s ease-in-out;
}
.modal-close:hover {
  color: var(--background-color);
  border: 1px solid var(--background-color);
  background: var(--color);
  transition: all 0.25s ease-in-out;
}
.modal-close:not(.gallery-modal-close) {
  transform: translate(25px, -25px);
}
.modal-close {
  cursor: pointer;
  align-items: right;
  align-self: right;
  border: 1px solid;
  position: fixed;
  border-radius: 100%;
  padding-top: 4px;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 4px;
  transition: all 0.25s ease-in-out;
}

.icon_nav {
  width: 28px;
  filter: brightness(0.1);
}
.dark .icon_nav {
  filter: brightness(100);
}
.contrast .icon_nav {
  filter: brightness(5);
}
.icon_nav:hover {
  cursor: pointer;
  filter: none;
}

/* TODO: Fix active not showing properly */
a:hover .nav-logo, a .active .nav-logo {
  filter: none;
}

.icon_social {
  width: 28px;
  filter: none;
  transition: filter 0.25s ease-in-out;
}

.github {
  transition: none;
  transition: filter 0.5s ease-in-out;
}
.dark .github, .contrast .github {
  filter: invert(100%);
  transition: filter 0.5s ease-in-out;
}

.icon_social:hover {
  filter: invert(50%);
}

button {
  background: none;
  color: inherit;
  border: none;
  font-size: var(--typography-fontSizeH6);
}

.accessibility-button:hover {
  color: var(--background-color);
  border: 1px solid var(--background-color);
  background: var(--color);
  transition: all 0.25s ease-in-out;
  .icon_nav {
    filter: brightness(100);
  }
}
.dark .accessibility-button:hover .icon_nav, .contrast .accessibility-button:hover .icon_nav {
  filter: brightness(0.1);
}
.accessibility-button {
  cursor: pointer;
  border: 1px solid;
  padding-top: 4px;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 4px;
  border-radius: 25px;
  align-items: center;
  background: none;
  color: inherit;
  font-size: var(--typography-fontSizeBody);
  transition: all 0.25s ease-in-out;
}

.modal img:not(.icon_nav) {
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0.32px 8px rgba(0, 0, 0, 0, 0.5);
  max-height: 75%;
}

/* Media sizes */
@media (max-width: 960px) {
  .text h1 {
    font-size: var(--typography-fontSizeH2);
  }
  .text h2 {
    font-size: var(--typography-fontSizeH4);
  }
  .gallery-half-section-container {
    width: 100%;
  }
  .gallery-quarter-section-container {
    width: 50%;
  }
}

@media (max-width: 640px) {
  .text h1 {
    font-size: var(--typography-fontSizeH3);
  }
  .text h2 {
    font-size: var(--typography-fontSizeBody);
  }
  .gallery-half-section-container {
    width: 200%;
  }
  .gallery-quarter-section-container {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .text h1 {
    font-size: var(--typography-fontSizeH3);
  }
  .text h2 {
    font-size: var(--typography-fontSizeBody);
  }
}

/* THREEJS */

/* background */

.arcade {
  width: 50vw;
  height: 50vw;
}
.row-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.column-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.canvas-description {
  text-align: center;
  padding: 16px;
}