* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}
body {
  background: linear-gradient(
    90deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(9, 9, 121, 1) 24%,
    rgba(0, 212, 255, 1) 100%
  );
}
.profile-image-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

img {
  animation: fromBottom 0.7s 0.2s backwards;
  margin: 50px;
  width: 10em;
  border-radius: 50%;
  border: 4px solid black;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

section {
  animation: fromTop 0.7s 0.2s backwards;
  background: linear-gradient(
    90deg,
    rgba(1, 1, 11, 1) 63%,
    rgba(9, 9, 121, 1) 100%,
    rgba(0, 212, 255, 1) 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid black;
  border-radius: 10%;
  margin-top: 0.5em;
  width: 20em;
  margin: 40px;
  height: 50px;
  justify-content: center;
  text-decoration: none;
  list-style: none;
}

ul li a {
  color: white;
}

@keyframes fromTop {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fromBottom {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}