.fader {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.visible {
  opacity: 1;
}

.scroll-down {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.scroll-down .arrow {
  display: block;
  font-size: 2rem;
  animation: bounce 1.5s infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }
}

.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.blink {
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes mainColor {
  0% {
    background-color: rgb(85, 0, 0);
  }

  50% {
    background-color: rgb(200, 0, 0);
  }

  100% {
    background-color: rgb(85, 0, 0);
  }
}

@keyframes moveBg {
  0% {
    background-position: top left;
  }

  100% {
    background-position: bottom right;
  }
}

.main-bg {
  background-repeat: repeat;
  background-size: 100px 100px;
  animation: moveBg 60s linear infinite, mainColor 10s infinite ease-in-out;
}