:root {
  --space: 1rem;
  --font-size: .9rem;
}

body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

html {
  margin: 0px;
  padding: 0px;
}

* {
  letter-spacing: 0.0625rem;
  font-family: Arial;
  color: white;
}

.container {
  margin: var auto 100% auto;
  position: relative;
}

@keyframes card-ani1 {
  0% {
    opacity: 0;
    transform: translateX(30px) translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px) translateY(0px);
  }
}

@keyframes card-ani2 {
  0% {
    opacity: 0;
    transform: translateX(0px) translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px) translateY(0px);
    color: #9B9B9B;
  }
}

.container .card {
  width: 13.5rem;
  height: 20rem;
  padding: 2rem;
  margin: 7rem auto 5rem auto;
  background-color: white;
  animation: card-ani1 1s;
  transition-delay: 1s;
  transition-timing-function: easeOutCirc;
  position: relative;
}

@media only screen and (max-width: 600px) {
  .container .card {
    margin: 2rem auto 5rem 2.5rem;
    padding: 1rem;
    width: 14rem;
  }
}

.container .card .title {
  font-size: 1.75rem;
  margin: 1rem auto 0px auto;
  animation: card-ani2 1s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

.container .card .logo {
  padding: .75rem;
  animation: card-ani2 1s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

.container .card hr {
  border: 0;
  height: .0625rem;
  background-color: #d4d4d4;
  animation: card-ani2 1s;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}

.container .card .sub-title {
  font-size: var(--font-size);
  margin: 1.4rem auto .4rem auto;
  animation: card-ani2 1s;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
}

.container .card .name {
  font-size: var(--font-size);
  margin: .4rem auto .4rem auto;
  animation: card-ani2 1s;
  animation-delay: 0.4s;
  animation-fill-mode: forwards;
}

.container .card .email {
  font-size: var(--font-size);
  animation: card-ani2 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
}

@keyframes circle-ani1 {
  0% {
    transform: translateX(0px) translateY(0px);
  }

  20% {
    transform: translateX(20px) translateY(-10px);
  }

  40% {
    transform: translateX(-10px) translateY(-30px);
  }

  60% {
    transform: translateX(-20px) translateY(-10px);
  }

  80% {
    transform: translateX(10px) translateY(10px);
  }

  100% {
    transform: translateX(0px) translateY(0px);
  }
}

@keyframes circle-ani2 {
  0% {
    transform: translateX(20px) translateY(0px);
  }

  20% {
    transform: translateX(-10px) translateY(20px);
  }

  40% {
    transform: translateX(0px) translateY(-10px);
  }

  60% {
    transform: translateX(20px) translateY(0px);
  }

  80% {
    transform: translateX(-10px) translateY(20px);
  }

  100% {
    transform: translateX(20px) translateY(0px);
  }
}

@keyframes circle-ani3 {
  0% {
    transform: translateX(-30px) translateY(10px);
  }

  20% {
    transform: translateX(-10px) translateY(0px);
  }

  40% {
    transform: translateX(0px) translateY(-20px);
  }

  60% {
    transform: translateX(20px) translateY(10px);
  }

  80% {
    transform: translateX(15px) translateY(-20px);
  }

  100% {
    transform: translateX(-30px) translateY(10px);
  }
}