body {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  /* background-color: green;
  border: 5px solid black; */
  padding: 10vh;
}

.main {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  /* text-align: center; */
  /* width: 100vh; */
  min-height: 25vh;
  max-height: 50vh;
  /* align-content: center; */
  padding-top: 8vh;
}

.links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 4vh;
  /* background-color: yellow; */
}

.link {
  min-height: 6vh;
  max-height: 10vh;
  width: 10vh;
  border-radius: 50%;
  /* background-color: blue; */
  margin: 1rem;
  text-align: center;
  padding-top: 4vh;
  line-height: 2vh;
  font-size: 2vh;
  color: white;
  transition: 0.2s ease-out;

}

.link:hover {
  /* background-color: black; */
  transform: scale(1.2);
  transition: 0.2s ease-in;
  /* color: black; */
}

img {
  border-radius: 50%;
  /* animation-timing-function: linear; */
}

.first {
  animation-name: enter;
  animation-duration: 0.5s;
  /* animation-timing-function: linear; */
}

.second {
  animation-name: enter-delay;
  animation-duration: 1s;
}

.third {
  animation-name: enter-delay;
  animation-duration: 1.5s;
}

.fourth {
  background-color: #2B0039;
  animation-name: enter-delay;
  animation-duration: 1.75s;
}

.fifth {
  background-color: #550071;
  animation-name: enter-delay;
  animation-duration: 2s;
}

.sixth {
  background-color: #8000AA;
  animation-name: enter-delay;
  animation-duration: 2.25s;
}

.seventh {
  background-color: #AA00E3;
  animation-name: enter-delay;
  animation-duration: 2.5s;
}

.eighth {
  background-color: #D51CFF;
  animation-name: enter-delay;
  animation-duration: 2.75s;
}

/* .ease {
  animation-name: enters;
  animation-duration: 1s;
  animation-timing-function: ease;
}

.linear {
  animation-name: enters;
  animation-duration: 1s;
  animation-timing-function: linear;
} */



@keyframes enter {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }
  /* 80% {
    opacity: 1;
    transform: scale(1.2);
  } */
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes enter-delay {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }
  20% {
    opacity: 0;
    transform: scale(0.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* @keyframes third {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }
  30% {
    opacity: 0;
    transform: scale(0.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
} */

a {
  text-decoration: none;
  /* color: white; */
}