body {
  background-color: #000;
  font-family: monospace;
  color: #00ff00;
  text-align: center;
  line-height: 1.4;
}

a { 
  color: #00ff00; 
  transition: color 0.1s ease-in; 
  text-decoration: none;
  font-size: 18px;
}

a:hover {
  color: #fff;
}

div {
  height: 200px;
  width: 400px;
  position: fixed;
  top: 20%;
  left: 50%;
  margin-top: -100px;
  margin-left: -200px;
}

.container {
  align-items: center;
  justify-content: center;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.choose-text, .music-text, .stuff-text, .software-text, .about-text, .phrog-text, .back-text {
  opacity: 1;
  width: auto;
  position: relative;
  margin-bottom: 10px;
}

.choose-text::after, .music-text::after, .stuff-text::after, .software-text::after, .about-text::after, .phrog-text::after, .back-text::after {
  content: "]";
  width: auto;
  display: inline-block;
}

.choose-text::after {
  animation: choose-type-text 3s forwards;
  animation-delay: 0.1s;
  animation-fill-mode: both;
}

.music-text::after {
  animation: music-type-text 3s forwards;
  animation-delay: 0.6s;
  animation-fill-mode: both;
}

.stuff-text::after {
  animation: stuff-type-text 3s forwards;
  animation-delay: 1.1s;
  animation-fill-mode: both;
}

.software-text::after {
  animation: software-type-text 3s forwards;
  animation-delay: 1.6s;
  animation-fill-mode: both;
}

.about-text::after {
  animation: about-type-text 3s forwards;
  animation-delay: 2.1s;
  animation-fill-mode: both;
}

.phrog-text::after {
  animation: phrog-type-text 3s forwards;
  animation-delay: 2.6s;
  animation-fill-mode: both;
}

.back-text::after {
  animation: back-type-text 3s forwards;
  animation-delay: 3.1s;
  animation-fill-mode: both;
}

@keyframes choose-type-text {
  0% {
    content: "[ . . . ]";
  }
  2% {
    content: "[ . . ]";
  }
  4% {
    content: "[ . ]";
  }
  6% {
    content: "[ ]";
  }
  8% {
    content: "[ c ]";
  }
  10% {
    content: "[ c h ]";
  }
  12% {
    content: "[ c h o ]";
  }
  14% {
    content: "[ c h o o ]";
  }
  16% {
    content: "[ c h o o s ]";
  }
  18%, 100% {
    content: "[ c h o o s e ]";
  }
}

@keyframes music-type-text {
  0% {
    content: "[ . . . ]";
  }
  2% {
    content: "[ . . ]";
  }
  4% {
    content: "[ . ]";
  }
  6% {
    content: "[ ]";
  }
  8% {
    content: "[ m ]";
  }
  10% {
    content: "[ m u ]";
  }
  12% {
    content: "[ m u s ]";
  }
  14% {
    content: "[ m u s i ]";
  }
  16%, 100% {
    content: "[ m u s i c ]";
  }
}

@keyframes stuff-type-text {
  0% {
    content: "[ . . . ]";
  }
  2% {
    content: "[ . . ]";
  }
  4% {
    content: "[ . ]";
  }
  6% {
    content: "[ ]";
  }
  8% {
    content: "[ s ]";
  }
  10% {
    content: "[ s t ]";
  }
  12% {
    content: "[ s t u ]";
  }
  14% {
    content: "[ s t u f ]";
  }
  16%, 100% {
    content: "[ s t u f f ]";
  }
}

@keyframes software-type-text {
  0% {
    content: "[ . . . ]";
  }
  2% {
    content: "[ . . ]";
  }
  4% {
    content: "[ . ]";
  }
  6% {
    content: "[ ]";
  }
  8% {
    content: "[ s ]";
  }
  10% {
    content: "[ s o ]";
  }
  12% {
    content: "[ s o f ]";
  }
  14% {
    content: "[ s o f t ]";
  }
  16% {
    content: "[ s o f t w ]";
  }
  18% {
    content: "[ s o f t w a ]";
  }
  20% {
    content: "[ s o f t w a r ]";
  }
  22%, 100% {
    content: "[ s o f t w a r e ]";
  }
}

@keyframes about-type-text {
  0% {
    content: "[ . . . ]";
  }
  2% {
    content: "[ . . ]";
  }
  4% {
    content: "[ . ]";
  }
  6% {
    content: "[ ]";
  }
  8% {
    content: "[ a ]";
  }
  10% {
    content: "[ a b ]";
  }
  12% {
    content: "[ a b o ]";
  }
  14% {
    content: "[ a b o u ]";
  }
  16%, 100% {
    content: "[ a b o u t ]";
  }
}

@keyframes phrog-type-text {
  0% {
    content: "[ . . . ]";
  }
  2% {
    content: "[ . . ]";
  }
  4% {
    content: "[ . ]";
  }
  6% {
    content: "[ ]";
  }
  8% {
    content: "[ p ]";
  }
  10% {
    content: "[ p h ]";
  }
  12% {
    content: "[ p h r ]";
  }
  14% {
    content: "[ p h r o ]";
  }
  16%, 100% {
    content: "[ p h r o g ]";
  }
}

@keyframes back-type-text {
  0% {
    content: "[ . . . ]";
  }
  2% {
    content: "[ . . ]";
  }
  4% {
    content: "[ . ]";
  }
  6% {
    content: "[ ]";
  }
  8% {
    content: "[ b ]";
  }
  10% {
    content: "[ b a ]";
  }
  12% {
    content: "[ b a c ]";
  }
  14%, 100% {
    content: "[ b a c k ]";
  }
}