*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
section
{

    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
   
}

.scroll-down {
    height: 50px;
    width: 30px;
    border: 2px solid #fc2827;
    position: relative;
    left: 50%;
    bottom: 90px;
    border-radius: 50px;
    cursor: pointer;
    color: white;
    display: block;
    
}
.scroll-down::before,
.scroll-down::after{
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    border: 2px solid white;
    height: 10px;
    width: 10px;
    transform: translate(-50%, -100%) rotate(45deg);
    border-top: transparent;
    border-left: transparent;
    animation: scroll-down 1s ease-in-out infinite;
}
.scroll-down::after{
    top: 30%;
    animation-delay: .3s;
}
@keyframes scroll-down{
    0%{
        opacity: 0;
    }
    30%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        top: 90%;
    }

}