@keyframes backgroundColor {
  0% {
    background-color: rgba(0,0,0,1);
  }
  25% {
    background-color: rgba(0,0,0,0.9);
  }
  50% {
    background-color: rgba(0,0,0,0.8);
  }
  100% {
    background-color: rgba(0,0,0,0.7);
  }
}


@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOutQuickly {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeInFadeout {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

body {
  background-image: url('./abstract.svg')
}

.letter {
  width: 25px;
}

div {
  font-family: "Lato", sans-serif;
}

.main {
  background-color: rgba(0,0,0,1);
  animation: backgroundColor 6s linear 1;
  animation-fill-mode: forwards;
  animation-delay: 7s;
}

.animation-container {
  position: relative;
  margin-left: -250px;
}

.aristillus,
.ar,
.t,
.is,
.us {
  position: absolute;
}

.aristillus {
  animation: fadeOutQuickly 6s linear 1;
}

.ar,
.t {
  animation: fadeOutQuickly 5s linear 1;
  animation-delay: 2s;
}

.is {
  animation: fadeInFadeout 6s linear 1;
  animation-delay: 2s;
}

.us {
  animation: fadeIn 3s linear 1;
  animation-delay: 4s;
}

.ar {
  left: 0px;
}

.t {
  left: 100px;
}

.is {
  opacity: 0;
  left: 50px;
}

.us {
  opacity: 0;
  left: 200px;
}

@media only screen and (max-width: 800px) {
  .animation-container {
    margin-top: -100px;
  }