body {
  background-color: #170e1f;
  font-family: monospace;
  color: #f9f0ff;
  line-height: 1.4;
}

a { 
  color: #7b50aa; 
  transition: color 0.1s ease-in; 
  text-decoration: underline;
}

a:hover {
  color: #fff;
}

em {
    color: #7b50aa;
}

.specs {
  line-height: 0.7;
}

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

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

.aboutme-text, .additional-text {
  opacity: 1;
  width: auto;
  position: relative;
  margin-bottom: 10px;
}

.aboutme-text::after, .additional-text::after {
  content: "";
  width: auto;
  display: inline-block;
}

@keyframes aboutme-type-text {
  0% {
    content: "a";
  }
  2% {
    content: "ab";
  }
  4% {
    content: "abo";
  }
  6% {
    content: "abou";
  }
  8% {
    content: "about";
  }
  10% {
    content: "about m";
  }
  12%, 100% {
    content: "about me";
  }
}

@keyframes additional-type-text {
  0% {
    content: "a";
  }
  2% {
    content: "ad";
  }
  4% {
    content: "add";
  }
  6% {
    content: "addi";
  }
  8% {
    content: "addit";
  }
  10% {
    content: "additi";
  }
  14% {
    content: "additio";
  }
  16% {
    content: "addition";
  }
  18%{
    content: "additiona";
  }
  20% {
    content: "additional";
  }
  22% {
    content: "additional i";
  }
  24% {
    content: "additional in";
  }
  26% {
    content: "additional inf";
  }
  28%, 100% {
    content: "additional info";
  }
}