@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

*{
    scroll-behavior: smooth;
}
.fontstyle {
    font-family: 'Press Start 2P', cursive;
}

.fontstyle2 {
    font-family: "Merriweather", serif;
}

.couche {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: repeat-x;
    background-size: auto 100%;
}

.couche-1 {
    background-image: url('src/images/background1.png');
    animation: scroll-bg 80s linear infinite;
    z-index: 1;
}

.couche-2 {
    background-image: url('src/images/background2.png');
    animation: scroll-bg 50s linear infinite;
    z-index: 2;
}

.couche-3 {
    background-image: url('src/images/background3.png');
    animation: scroll-bg 30s linear infinite;
    z-index: 3;
}



@keyframes scroll-bg {
    from {
        background-position: 0 center;
    }

    to {
        background-position: -640px center;
    }
}


.bg-top {
    transition: transform 0.8s ease-out, opacity 0.8 ease;
}

.hiden {
    transform: translateY(100%);
    pointer-events: none;
    transition-duration: 1s;
    opacity: 0;
}

.hero-main {
    transition: transform 0.8s ease-out;
}

.hiden-main {
    transform: translateY(-100%);
    pointer-events: none;
    transition-duration: 3s;
    color: turquoise;
}

body {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-image: url('src/images/forestBG.png');
}