@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;900&display=swap');

html {
  font-family: 'lexend deca';
}

* {
  --z: calc(var(--z-int) * 1px);

  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

*:not(body) {
  transform-style: preserve-3d;
}

:root {
/* COMMON VALUES */
  --theme-transition-length: 3s;
}

body {
  background-color: black;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.scene-manager {
  --z-int: 0;
  --z: calc(var(--z-int) * 1px);

  /* CAMERA */
  --primary-perspective-int: 4;
  --new-perspective-int: 1;

  --perspective-int: var(--new-perspective-int);
  --page-depth-int: 22;
  --page-depth: calc(var(--page-depth-int) * 1px);
  
  /* THEME */
  /* Light Theme */
  --light-bg: #C0D0F0;
  --old-light-bg: #97BEEB;
  --light-bg: hsl(220, 60%, 80%);
  --light-cloud: white;
  --light-content-bg: hsl(10, 100%, 98%);
  --light-lighting: 
  linear-gradient(
    hsla(10, 100%, 60%, 0.1),
    transparent
  );
  --light-hover-transparency: 0%;
  --light-text: #2D2D2D;

  
  /* Dark Theme */
  --dark-bg: #100017;
  --dark-cloud: #332343;
  /* --dark-content-bg: #07000C; */
  --dark-content-bg: #070010;
  --dark-lighting: 
  linear-gradient(
    hsla(350, 60%, 60%, 0.1),
    transparent
  );
  --dark-hover-transparency: 30%;
  --dark-text: #B2B2B2;
  
  /* Useable Variables */
  /* --theme-transition-timing-function: cubic-bezier(0.7, -0.2, 0.7, 0.9); */
  --theme-transition-timing-function: ease-in-out;
  
  --bg: var(--light-bg);
  --cloud-tint: var(--light-cloud);
  --content-bg: var(--light-content-bg);
  --lighting: var(--light-lighting);
  --hover-transparency: var(--light-hover-transparency);
  --text-color: var(--light-text);

  transition: 
  all 
    var(--theme-transition-length) 
    var(--theme-transition-timing-function),
  height 
    0s,
  width 
    0s,
  padding 
    0s,
  transform 
    0s
  ;
}

.theme-button.interactable:checked ~ .main,
.theme-button.interactable:checked ~ .skybox,
.theme-button.interactable:checked ~ .backing-container {
  --bg: var(--dark-bg);
  --cloud-tint: var(--dark-cloud);
  --content-bg: var(--dark-content-bg);
  --lighting: var(--dark-lighting);
  --hover-transparency: var(--dark-hover-transparency);
  --text-color: var(--dark-text);

  transition: 
  all 
    var(--theme-transition-length) 
    var(--theme-transition-timing-function),
  height 
    0s,
  width 
    0s,
  padding 
    0s,
  transform 
    0s
  ;
}

/* .on-page-load:checked ~ .scene-manager .parallax {
  overflow-y: hidden !important;
} */

.parallax {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: scroll;
  /* -webkit-overflow-scrolling: touch; */
  perspective: calc(var(--perspective-int) * 1px);
  
  scroll-behavior: smooth;

  /* background-color: var(--bg);

  transition: background-color var(--theme-transition-length) var(--theme-transition-timing-function); */
}

/* ------------------ */
/* SUN/MOON */

.celestial-container {
  /* Celestial variables */
  /* Sun */
  --sun-diameter-min: 20px;
  --sun-diameter-variable: 13;
  --sun-diameter: clamp(var(--sun-diameter-min), calc(var(--sun-diameter-variable) * 1%), var(--sun-diameter-max));
  --sun-diameter-max: 70px;
  --sun-glow: 0.075;
  /* Multiplies --sun-diameter celestial-width*/

  /* Moon */
  --moon-multiplier: 0.55;
  --night-diameter: calc(var(--sun-diameter) * var(--moon-multiplier));
  --moon-glow: 0.35;

  /* local variables */
  --day-width: calc(clamp(var(--sun-diameter-min), calc(var(--sun-diameter-variable) * 0.5vw), var(--sun-diameter-max)) * 2);
  --night-width: calc(var(--day-width) * var(--moon-multiplier));

  --z-int: calc(-1 * var(--page-depth-int));
  --resize-to-zOrigin: calc(calc(-1 * var(--z-int) + var(--perspective-int)) / var(--perspective-int));
  /* --cy: max(100px, 12vmin);
  --cx-right: max(100px, 12vw);
  --cx: calc(100vw - var(--cx-right)); */
  /* --z-int: calc(-1 * var(--page-depth-int)); */

  position: absolute;
  top: 50vh;
  left: 50vw;
  transform-origin: 0% calc(200vw * var(--resize-to-zOrigin) - 50vw);
  transform: translate3d(-50vw, -50vw, 0px);
  height: var(--sun-diameter);
  width: var(--sun-diameter);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;

  overflow: visible;
  animation: 
  theme-switch-move-night
    var(--theme-transition-length)
    ease-in-out
    1,
  primary-position
    calc(var(--theme-transition-length) / 2)
    linear
    1
  ;

  z-index: 0;

  /* background-color: #ff000030; */
}

.theme-button {
  --tab-color: black;
  --resting-height: 20px;
  --height-on-hover: 50px;
  --icon-rotation: 270deg;

  --transition-distance: calc(var(--height-on-hover) - var(--resting-height));
  /* --transition-distance: 0px; */

  --resize-to-zOrigin: calc(calc(-1 * var(--z-int) + var(--perspective-int)) / var(--perspective-int));
  /* --cx: max(100px, min(20vh, 12vw)); */
  --cx: 50%;
  --cy: 50vh;
  --z-int: calc(-1 * var(--page-depth-int));

  grid-row: 1 / 2;
  grid-column: 1 / 2;
  position: absolute;

  /* top: calc(-1 * var(--transition-distance));
  right: var(--cx); */
  top: var(--cy);
  left: var(--cx);

  /* top: 50%;
  left: 50%; */

  transform-origin: 50% 50%;
  translate: -50% -50% var(--z);
  /* translate: -50% -50%; */

  /* height: var(--height-on-hover);
  width: 50px; */
  aspect-ratio: 1/1;
  height: calc(11vw * var(--resize-to-zOrigin));
}

.theme-button.interactable:checked ~ .theme-button,
.theme-button.interactable:checked,
.theme-button.interactable:checked ~ .skybox .theme-icon-container {
  height: calc(7.75vw * var(--resize-to-zOrigin));
}

.theme-icon-container {
  height: calc(11vw * var(--resize-to-zOrigin));
  scale: 0.9;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 200ms, scale 200ms, height 0s linear 200ms, background-color 0s linear 200ms;

  display: flex;
  justify-content: center;
  align-items: center;
  
  background-color: #00000040;
}

.theme-button.interactable:checked ~ .skybox .theme-icon-container {
  background-color: #00000070;
}

.theme-button.interactable {
  opacity: 0 !important;
  cursor: pointer;
}

/* .theme-button:hover, */
.theme-button.interactable:hover ~ .skybox .theme-icon-container {
  opacity: 1;
  scale: 1;
  transition: opacity 500ms, scale 500ms, height 0s linear 200ms, background-color 0s linear 200ms;
}

.theme-icon {
  --arrow-size: calc(3vw * var(--resize-to-zOrigin));
  --arrow-spacing: calc(-0.5vw * var(--resize-to-zOrigin));
  --sun-icon-diameter: calc(2vw * var(--resize-to-zOrigin));
  --moon-icon-diameter: calc(1.4vw * var(--resize-to-zOrigin));
  --celestial-spacing: calc(3.75vw * var(--resize-to-zOrigin));
  
  position: relative;
  border-radius: 0%;
  display: block;
  scale: 1;
  
  height: 1%;
  aspect-ratio: 1/1;
  
  transform-origin: 50% 50%;
  rotate: var(--icon-rotation);
  /* display: none; */
  animation: rotate 5s linear infinite;
  transition: scale 0s linear 200ms;
  
  /* background-color: #FF000070; */
}

.theme-button.interactable:checked ~ .skybox .theme-icon-container .theme-icon {
  scale: 0.7;
}

.theme-button.interactable:hover ~ .skybox .theme-icon-container .theme-icon {
  /* rotate: 90deg;
  animation: rotate 500ms ease-out 1; */
  /* animation: rotate 5s linear infinite; */
}

@keyframes rotate {
  from {
    rotate: var(--icon-rotation);
  }
  
  to {
    rotate: calc(var(--icon-rotation) - 360deg);
  }
}

.icon {
  position: absolute;
}

.icon.fa {
  /* display: none; */
  height: var(--arrow-size);
  aspect-ratio: 2/1;
  font-size: calc(var(--arrow-size) * 2);
  overflow: hidden;
  scale: -1.2 1;

  left: 50%;
  top: 50%;

  color: white;
  /* transition: opacity 500ms; */

  /* background-color: red; */
}

.theme-button.interactable:hover ~ .theme-button .icon.fa {
  /* opacity: 1; */
}

.icon.fa:first-of-type {
  /* translate: calc(0% + calc(-2 * calc(var(--arrow-size) - 8px * var(--resize-to-zOrigin)) / 2)) 
  calc(-50% + calc(-1 * var(--arrow-spacing) - var(--arrow-size) + 8px * var(--resize-to-zOrigin))); */
  translate: -50% calc(-50% + calc(-1 * var(--arrow-spacing) - var(--arrow-size) + 0vw * var(--resize-to-zOrigin)));
}

.icon.fa:last-of-type {
  rotate: 180deg;
  translate: -50% calc(-50% + calc(var(--arrow-spacing) + var(--arrow-size) + 0vw * var(--resize-to-zOrigin)));
  /* margin-top: var(--arrow-size); */
}

.icon.sun,
.icon.moon {
  border-radius: 50%;
  top: 50%;
  z-index: 1;
  aspect-ratio: 1/1;
}

.icon.sun {
  height: var(--sun-icon-diameter);
  background-color: yellow;
  left: calc(50% + var(--celestial-spacing));
  translate: -50% -50%;
}

.icon.moon {
  height: var(--moon-icon-diameter);
  background-color: white;
  right: calc(50% + var(--celestial-spacing));
  translate: 50% -50%;
}

.celestial {
  /* See .theme-button for more variables */
  --resize-to-zOrigin: calc(calc(-1 * var(--z-int) + var(--perspective-int)) / var(--perspective-int));
  --sun-base-color: #FFFAF5;
  --sun: 
    radial-gradient(
      closest-side, 
      var(--sun-base-color) 0px var(--sun-diameter),
      #FFFAF57F calc(var(--sun-diameter) * var(--sun-glow) + var(--sun-diameter)),
      transparent
    );
  --moon-base-color: white;
  --moon: 
  radial-gradient(
    50% 50%, 
    var(--moon-base-color) 0px var(--night-diameter),
    #FFFFFF20 calc(var(--night-diameter) * var(--moon-glow) + var(--night-diameter)),
    transparent
  );
  --celestial-width: 100vw;
  --z-int: calc(-1 * var(--page-depth-int));
  
  background-color: var(--sun-base-color);
  width: var(--celestial-width);
  aspect-ratio: 1 / 1;
  background: var(--sun);
  transform: translateZ(var(--z)) scale(var(--resize-to-zOrigin));
  animation: 
  theme-switch-night
    var(--theme-transition-length)
    linear
    1
    backwards
    reverse
  ;
  transition: scale 200ms;

  /* display: none; */
}

/* V Checkbox-focused pseudo-classes and animations V */

.on-page-load {
  z-index: -2;
}

.on-page-load:checked {
  z-index: 8;
}

.switch {
  z-index: 7;
  animation: 
  hide-switch-day
  var(--theme-transition-length)
  linear
  1;
}

.switch:checked {
  /* width: var(--night-width); */
  animation: 
  hide-switch-night
  var(--theme-transition-length)
  linear
  1;
}

@keyframes hide-switch-day {
  from, to {
    z-index: -2;
  }
}

@keyframes hide-switch-night {
  from, to {
    z-index: -2;
  }
}

/* V Celestial-focused pseudo-classes and animations V */

.switch:checked ~ .skybox .celestial-container,
.switch:checked ~ .skybox .test-1 {
  /* animation: 
  theme-switch-move-day
  var(--theme-transition-length)
  ease-in-out
  1
  ; */
}

.theme-button.interactable:hover ~ .skybox .celestial,
.theme-button.interactable:hover ~ .skybox .test-1 {
  scale: 1.1;
  transition: scale 500ms;
}

.theme-button.interactable:checked ~ .skybox .celestial-container .celestial,
.theme-button.interactable:checked ~ .skybox .test-2 {
  background-color: var(--moon-base-color);
  background: var(--moon);
  animation: 
  theme-switch-day
    var(--theme-transition-length)
    linear
    1
    forwards
    normal,
  theme-switch-move-day
    var(--theme-transition-length)
    ease-in-out
    1;
}

.on-page-load:checked ~ .switch,
.on-page-load:checked ~ .skybox .celestial-container,
.on-page-load:checked ~ .skybox .celestial,
.on-page-load:checked ~ .skybox .test-1,
.on-page-load:checked ~ .skybox .test-2,
.on-page-load:checked ~ .skybox #celestial-gradient stop {
  animation: none !important;
}



/* @keyframes primary-position {
  from, to {
    top: 50%;
    left: 50vw;
    transform-origin: 0% calc(200% - 50%);
  }
} */

@keyframes theme-switch-move-day {
  from {
    animation-timing-function: 
    cubic-bezier(1,0,1,1);
  }

  45%, 49% {
    rotate: -30deg;
  }

  51%, 55% {
    rotate: 30deg;
    animation-timing-function: 
    cubic-bezier(0,0,0,1);
  }
}

@keyframes theme-switch-move-night {
  from {
    animation-timing-function: 
    cubic-bezier(1,0,1,1);
  }

  45%, 49% {
    rotate: -30deg;
  }

  51%, 55% {
    rotate: 30deg;
    animation-timing-function: 
    cubic-bezier(0,0,0,1);
  }
}

@keyframes theme-switch-day {
  from, to {
    opacity: 1;
  }

  0% {
    stop-opacity: var(--moon-opacity);
  }
  
  45% {
    opacity: 1;
  }

  49% {
    opacity: 0;
    stop-opacity: var(--moon-opacity);
  }

  51% {
    opacity: 0;
    stop-opacity: var(--sun-opacity);
  }

  55% {
    opacity: 1;
  }

  100% {
    stop-opacity: var(--sun-opacity);
  }
}

@keyframes theme-switch-night {
  from, to {
    opacity: 1;
  }

  0% {
    stop-opacity: var(--sun-opacity);
  }
  
  45% {
    opacity: 1;
  }

  49% {
    opacity: 0;
    stop-opacity: var(--sun-opacity);
  }

  51% {
    opacity: 0;
    stop-opacity: var(--moon-opacity);
  }

  55% {
    opacity: 1;
  }

  100% {
    stop-opacity: var(--moon-opacity);
  }
}

/* SUN/MOON */
/* -------- */



/* ------ */
/* SKYBOX */

.stack-container {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-rows: max-content;
  grid-template-columns: 100%;
  justify-items: center;
  align-items: top;
  margin: auto;



  /* background-color: #0000FF; */

}

.backing-container {
  --z-int: calc(-1 * var(--page-depth-int));

  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50% calc(-1 * var(--page-depth));
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;

  /* background-color: green; */
}

.backing {
  --z-int: calc(-1 * var(--page-depth-int));
  --resize-to-zOrigin: calc(calc(-1 * var(--z-int) + var(--perspective-int)) / var(--perspective-int));

  x: calc(50% - 50% * var(--resize-to-zOrigin));
  y: calc(50% - 50% * var(--resize-to-zOrigin));
  width: calc(100vw * var(--resize-to-zOrigin));
  height: calc(100% * var(--resize-to-zOrigin));
  fill: var(--bg);
  transition: fill var(--theme-transition-length) var(--theme-transition-timing-function);
}

.skybox {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  height: 100%;
  width: 100%;
  pointer-events: none;

  z-index: -1;

  /* background-color: var(--bg);

  transition: background-color var(--theme-transition-length) var(--theme-transition-timing-function); */
}

/* To place the cloud */
.clouds {
  --resize-to-zOrigin: calc(calc(-1 * var(--z-int) + var(--perspective-int)) / var(--perspective-int));
  --cloud-animation-length: 3s;
  --distance-from-zOrigin: 
  calc(var(--percentage-distance-from-zOrigin) 
  * var(--page-depth));
  --z-int: 
  calc(-1 * calc(var(--percentage-distance-from-zOrigin) 
  * var(--page-depth-int)));
  --perspective-x-offset: calc(var(--backing-x-padding) * var(--resize-to-zOrigin));
  /* --perspective-x-offset: calc(var(--cloud-width) * var(--resize-to-zOrigin)); */
  --cloud-width: 71.1vw;
  --cloud-respawn-buffer: 20vw;

  position: absolute;
  left: calc(calc(calc(100% * var(--resize-to-zOrigin) - 100%) / 2) + 100% + var(--cloud-respawn-buffer));
  top: var(--y);
  height: 100px;
  width: var(--cloud-width);
  transform: 
  translateZ(calc(-1 * var(--distance-from-zOrigin)));
  overflow: visible;
  animation: clouds
  var(--cloud-animation-length)
  calc(-1 * var(--anim-jump-start) * var(--cloud-animation-length))
  linear
  infinite;

  /* background-color: green; */
}



@keyframes clouds {
  to {
    left: calc(-1 * calc(calc(calc(100% * var(--resize-to-zOrigin) - 100%) / 2) + var(--cloud-width) + var(--cloud-respawn-buffer)));
  }
}



.cloud-1 {
  --cloud-width: 0px;
  top: -1000vh;
  left: -1000vw;

  animation: none;
}

.cloud-2 {
  --y: 25%;
  --percentage-distance-from-zOrigin: 1;
  --anim-jump-start: 0.65;
  --cloud-animation-length: 26s;
  
  /* max-width: 22.5vmin; */
}

.cloud-3 {
  --y: 25%;
  --percentage-distance-from-zOrigin: 0.2;
  --anim-jump-start: 0.2;
  --cloud-animation-length: 20s;

  /* max-width: 52.5vmin; */
}

.cloud-4 {
  --y: 25%;
  --percentage-distance-from-zOrigin: 0.35;
  --anim-jump-start: 0.5;
  --cloud-animation-length: 22s;

  /* max-width: 45vmin; */
}

.cloud-5 {
  --y: 25%;
  --percentage-distance-from-zOrigin: 0.75;
  --anim-jump-start: 0.1;
  --cloud-animation-length: 26s;

  /* max-width: 37.5vmin; */
}

.cloud-6 {
  --y: 25%;
  --percentage-distance-from-zOrigin: 0.1;
  --anim-jump-start: 0.3;
  --cloud-animation-length: 13s;

  /* max-width: 120vmin; */
}

.cloud-7 {
  --y: 25%;
  --percentage-distance-from-zOrigin: 0.06;
  --anim-jump-start: 0.8;
  --cloud-animation-length: 14s;

  /* max-width: 135vmin; */
}

/* To build the clouds */
.cloud-piece:nth-of-type(1) {
  cx: 45%;
  cy: 10%;
  r: 10%;
}

.cloud-piece:nth-of-type(2) {
  cx: 53%;
  cy: 17%;
  r: 10%;
}

.cloud-piece:nth-of-type(3) {
  cx: 65%;
  cy: 21%;
  r: 10%;
}

.cloud-piece:nth-of-type(4) {
  cx: 76%;
  cy: 23%;
  r: 10%;
}

.cloud-piece:nth-of-type(5) {
  cx: 33%;
  cy: 14%;
  r: 10%;
}

.cloud-piece:nth-of-type(6) {
  cx: 24%;
  cy: 18%;
  r: 10%;
}

.cloud-piece:nth-of-type(7) {
  cx: 17.5%;
  cy: 23%;
  r: 10%;
}

.cloud-piece.rect {
  width: 58.5%;
  height: 15%;
  x: 17.5%;
  y: 18%
}

.clouds > defs > mask {
  height: 100%;
}

.clouds > rect {
  width: 100%;
  height: 33%;
}

#cloud-gradient stop {
  stop-color: var(--cloud-tint);
  transition: 
  all
  var(--theme-transition-length)
  var(--theme-transition-timing-function);
}

/* THEME MANAGER AND SKYBOX */
/* ------------------------ */



/* ------- */
/* MAIN UI */

.main {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  width: 100%;
  display: grid;
  justify-content: center;
  align-items: top;
  grid-template-columns: 1fr 40% 1fr;
  pointer-events: none;

  z-index: 1;

  /* background-color: #00FF0077; */
}

.windows {
  --pane-height: 9vw;
  --pane-width: 24.5%;
  --pane-outline-width: 0.25vw;

  width: 100%;
  height: 100%;
  z-index: 1000;
  border: 7px solid #101010;
  border-bottom: none;
  background: repeating-linear-gradient(
    transparent 0% var(--pane-height),
    black var(--pane-height) calc(var(--pane-height) + var(--pane-outline-width)),
    transparent calc(var(--pane-height) + var(--pane-outline-width))
  ),
  repeating-linear-gradient(
    90deg,
    transparent 0% var(--pane-width),
    black var(--pane-width) calc(var(--pane-width) + var(--pane-outline-width)),
    transparent calc(var(--pane-width) + var(--pane-outline-width))
  )
  ;
  overflow: hidden;
  
  backdrop-filter: blur(2px);
}

.panes {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF10;
  background: 
  repeating-conic-gradient(
    from 0deg, 
    transparent 0% 25%, 
    #E0FFE010 0% 50%
  )
  ;
  background-size: 16px 16px;
  filter: blur(5px);
}

.content {
  /* height: 2000px; */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: top;
  pointer-events: none;
}

.opening {
  height: 50vh;
  width: 100%;
  pointer-events: none;
}

.hero {
  height: 50vh;
  width: 100%;

  /* background-color: #FF000070; */
}

.lighting {
  position: absolute;
  left: 0px;
  height: 10vw;
  width: 100%;
  background: var(--lighting);
  transform-origin: 50% 0%;
  scale: 1 var(--direction);

  animation: 
  lighting-transition-to-light
  var(--theme-transition-length)
  var(--theme-transition-timing-function)
  1
  ;
}

.theme-button.interactable:checked ~ .main .lighting {
  background: var(--dark-lighting);

  animation: 
  lighting-transition-to-dark
  var(--theme-transition-length)
  var(--theme-transition-timing-function)
  1
  ;
}

.on-page-load:checked ~ .main .lighting {
  animation: none !important;
}

.lighting.up {
  --direction: -1;

  bottom: 0px;
  translate: 0% 100%;
}

.lighting.down {
  --direction: 1;

  top: 0px;
}

@keyframes lighting-transition-to-light {
  from {
    background: var(--dark-lighting);
    scale: 1 var(--direction)
  }
  
  25% {
    transition-timing-function: ease-out;
  }

  50% {
    scale: 1 0;
    /* opacity: 0; */
    transition-timing-function: ease-in;
  }

  100% {
    scale: 1 var(--direction);
    opacity: 1;
  }
}

@keyframes lighting-transition-to-dark {
  from {
    background: var(--light-lighting);
    scale: 1 var(--direction)
  }
  
  25% {
    transition-timing-function: ease-out;
  }

  50% {
    scale: 1 0;
    opacity: 0;
    transition-timing-function: ease-in;
  }

  100% {
    scale: 1 var(--direction);
    opacity: 1;
  }
}

.wall {
  margin: 25vh 0;
  width: 100%;
  padding: 1vw;
  background-color: var(--content-bg);
  display: flex;
  flex-direction: column;
  pointer-events: all;

  transition: background-color var(--theme-transition-length) var(--theme-transition-timing-function);
}

.wall.heading {
  margin-top: 0;
  height: 25vh;
  padding-top: 0.5vw;
  justify-content: center;
}

h1,
h2,
p,
a {
  color: var(--text-color);
  transition: color var(--theme-transition-length) var(--theme-transition-timing-function)
}

h1 {
  font-weight: 200;
  font-size: 1.75vw;
  /* background-color: red; */
}

.heading h1 {
  text-align: right;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

h1 i {
  font-weight: 100;
  font-size: 1.3em;
  position: relative;
  /* transition: color 300ms, background-color 300ms; */
}

i {
  font-style: normal;
}

.whisper {
  font-size: 0.75vw;
  text-align: right;
}

.myname {
  transition: filter 1500ms ease-out;
}

.theme-button.interactable:checked ~ .main .myname {
  filter: brightness(2);
  transition: filter 1500ms ease-out calc(var(--theme-transition-length) - 1500ms);
}

.myname:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: var(--text-color);
  filter: invert(1) contrast(3);
  z-index: -1;
  opacity: 0;
  transition: 
  background-color
    var(--theme-transition-length)
    var(--theme-transition-timing-function),
  opacity
    300ms
    ease-out;
}

.wall.heading:hover .myname:before {
  opacity: 1;
}

.wall.projects {
  position: relative;
  height: 30vw;
}

.wall.transparent {
  background-color: transparent;
  backdrop-filter: blur(10px);
}

.custom-backing {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.custom-backing-color {
  fill: var(--content-bg);
  transition: fill var(--theme-transition-length) var(--theme-transition-timing-function);
}

.cut-outs rect:first-child {
  fill: hsl(0deg, 0%, var(--hover-transparency));
  transition: fill 1s ease-in-out;
}

.wall.transparent:hover rect:first-child {
  fill: white;
}

.wall.projects h1 {
  display: block;
  width: max-content;
  text-indent: 0;
  margin-left: 2ch;
  overflow: hidden;
}

.wall.projects h1::after {
  content: "";
  position: relative;
  right: 100%;
  bottom: 0;
  display: block;
  width: 100%;
  height: 0.1em;
  background-color: var(--text-color);

  transition: 1s cubic-bezier(0.5, 0, 0.25, 1);
}

.wall.projects:hover h1::after {
  right: 0%;
}

.item-container,
.item {
  /* Pseudo Flex System */
  --pseudo-flex-pos: 
  calc(calc(calc(100% - var(--padding-flex-start)) 
  / calc(var(--pseudo-flex-num-obj) + 1) * var(--pseudo-flex-obj-order)) 
  - calc(var(--axis) / 2) + var(--padding-flex-start));
  /* Axis: for vertical (column) orientations, use var(--height),
  for horizontal (row) orientations, use var(--width) */
}

.wall.projects .item-container,
.wall.projects .item {
  --pseudo-flex-num-obj: 3;
  --padding-flex-start: 14%;
  --top: var(--pseudo-flex-pos);
  --left: calc(50% - var(--width) / 2);
  --width-int: 60;
  --width: calc(var(--width-int) * 1%);
  --height: 12%;
  --axis: var(--height);
  --rx: 5%;
  --ry: 50%;
}

.item-container {
  position: absolute;
  top: var(--top);
  left: var(--left);
  y: var(--top);
  x: var(--left);
  height: var(--height);
  width: var(--width);
  border-radius: calc(var(--rx) * calc(100 / var(--width-int))) / var(--ry);
  
  rx: var(--rx);
  ry: var(--ry);
  r: var(--r);
}

.item {
  border-radius: calc(var(--rx) * calc(100 / var(--width-int))) / var(--ry);
}

.item-1 {
  --pseudo-flex-obj-order: 1;
}

.item-2 {
  --pseudo-flex-obj-order: 2;
}

.item-3 {
  --pseudo-flex-obj-order: 3;
}

a.item {
  display: grid;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  font-size: 1vw;
  text-decoration: none;
  font-weight: 300;
  text-align: center;
}

div.item-container {
  z-index: 1;
  /* overflow: hidden; */
  background-color: transparent;
  
  /* backdrop-filter: blur(10px); */
  transition: background-color 500ms ease-out,
  backdrop-filter 0s ease-out 500ms;
}

.theme-button.interactable:checked ~ .main div.item-container:hover {
  backdrop-filter: blur(10px);
  transition: background-color 500ms ease-out;
}

.theme-button.interactable:checked ~ .main div.item-container:hover .item {
  filter: 
  saturate(10) 
  drop-shadow(1px 0 0 hsl(350deg, 100%, 8%)) 
  drop-shadow(-1px 0 0 hsl(350deg, 100%, 8%)) 
  drop-shadow(0 1px 0 hsl(350deg, 100%, 8%));
}

.cut-out {
  fill: white;
  transition: fill 500ms ease-out;
}

div.item-1:hover ~ .custom-backing .item-1 {
  fill: hsl(0deg, 0%, var(--hover-transparency));
}

div.item-2:hover ~ .custom-backing .item-2 {
  fill: hsl(0deg, 0%, var(--hover-transparency));
}

div.item-3:hover ~ .custom-backing .item-3 {
  fill: hsl(0deg, 0%, var(--hover-transparency));
}

div.item-5:hover ~ .custom-backing .item-5 {
  fill: hsl(0deg, 0%, var(--hover-transparency));
}

/* MAIN UI */
/* ------- */


.test-1 {
  /* Celestial variables */
  /* Sun */
  --sun-base-color: #FFFAF5;
  --sun-diameter-min: 20px;
  --sun-diameter-variable: 13;
  --sun-diameter: clamp(var(--sun-diameter-min), calc(var(--sun-diameter-variable) * 1%), var(--sun-diameter-max));
  --sun-diameter-max: 70px;
  --sun-glow: 0.075;
  /* Multiplies --sun-diameter celestial-width*/

  /* Moon */
  --moon-base-color: white;
  --moon-multiplier: 0.55;
  --night-diameter: calc(var(--sun-diameter) * var(--moon-multiplier));
  --moon-glow: 0.35;

  /* local variables */
  --day-width: calc(clamp(var(--sun-diameter-min), calc(var(--sun-diameter-variable) * 0.5vw), var(--sun-diameter-max)) * 2);
  --night-width: calc(var(--day-width) * var(--moon-multiplier));

  --z-int: calc(-1 * var(--page-depth-int));
  --resize-to-zOrigin: calc(calc(-1 * var(--z-int) + var(--perspective-int)) / var(--perspective-int));
  /* --cy: max(100px, 12vmin);
  --cx-right: max(100px, 12vw);
  --cx: calc(100vw - var(--cx-right)); */
  /* --z-int: calc(-1 * var(--page-depth-int)); */

  position: absolute;
  top: 50vh;
  left: 50%;
  
  transform: translate3d(-50%, -50%, -22px);
  height: 2px;
  aspect-ratio: 1/1;

  overflow: visible;
  transition: scale 200ms;

  z-index: 0;

  background-color: #ff0000f0;
}

.test-2 {
  /* See .theme-button for more variables */
  --resize-to-zOrigin: calc(calc(-1 * var(--z-int) + var(--perspective-int)) / var(--perspective-int));
  --sun: 
    radial-gradient(
      closest-side, 
      var(--sun-base-color) 0px var(--sun-diameter),
      #FFFAF57F calc(var(--sun-diameter) * var(--sun-glow) + var(--sun-diameter)),
      transparent
    );
  --moon: 
  radial-gradient(
    50% 50%, 
    var(--moon-base-color) 0px var(--night-diameter),
    #FFFFFF20 calc(var(--night-diameter) * var(--moon-glow) + var(--night-diameter)),
    transparent
  );
  --celestial-width: 100vw;
  --z-int: calc(-1 * var(--page-depth-int));
  
  r: calc(50vw * var(--resize-to-zOrigin));
  cx: 50%;
  cy: 50%;
  /* background: var(--sun); */
  /* fill: green; */
  
  transform-origin: 50% calc(200vw * var(--resize-to-zOrigin));
  /* transform: scale(var(--resize-to-zOrigin)); */
  animation: 
  theme-switch-night
    var(--theme-transition-length)
    linear
    1
    backwards
    reverse,
  theme-switch-move-night
    var(--theme-transition-length)
    ease-in-out
    1
  ;

  /* display: none; */
}

#celestial-gradient stop {
  stop-color: var(--sun-base-color);
}

.moon-glow-radius {
  --moon-opacity: 12.5%;
  --sun-opacity: 100%;
  stop-opacity: var(--sun-opacity);
  animation: theme-switch-day var(--theme-transition-length) var(--theme-transition-timing-function) 1 forwards;
}

.sun-radius {
  --moon-opacity: calc(0.84 / 0.88 * 12.5%);
  --sun-opacity: 100%;
  stop-opacity: var(--sun-opacity);
  animation: theme-switch-day var(--theme-transition-length) var(--theme-transition-timing-function) 1 forwards;
}

.sun-glow-radius {
  --moon-opacity: calc(0.83 / 0.88 * 12.5%);
  --sun-opacity: 50%;
  stop-opacity: var(--sun-opacity);
  animation: theme-switch-day var(--theme-transition-length) var(--theme-transition-timing-function) 1 forwards;
}

.theme-button.interactable:checked ~ .skybox #celestial-gradient stop {
  stop-color: var(--moon-base-color);
}

.theme-button.interactable:checked ~ .skybox .moon-glow-radius {
  stop-opacity: var(--moon-opacity);
  animation: theme-switch-night var(--theme-transition-length) var(--theme-transition-timing-function) 1 forwards;
}

.theme-button.interactable:checked ~ .skybox .sun-radius {
  stop-opacity: var(--moon-opacity);
  animation: theme-switch-night var(--theme-transition-length) var(--theme-transition-timing-function) 1 forwards;
}

.theme-button.interactable:checked ~ .skybox .sun-glow-radius {
  stop-opacity: var(--moon-opacity);
  animation: theme-switch-night var(--theme-transition-length) var(--theme-transition-timing-function) 1 forwards;
}

.wall.about {
  /* height: 32vw; */
  padding-top: 1vw;
  padding-bottom: 3vw;
}

.about h1 {
  font-size: 2.2vw;
  text-indent: 0;
  padding: 0 1ch;
}

.about p {
  font-size: 1.2vw;
  line-height: 2vw;
  margin-top: 1em;
  text-indent: 2em;
  font-weight: 300 !important;
}

.wall.contact {
  margin-bottom: 0;
  height: 35vh;
}

.wall.contact h1 {
  text-align: center;

  /* transition: filter 500ms ease-out; */
  transition: filter 1s;
}

.wall.contact:hover h1 {
  filter: brightness(2);

}

.wall.contact .item-container,
.wall.contact .item {
  --pseudo-flex-num-obj: 6;
  --padding-flex-start: 0%;
  --top: calc(50% - var(--height) / 2);
  --left: var(--pseudo-flex-pos);
  --height: 20%;
  --width-int: 38;
  --width: calc(var(--width-int) * 1%);
  --axis: var(--width);
  --rx: 5%;
  --ry: 50%;
}

.item-5 {
  --pseudo-flex-obj-order: 5;
}

.wall.contact a.item {
  padding: 0 3vw;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 100% 100%;
  transition: background-color 500ms ease-out 0s, 
  backdrop-filter 0s ease-out 500ms,
  grid-template-columns 750ms ease-in-out;
  /* background-color: #00ff0030; */
}

.wall.contact .item i {
  z-index: 1;
  /* grid-row: 1/2;
  grid-column: 1/2; */
  justify-self: center;
  position: relative;
  display: block;
  left: 50%;
  font-size: 2vw;
  width: 2vw;
  /* background-color: blue; */
  transition: left 750ms ease-in-out;
}

.wall.contact a.item .social {
  /* grid-row: 1/2;
  grid-column: 1/2; */
  position: relative;
  right: 50%;
  font-size: 1.4vw;
  line-height: 2vw;
  opacity: 0;
  transition: opacity 500ms ease-in-out 0ms,
  right 750ms ease-in-out;
  /* background-color: red; */
}

.wall.contact div.item-container:hover .item {
  grid-template-columns: 30% 70%;
  /* padding-left: 5vw; */
}

.wall.contact div.item-container:hover .item i {
  left: 0;
}

.wall.contact div.item-container:hover .item .social {
  right: 0;
  opacity: 1;
  transition: opacity 500ms ease-in-out 250ms,
  right 750ms ease-in-out;
}