.about {
}

.about .description .greeting {
  color: var(--color-primary);
  font-family: var(--font-brand);
  font-size: var(--font-large);
}

.about .description {
  box-sizing: border-box;
  width: 90vw;
  max-width: 550px;
  margin: 25px 5vw;
  padding: 20px;
  color: white;
  font-family: var(--font-default);
  font-size: var(--font-medium);
  background: #00000088;
  box-shadow: 0px 0px 10px 3px black;
  border: 12px solid var(--color-primary);
  border-radius: 50px;
  animation: moveAboutY 4s ease-in-out infinite alternate;
}

.about .contact {
  font-weight: bold;
}

.about .contact a {
  display: block;
  padding-bottom: 10px;
  color: var(--color-primary);
  text-decoration: none;
}
.about .contact a:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
}

@keyframes moveAboutY {
  0% {
    transform: translate(0px, 0px);
  }
  30% {
    transform: translate(0px, -5px);
  }
  70% {
    transform: translate(0px, 5px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}