body {
  background: #050620;
  background: -webkit-radial-gradient(rgba(5,6,32,0.79), rgba(5,6,32,0.91));
  background:    -moz-radial-gradient(rgba(5,6,32,0.79), rgba(5,6,32,0.91));
  background:         radial-gradient(rgba(5,6,32,0.79), rgba(5,6,32,0.91));
  color: #ecf0f1;
  transition: all 0.3s ease-out;
  height: 100vh;
  width: 100%;
}

p {
  margin-top: 20px;
  font-size: 18px;
  text-decoration: none;
}

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


.hello .path1 {
  stroke-dasharray: 270;
  stroke-dashoffset: 270;
  animation: dash 0.25s linear forwards;
  animation-delay: 0.2s;
}
.hello .path2 {
  stroke-dasharray: 265;
  stroke-dashoffset: 265;
  animation: dash 0.25s linear forwards;
  animation-delay: 0.55s;
}
.hello .path3 {
  stroke-dasharray: 205;
  stroke-dashoffset: 205;
  animation: dash 0.2s linear forwards;
  animation-delay: 0.8s;
}
.hello .path4 {
  stroke-dasharray: 1340;
  stroke-dashoffset: 1340;
  animation: dash 1.25s linear forwards;
  animation-delay: 1.05s;
}
.hello .path5 {
  stroke-dasharray: 221;
  stroke-dashoffset: 221;
  animation: dash 0.2s linear forwards;
  animation-delay: 2.4s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}