body {
  background: black;
  border: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: Space Grotesk;
}

#stats {
  width: 200px;
  height: 70px;
  z-index: 1;
}

#three-canvas {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  cursor: grab;
}

.fullscreen-button {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  /* fill: white; */
  filter: invert(1);
  transition: 1.5s cubic-bezier(0.075, 0.82, 0.165, 1) ease-in-out;
  cursor:col-resize;
}

#fullscreen-on {}

#fullscreen-off {
  opacity: 0;
  pointer-events: none;
}


#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;

  width: 100%;
  height: 100%;

  pointer-events: none;

  background-color: #040404;
}

#loading-bar {
  position: fixed;
  width: 40%;
  height: 16px;
  background-color: transparent;
  border-radius: 8px;
  border: solid white 1px;

  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

#loading-bar-fill {
  background-color: white;
  width: 0%;
  height: 100%;
  /* transition: .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
}


.lds-ellipsis {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(24px, 0);
  }
}

.fadeout {
  animation: disappearance 2s;
  animation-fill-mode: forwards;
}

@keyframes disappearance {
  0% {
    opacity: 1;
    display: block;
  }

  90% {
    opacity: 0;
    display: block;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

#arrowkeys {
  position: absolute;
  /* bottom: 0%; */
  z-index: 10;
  /* height: 200px;
  width: 400px; */
  height: 10vh;
  top: 0px;
  transform: translate(0, -100%);

  transition: .8s cubic-bezier(0.19, 1, 0.22, 1);
}

#landing {
  position: fixed;
  z-index: 1;
  /* width: 100%;
  height: 100%; */

  /* padding: 10px 20px 10px 20px; */
  box-sizing: border-box;

  color: white;
  /* animation-duration: 1s;
  animation-fill-mode: forwards;
  transition: .8s; */
}

@keyframes fade-out-landing {
  0% {
    display: block;
    opacity: 1;
  }

  90% {
    display: block;
    opacity: 0;
    height: 0;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

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

.landing-bar {
  background-color: #040404;
  position: fixed;
  height: 10%;
  width: 100%;
  user-select: none;
  display: flex;
  align-items: center;
  transition: .8s cubic-bezier(0.19, 1, 0.22, 1);
}

#landing-top {
  top: 0px;
}

#landing-bot {
  bottom: 0px;
  height: max-content;
}

.landing-bar * {
  /* display: inline-block; */
  vertical-align: middle;
  margin: 0px 10px 0px 10px;
  padding: 10px;
  height: auto;
  /* height:100%; */
  /* line-height: 100%; */
  text-decoration: none;
  color: white;
  /* transform:translate(0, 50%); */
}

.landing-bar a:hover {
  border-radius: 10px;
  background-color: #0a0a0a;
}

#landing-play {
  opacity: 0;
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px 0px 37px 74px;
  border-color: transparent transparent transparent white;
  box-sizing: border-box;

  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1001;
  transform: translate(-50%, -50%);
  transition: ease-in-out .1s;
  animation: play-pulse 1s alternate-reverse infinite;
}

#landing-play:hover {
  cursor: pointer;
}

#landing-play:active {
  cursor: default;
  border-color: transparent transparent transparent #dddddd;
}

@keyframes play-pulse {
  0% {
    filter: drop-shadow(0 0 2px white);
  }

  100% {
    filter: drop-shadow(0 0 5px white);
  }
}

@font-face {
  font-family: Space Grotesk;
  src: url(./data/fonts/SpaceGrotesk-VariableFont_wght.ttf);
}