section
{
    padding: 100px;
}

.absolute
{
    position: absolute;
}

.relative
{
    position: relative;
}

.accueil
{
    background-image: url(./assets/img/slide.jpg);
    background-size: cover;
    height: 100vh;  
}

.produit
{
    background-color: black;
}

.paralax1
{
    animation: paralax1 1s linear;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -2s);
}

.paralax2
{
    animation: paralax2 1s linear;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -2s);
}

.paralax3
{
    animation: paralax3 1s linear;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1.5s);
}

.paralax4
{

    animation: paralax4 1s linear;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1.4s);
}


@keyframes paralax1{
    0% {
		
        transform: translate(-300px, 300px);
	}

	100% {
		transform: translate(0, 0);
	}
}
@keyframes paralax2{
        0% {
            transform: translateY(-300px);
        }
        100% { 
            transform: translateY(0%); 
        }
}
@keyframes paralax3{
        0% {
            transform: translateY(-800px);
        }
        100% { 
            transform: translateY(0%); 
        }
}
@keyframes paralax4{
        0% {
            transform: translateY(1200px);
        }
        100% {
            transform: translateY(0); 
        }
}