body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #000335;
  color: steelblue;
  font-family: "Coral Pixels";
  font-size: 5vw;
  overflow: hidden;
  /*min-width: 800px;*/
}

* {
  cursor: url("../images/customcursor.png"), auto;
}


#container {
  display: inline-flex;

}

#background-scene {
  z-index: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  object-fit: cover;
  object-position: center;
}

.text-box {
  overflow-wrap: anywhere;
  overflow: visible;
  text-align: center;

}

.typ-text {
  position: absolute;
  display: inline-flex;
  top: 25vh;
  left: 10vw;
  right: 10vw;
  bottom: 30vh;
}


.typewriter-animation {
  position: absolute;
  justify-content: center;
  /*font-size: 5vb;*/
  margin: 0 auto;
  max-width: 100%;
}

.typewriter-animation.is-typing::after {
  animation: none;
  opacity: 1;
}

.standard-text {
  font-size: clamp(25px, 5vb, 30px);
  text-shadow: 2px 1px aqua;
}

.standard-title {
  text-shadow: 3px 2px 0 aqua, 0 0 20px aqua, 0 0 40px aqua;
  font-size: clamp(30px, 7vb, 50px);
}


#enter-button-container {
  display: none;
  position: absolute;
  top: 55vh;
  left: 50vw;
  transform: translateX(-50%);
  justify-content: center;

}

#enter-button {
  font-family: 'Coral Pixels';
  font-size: clamp(15px, 5vb, 30px);
  height: 10vh;
  min-height: 30px;
  width: 20vw;
  min-width: 120px;
  background-color: rgba(0, 100, 255, 0.3);
  border-color: aqua;
  text-shadow: 2px 1px aqua, 0 0 20px aqua, 0 0 40px aqua;
  box-shadow: 0 0 10px aqua, 0 0 20px aqua;
}


.is-that-you {
  display:
    /*inline-block*/
    none;
  overflow-wrap: break-word;
  text-align: center;
}

.is-that-you p {
  font-size: clamp(15px, 5vb, 30px);
  text-shadow: 1px 1px aqua;
  justify-content: center;
  top: 75vh;
}

.is-that-you img {
  margin: 0 2vb 0 2vb;
  height: clamp(30px, 15vb, 20vb);
}



@keyframes shake {
  0% {
    transform: translate(0.5px, 0.5px) rotate(0deg);
  }

  10% {
    transform: translate(-0.5px, -1px) rotate(-0.5deg);
  }

  20% {
    transform: translate(-1.5px, 0px) rotate(0.5deg);
  }

  30% {
    transform: translate(1.5px, 1px) rotate(0deg);
  }

  40% {
    transform: translate(0.5px, -0.5px) rotate(0.5deg);
  }

  50% {
    transform: translate(-0.5px, 1px) rotate(-0.5deg);
  }

  60% {
    transform: translate(-1.5px, 0.5px) rotate(0deg);
  }

  70% {
    transform: translate(1.5px, 0.5px) rotate(-0.5deg);
  }

  80% {
    transform: translate(-0.5px, -0.5px) rotate(0.5deg);
  }

  90% {
    transform: translate(0.5px, 1px) rotate(0deg);
  }

  100% {
    transform: translate(0.5px, -1px) rotate(-0.5deg);
  }
}

.shake-element {
  animation: shake 0.2s infinite;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in-element {
  animation: fade-in 3s ease-out forwards;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }

}

.fade-out-element {
  animation: fade-out 3s ease-out forwards;
}

@keyframes fade-in-out {
  0% {
    opacity: 0%;
  }

  0% {
    opacity: 100%;
  }

  0% {
    opacity: 0%;
  }
}

.fade-in-out-element {
  animation: fade-in-out 1.5s ease-out;
}