html, body {
    background-color: #1c0b54;
    color: white;
    text-align: center;
}

#eyes {
    margin: 0 auto;
}

.violet-container {
    position: relative;
    display: inline-block;
}

#violet {
    width: 720px;
    height: auto;
    border-radius: 20px;
    border: 10px solid rgb(255, 255, 255);
}


/*typing*/
@-webkit-keyframes typing { from { width: 0; } }
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }

 .typing {
    position: absolute;
    top:40%;
    left:-40%;
    transform: translate(-50%, -50%);
    border-right: .1em solid rgb(173, 129, 255);
    width: 20.5ch;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: typing 4s steps(41, end), blink-caret .5s step-end infinite alternate;
}


/* FADE IN */
.fade-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  z-index: 9999;
  pointer-events: none;
  animation: fadeOut 2s forwards;
  animation-delay: 0.3s; /* optional delay */
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}


/* VOL BUTTON FADE IN */

.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
  animation-delay: 0.3s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}


