#about {
  color: #8a9fbd;
  position: relative;
  left: 25vw;
  width: 50%;
  animation: fadeIn 0.8s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#about h2 {
  background: linear-gradient(#eee, #4a5f72);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px rgba(53, 63, 63, 0.7);
  font-size: x-large;
}

#about .nama {
  letter-spacing: 3px;
  text-shadow: 10px 10px 10px #fff;
  animation: glow 1s linear;
}

#about h1 {
  animation: slide-in .6s linear;
  position: relative;
  width: 100%;
  padding: 0 .5em;
  color: rgba(255, 255, 255, 0.7);
  font-size: xx-large;
  text-shadow: 3px 2px rgba(9, 116, 126, 0.6);
}

#about h4 {
  color: #e1ffff;
  letter-spacing: 3px;
  margin-top: -1em;
}

#about .intro {
  padding-top: 1em;
}

@keyframes slide-in {
  from {
    left: -2em;
    opacity: 0;
  }
  to {
    left: .2em;
  }
}

@keyframes glow {
  to {
    filter: brightness(10);
  }
}
