@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
*{
    font-family: 'Lato', sans-serif;
}
/*============================================================================================================================= */

.scrolldown{
  position:absolute;
  bottom: 20px;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translateY(-80px) translateX(-50%) rotate(45deg);
}
.scrolldown span{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  animation: animate 1.5s linear infinite;
  opacity: 0;
}
.scrolldown span:nth-child(1){
  transform: translate(-15px, -15px);
  animation-delay: -0.4s;
}
.scrolldown span:nth-child(2){
  transform: translate(0, 0);
  animation-delay: -0.2s;
}
.scrolldown span:nth-child(3){
  transform: translate(15px, 15px);
  animation-delay: 0;
}

@keyframes animate{
  0%{
    top: -5px;
    left: -5px;
    opacity: 0;
  }
  25%{
    top: 0;
    left: 0;
    opacity: 1;
  }
  50%, 100%{
    top: 5px;
    left: 5px;
    opacity: 0;
  }
}