* { margin: 0; 
    padding: 0; 
    color:rgb(237, 180, 255);
    background-color: rgb(10, 3, 17);
}

#showMe {
  animation: one 0s 16.5s forwards;
  visibility: hidden;
}

@keyframes one {
  to   { visibility: visible; }
}

#showMe1 {
  animation: two 0s 5s forwards;
  visibility: hidden;
}

@keyframes two {
  to   { visibility: visible; }
}

#asdf {
  visibility: hidden;
  animation: cssAnimation 0s 34.5s forwards;
}

@keyframes cssAnimation {
  to   { visibility: visible; }
}

.secrets {
  font-family: "Courier";
  font-size: 20px;
  font-weight: 600;
  padding: 20px;
}


.css-typing p {
  border-right: .23em solid rgb(221, 0, 192);
  font-family: "Courier";
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
}
.css-typing p:nth-child(1) {
  width: 23em;
  animation: type 4s steps(40, end);
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(2) {
  width: 52.3em;
  opacity: 0;
  animation: type2 12s steps(90, end);
  animation-delay: 4.2s;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(3) {
  width: 60em;
  opacity: 0;
  animation: type3 5s steps(20, end);
  animation-delay: 35.2s;
  animation-fill-mode: forwards;
}





@keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid rgb(237, 180, 255);
  }
  100% {
    border: none;
  }
}


@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid  rgb(221, 0, 192);
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}


@keyframes blink {
  50% {
    border-right: none;
  }
}


.typed-out p {
  border-right: .15em solid rgb(221, 0, 192);
  font-family: "Courier";
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  animation-fill-mode: initial;
}
.typed-out p {
    border-right: .15em solid rgb(221, 0, 192);
  font-family: "Courier";
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;

  width: 0;
  opacity: 0;
  width: 31.3em;
  opacity: 0;
  animation: 
  typer 11s steps(90, end);
  
  animation-delay: 23s;
  animation-fill-mode: forwards;
}



@keyframes typer {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
    99.9% {
    border-right: .15em solid rgb(221, 0, 192);
  }
  100% {
    width: 62em;
    opacity: 1;
    border-right: none;
  }
}

form {
    display: inline-block;
}

audio {
         width: 100%;
         max-width: 200px;
         border: 2px solid #ff00f7;
         border-radius: 10px;
         background-color: #661ec6;
         outline: none;
      }
      audio:focus {
         border-color: #5c00b3;
      }
.extra {
  color: rgb(179, 144, 243);
}


.blackbg {
    background-color: rgb(10, 3, 17);
    border-style: solid;
    border-color: rgb(10, 3, 17);
    border-width: 10px;
}

.peak {
    border-width: auto;
    background-color: rgb(10, 3, 17);
    border-style: solid;
    border-bottom: auto;
    border-color: rgb(10, 3, 17);
    border-width: 50px;
    margin-bottom: auto;
}


.bottom {
    background-color:rgb(10, 3, 17);
    border-width: 50px;
    margin-bottom: auto;
    border-style: solid;
    border-bottom: auto;
    border-color:rgb(10, 3, 17);
}

.textunpeak {
    color: rgb(237, 180, 255);
}

.header {
    color: rgb(237, 180, 255);
    font-weight: 600;
    font-size: 30px;  
}

.headers {
    color: rgb(237, 180, 255);
    font-weight: 800;
    padding-bottom: 10px;
    font-style: bold;
    
}

.kiwi-maru-regular {
  font-family: "Kiwi Maru", serif;
}

.line {
    color: rgb(179, 144, 243);
    padding: 20px;
    padding-left: 10%;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.command {
  color: rgb(221, 0, 192);
  font-weight: bold;
}