body {
  background-color: black;
}
svg {
  height: 100%;
  width: 100%;
}
text {
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}

#container {
  text-align: center;
  position: relative;
  margin: 0 auto;
  margin-top: 2%;
  height: 700px;
  width: 1200px;
}
#word {
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  letter-spacing: 3px;
  flex-direction: row;
  position: absolute;
  font-size: 0.8em;
  display: flex;
  height: 50px;
  width: 100px;
  z-index: -1;
}
#alias {
  width: 400px;
  height: 30px;
  font-size: 1em;
  text-indent: 20px;
  letter-spacing: 3px;
  background-color: black;
  border-bottom: solid 3px #eb3b5a;
  border-right: none;
  border-left: none;
  border-top: none;
  color: #eb3b5a;
}
input:focus {
  outline: none;
}

.popAnimation {
  animation: popAnimation 0.4s ease-out forwards;
}
.reset {
  animation: reset 0.4s ease-out forwards;
}
.anim2 {
  animation: anim 11s linear forwards;
}
.anim3 {
  animation: anim 12s linear forwards;
}
.anim4 {
  animation: anim 13s linear forwards;
}
.hide {
  visibility: hidden;
}
::placeholder {
  color: #6c5ce7;
}

@keyframes anim {
  100% { top: 68%; }
}
@keyframes reset {
  50% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes popAnimation {
  50% { transform: scale(3); }
  100% { transform: scale(1); }
}