html{
    font-family: var(--body-font);
    font-size: 10px;
    color: #000
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    overflow-x: hidden
}

body{
    background-color: #fdf169;
    overflow-x: hidden;
}

section{
    padding: 3.9rem 0;
}

p{
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    font-size: 3rem;
    text-shadow: 0px 0px 5px #000, 0px 0px 5px #000, 0px 0px 10px #000, 0px 0px 5px #000   ;
}

.container{
    width: 100%;
    max-width: 122.5rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.main{
    width: 100%;
    height: 90vh;
    background: url("images/DespicableSea-BG1.jpg") center repeat;
    background-size: cover;
    text-align: center;
}

.image-tite{
    width: 100%;
    max-height: 50rem;
    z-index: 0;
}

.image-tite img{
     scale: 80%;
     margin-top: -50px;
     width: 100%;
}

.image-boat{
    width: 100%;
    align-items: center;
    text-align: center;
    z-index: 1500;
    animation: boat 3s ease infinite;
}

.image-boat img{
     width: 100%;
     scale: 90%;
     margin-top: -10px;
}


/* Desktop */
@media screen and (min-width: 900px){
    .image-tite img{
     scale: 40%;
     margin-top: -250px;
    }

    .image-boat img{
     width: 60%;
     scale: 80%;
     margin-top: -170px;
     }
}

@keyframes boat {
    0%{
        transform: rotate(3deg);
    }
    50%{
        transform: rotate(-3deg);
    }
    100%{
        transform: rotate(3deg);
    }
}