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

h1 {
    font-family: 'Bree Serif', serif;
}

.seta{
    position: relative;
    bottom: 0;
    left: 50%;
    transform: translateX(-20px);
}

.seta span{
    display: block;
    width: 20px;
    height: 20px;
    border-bottom: 5px solid #ffffff;
    border-right: 5px solid #ffffff;
    transform: rotate(45deg);
    margin-bottom: 0;
    animation: animate2 0.6s ease-in-out infinite alternate;
}

.arrow{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
}
.arrow span{
    display: block;
    width: 20px;
    height: 20px;
    border-bottom: 5px solid #ffffff;
    border-right: 5px solid #ffffff;
    transform: rotate(45deg);
    animation: animate 2s infinite;
}
.arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow span:nth-child(3){
    animation-delay: -0.4s;
}

@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}

@keyframes animate2 {
    to{
        transform: rotate(45deg) translate(-5px,-5px);
    }
    from{
        transform: rotate(45deg) translate(5px,5px);
    }
}

@media(min-width:800px) {
    .banner {
        background-image: url(../img/278068503_424439339489684_2528837100485065232_n.jpg); 
        background-repeat: no-repeat; 
        background-size: contain; 
        background-position: left ;
    }
}