@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');


.scrollul{
    font-family: 'Quicksand', sans-serif;
    position: relative;
    top: -20px;  left: 0%;
    transform: translate(-50%,-50%); 
}


.scrollul li{
    font-family: 'Quicksand', sans-serif;
    list-style: none;
    width: 5px;  height: 20px;
    text-shadow: 3px 3px 13px rgba(150, 150, 150, 1);
}
.scrollul li:nth-of-type(2n+1){
    background: rgba(255,255,255,.6);
}

.scrollul li:last-of-type{
    position: absolute;
    top: 0;  left: 50%;
    width: 7px;  height: 30px; 
    transform: translateX(-50%) translateY(0);
    background: #fff;
    animation: animate 1.5s infinite linear;
}
.scrollul li:last-of-type::before{
   content: '';
   position: absolute;
   bottom: 0;   left: 50%; 
   width: 20px;   height: 20px;
   background: transparent;
   border-left: 7px solid #fff;
   border-bottom: 7px solid #fff;
   transform: translate(-10px,0) rotate(-45deg);
}
@keyframes animate{
    0%{
        transform: translateX(-50%) translateY(0px);
        opacity: 0;
    }
    20%{
        transform: translateX(-50%) translateY(20px);
        opacity: 1;
    }
    40%{
        transform: translateX(-50%) translateY(40px);
        opacity: 1;
    }
    80%{
        transform: translateX(-50%) translateY(50px);
        opacity: 1;
    }
    100%{
        transform: translateX(-50%) translateY(60px);
        opacity: 0;
    }
}