@charset "UTF-8";

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    position: relative;
    max-width: 100vw;
    overflow-x: hidden;

}

.container {
    overflow: hidden;
    position: relative;
}

section {
    position: absolute;
    height: 100%;
    width: 100vw;
    top: 0;
}

#end-inner-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.blur-image {
    width: 100%;
    height: auto;
    filter: blur(0);
    transition: filter 0.5s ease-out;
    position: relative;

}





/* Adjust blur based on scroll position .blur-effect {
    filter: blur(8px);

} */


.background-image img {
    width: 100%;
    position: relative;

}



@font-face {
    font-family: 'PPNeueMontreal-Bold';
    src: url('/fonts/PPNeueMontreal-Bold.ttf');
}

@font-face {
    font-family: 'ABCArizonaText-Medium-Trial';
    src: url('/fonts/ABCArizonaText-Medium-Trial.woff2') format('woff2'),
        url('/fonts/ABCArizonaText-Medium-Trial.woff') format('woff'),
        url('/fonts/ABCArizonaText-Medium-Trial.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


.header-text {
    font-family: 'PPNeueMontreal-Bold', sans-serif;

    color: rgba(255, 255, 255, 0.929)
}






#circle-container {
    position: absolute;
    top: 0;
    height: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

.circle {
    width: 270px;
    height: 270px;
    border-radius: 50%;
    background-color: rgb(255, 255, 255);
    /* Vous pouvez changer la couleur si vous le souhaitez */
    position: absolute;
    /* background-color: rgba(164, 164, 164, 0.5); */
    border: 5px solid rgb(0, 0, 0);
    transform: translate(-50%, -50%);
    animation: scaleAnimation 1s ease-in-out infinite alternate;
    /* Animation d'échelle */
    display: flex;
    align-items: center;
    /* Pour centrer le texte verticalement */
    justify-content: center;
    /* Pour centrer le texte horizontalement */
    text-align: center;
    /* Pour centrer le texte dans le cercle */
    font-size: 60px;
    font-family: 'PPNeueMontreal-Bold', sans-serif;
    left: 44%;
    bottom: 13.5%;
}

@keyframes scaleAnimation {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        transform: translate(-50%, -50%) scale(1.2);
    }
}


#end {
    width: 100%;
    min-height: 100vh;
    top: 125vh;
    height: 100%;
    display: flex;
    align-items: flex-end;
    position: absolute;
}


.opur-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}


.rectangle {
    font-size: 18px;
    color: white;
}







.title-end {
    font-size: 15vw;
    z-index: 1;
    opacity: 0;
    animation: fadeInAnimation 2s ease-in-out forwards;
    font-family: 'ABCArizonaText-Medium-Trial', serif;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 5);
    /* mix-blend-mode: color-dodge; */

    color: rgb(0, 0, 0);
    /* Couleur de remplissage du texte */
    -webkit-text-stroke: 2px rgb(251, 251, 251);
    /* Contour */
    text-fill-color: transparent;
    text-shadow:
        0 0 5px rgb(255, 255, 255),
        /* Ombre pour le contour flou */
        0 0 10px rgb(255, 255, 255),
        /* Plus grande ombre pour un flou plus prononcé */
        0 0 15px rgb(255, 255, 255);
    /* Encore plus grande ombre pour un flou plus prononcé */


}


@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@keyframes fadeInLetters {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}


#end-text {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin-top: -4vh;
}

.end-text {
    font-size: 16vw;
    z-index: 1;
    opacity: 0;
    animation: fadeInAnimation 2s ease-in-out forwards;
    font-family: 'ABCArizonaText-Medium-Trial', serif;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 5);
    /* mix-blend-mode: color-dodge; */

    color: rgb(0, 0, 0);
    /* Couleur de remplissage du texte */
    -webkit-text-stroke: 2px rgb(251, 251, 251);
    /* Contour */
    text-fill-color: transparent;
    text-shadow:
        0 0 5px rgb(255, 255, 255),
        /* Ombre pour le contour flou */
        0 0 10px rgb(255, 255, 255),
        /* Plus grande ombre pour un flou plus prononcé */
        0 0 15px rgb(255, 255, 255);
    /* Encore plus grande ombre pour un flou plus prononcé */
    position: absolute;
    top: 1%;
    left: 0;
    text-align: center;
    width: 100%;


}

#end-text h1:nth-child(1),
#end-text h1:nth-child(2),
#end-text h1:nth-child(3),
#end-text h1:nth-child(4),
#end-text h1:nth-child(5),
#end-text h1:nth-child(6),
#end-text h1:nth-child(7) {
    position: relative;
    text-align: center;
    left: 0;
    width: 100%;
}

#end-text h1:nth-child(1) {
    top: 50%;
}

#end-text h1:nth-child(2) {
    margin-top: 53%;
}

#end-text h1:nth-child(3) {
    margin-top: 64%;
}

#end-text h1:nth-child(4) {
    margin-top: 64%;
}

#end-text h1:nth-child(5) {
    margin-top: 68%;
}

#end-text h1:nth-child(6) {
    margin-top: 64%;
}

#end-text h1:nth-child(7) {
    margin-top: 64%;
}


@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@keyframes fadeInLetters {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}



@media (max-width: 600px) {

    #end-text h1:nth-child(1) {
        top: 50%;
    }

    #end-text h1:nth-child(2) {
        margin-top: 95%;
    }

    #end-text h1:nth-child(3) {
        margin-top: 145%;
    }

    #end-text h1:nth-child(4) {
        margin-top: 145%;
    }

    #end-text h1:nth-child(5) {
        margin-top: 145%;
    }

    #end-text h1:nth-child(6) {
        margin-top: 145%;
    }

    #end-text h1:nth-child(7) {
        margin-top: 145%;
    }
}









p {
    font-size: 4em;
    color: rgb(0, 0, 0);
    /* Couleur de remplissage du texte */

    text-decoration-line: underline;
    font-family: 'PPNeueMontreal-Bold', sans-serif;
    padding-top: 40px;
    padding-left: 10px;
    color: rgb(0, 0, 0);
    /* Couleur de remplissage du texte */
    text-fill-color: transparent;
    text-shadow:
        0 0 5px rgb(255, 255, 255),
        /* Ombre pour le contour flou */
        0 0 10px rgb(255, 255, 255),
        /* Plus grande ombre pour un flou plus prononcé */
        0 0 15px rgb(255, 255, 255);
    /* Encore plus grande ombre pour un flou plus prononcé */

    align-items: center;
    /* Centrer verticalement */
    justify-content: center;
    /* Centrer horizontalement */
    text-align: center;
}


html {
    scroll-behavior: smooth;
}




h2 {
    font-size: 130px;
    top: 1000px;
    font-family: 'PPNeueMontreal-Bold', sans-serif;
    font-weight: 600;
}

@keyframes scaleAnimation {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

.scroll-container {
    background-color: #ffffff;
    border: 3px solid black;
    width: 100%;
    height: 100px;
    /* Hauteur de la zone de défilement */
    overflow: hidden;
    /* Masque le contenu dépassant de la zone de défilement */
    position: relative;
    /* Positionnement relatif pour que le texte défile à l'intérieur */
}

.scroll-text {
    font-size: 100px;
    color: #160e0e;
    white-space: nowrap;
    left: 59%;
    position: absolute;
    bottom: 0;
    animation: scrollAnimation 6s linear infinite;
    font-family: 'PPNeueMontreal-Bold', sans-serif;
}

@keyframes scrollAnimation {

    /* c'est pas la meilleure solution mais ca marche, chez moi */
    from {
        transform: translateX(100%);
        /* Début du défilement à droite */
    }

    to {
        transform: translateX(-259%);
        /* Fin du défilement à gauche */
    }
}


.container-sidebar {
    position: absolute;
    top: 0;
    height: 100%;
}

.innercontainer-sidebar {
    position: relative;
    height: 100%;
}

.sidebar {
    width: 100px;
    height: 100%;
    background-color: transparent;
    position: absolute;
    /* Utilisez "fixed" au lieu de "absolute" pour rester toujours visible lors du défilement */
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 20px;
    padding-bottom: 20px;
}

.altitude-marker {
    width: 100%;
    text-align: right;
    padding-right: 10px;
    font-size: 16px;
    color: #000000;
    font-family: 'PPNeueMontreal-Bold', sans-serif;
    margin-top: auto;
    /* Pour pousser les éléments vers le bas */
}

.altitude-marker:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 2px;
    background-color: rgb(0, 0, 0);
    position: relative;
    top: -4px;
    margin-right: 5px;
}

.altitude-marker:last-child {
    text-align: left;
    padding-right: 0;
    padding-left: 5px;
}



.box {

    display: flex;
    overflow: hidden;
    width: 110px;
    height: 140px;
    border: 1px solid black;
    animation: moveRotateScale 1s ease-out forwards;
    background-image: url('/images/junko.jpg');
    /* Ajoutez l'image en arrière-plan */
    background-size: cover;
    animation-delay: 1s;
    transform: translateY(-80vw);
    transform: translateX(-80vw);
    position: absolute;
    top: -60%;
    /* Déplacer l'image verticalement vers le bas de 50 pixels */

}

@keyframes moveRotateScale {
    to {
        transform: translateY(-50%) translateX(-50%) scale(5);
        /* Déplacer l'image au centre */

    }
}

.box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Adapter l'image à la taille de la boîte en conservant les proportions */
}



#middle {
    position: absolute;
    top: 0;
    height: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}


.rectangle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* Evenly distributes space around items */
    align-items: center;
    height: 100%;
    width: 100%;
}




.text-middle {
    font-size: 14vw;
    width: 100vw;
    white-space: nowrap;
    /* Empêche le texte de passer à la ligne */
    text-align: center;
    /* Centre le texte horizontalement */
    z-index: 1;
    opacity: 0;
    animation: fadeInAnimation 2s ease-in-out forwards;
    font-family: 'ABCArizonaText-Medium-Trial', serif;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 5);
    /* mix-blend-mode: color-dodge; */
    background-color: rgb(255, 255, 255);
    border: 4px solid rgb(0, 0, 0);
    /* Rouge avec une opacité de 50% */
    color: rgb(0, 0, 0);
    /* Couleur de remplissage du texte */
    -webkit-text-stroke: 2px rgb(251, 251, 251);
    /* Contour */
    text-fill-color: transparent;
    text-shadow:
        0 0 5px rgb(255, 255, 255),
        /* Ombre pour le contour flou */
        0 0 10px rgb(255, 255, 255),
        /* Plus grande ombre pour un flou plus prononcé */
        0 0 15px rgb(255, 255, 255);
    /* Encore plus grande ombre pour un flou plus prononcé */
}


.text-middle:nth-child(1) {
    margin-top: 50%;
}

.text-middle:nth-child(2) {
    margin-top: 58%;
}

.text-middle:nth-child(3) {
    margin-top: 58%;
}

.text-middle:nth-child(4) {
    margin-top: 58%;
}

.text-middle:nth-child(5) {
    margin-top: 58%;
}

.text-middle:nth-child(6) {
    margin-top: 58%;
}

.text-middle:nth-child(7) {
    margin-top: 58%;
}

.erasable-text {
    font-size: 100px;
    color: rgb(0, 0, 0);
    z-index: 2;
    position: absolute;
    top: -300vh;
    left: 10vw;
    position: relative;
    overflow-clip-margin: content-box;
    overflow: clip;
    opacity: 1;
    animation: fadeIn 0.2s ease-in;
    font-family: 'PPNeueMontreal-Bold', sans-serif;

}

.opur {
    width: 10vw;
    z-index: 2;
    position: absolute;
    /* top: -250vh;
    left: 30vw;
    position: relative;
    overflow-clip-margin: content-box;
    overflow: clip;
    opacity: 1; */
    animation: fadeIn 0.2s ease-in;
    transform: rotate(10deg);
}







#oxygen-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin-top: -4vh;
}

.oxygene {
    font-size: 4vw;
    font-family: 'PPNeueMontreal-Bold', sans-serif;
    background-color: #ffffff;
    border: 3px solid rgb(0, 0, 0);
    border-radius: 10px;
    width: fit-content;
    height: fit-content;
    padding: 10px;
    opacity: 0;
    /* Initially hide the elements */
    transform: translateY(70px);
    /* Start with a slight offset */
    transition: opacity 2s ease-out, transform 2s ease-out;
}

.oxygene.visible {
    opacity: 2;
    /* Fade in */
    transform: translateY(0);
    /* Move to original position */
}

@keyframes scaleAnimation {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}



.oxygene-70 {
    margin-left: 20vw;
}

.oxygene-60 {
    margin-left: 20vw;
}

.oxygene-57 {
    margin-left: 20vw;
}

.oxygene-53 {
    margin-left: 20vw;
}

.oxygene-47 {
    margin-left: 20vw;
}

.oxygene-41 {
    margin-left: 20vw;
}

.oxygene-33 {
    margin-left: 20vw;
}



@media (max-width: 460px) {

    .oxygene-70 {
        margin-left: 30vw;
    }

    .oxygene-60 {
        margin-left: 30vw;
    }

    .oxygene-57 {
        margin-left: 30vw;
    }

    .oxygene-53 {
        margin-left: 30vw;
    }

    .oxygene-47 {
        margin-left: 30vw;
    }

    .oxygene-41 {
        margin-left: 30vw;
    }

    .oxygene-33 {
        margin-left: 30vw;
    }
}





#continent-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin-top: 5vh;
    /* Ensure initial elements are out of view for the animation */
}

.continent {
    font-size: 4vh;
    font-family: 'PPNeueMontreal-Bold', sans-serif;
    background-color: #ffffff;
    border: 3px solid rgb(0, 0, 0);
    border-radius: 10px;
    width: fit-content;
    height: fit-content;
    padding: 10px;
    opacity: 0;
    /* Initially hide the elements */
    transform: translateY(70px);
    /* Start with a slight offset */
    transition: opacity 2s ease-out, transform 2s ease-out;
    margin-left: 4vw;
}


.continent.visible {
    opacity: 1;
    /* Fade in */
    transform: translateX(0);
    /* Move to original position */
}

@keyframes scaleAnimation {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

/* Optional: Adding some margin to each continent for better spacing */
.continent-africa,
.continent-antarctica,
.continent-asia,
.continent-europe,
.continent-north-america,
.continent-australia,
.continent-south-america {
    margin-left: -60vw;
    /* Adjust the distance from the left edge here */
}




/* Media query for mobile devices (width < 480px) */
@media (max-width: 460px) {

    .continent-africa,
    .continent-antarctica,
    .continent-asia,
    .continent-europe,
    .continent-north-america,
    .continent-australia,
    .continent-south-america {
        margin-left: -50vw;
        /* Adjusted margin for mobile screens */

    }
}

*/
/* Media query for mobile devices (width < 480px) */
@media (max-width: 460px) {
    .continent {
        font-size: 3vw;
        /* Reduire la taille de la police pour les petits écrans */

        /* Réduire le padding pour économiser de l'espace */
    }
}

@media (max-width: 460px) {
    #continent-container {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        margin-top: 3vw;
        /* Ensure initial elements are out of view for the animation */
    }
}



.container-image {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}


/* Common styles for all images */
.junko-image,
.pioche-image,
.casque-image,
.drapeau-image,
.chapeau-image,
.smile-image {
    border: 3px solid rgb(0, 0, 0);
    border-radius: 10px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateX(100vw);
    transition: transform 5s ease-out, opacity 5s ease-out;
}

/* Individual image sizes */
.junko-image,
.pioche-image {
    width: 20vw;
    height: 28vw;
}

.casque-image {
    width: 22vw;
    height: 33vw;
}

.drapeau-image {
    width: 20vw;
    height: 27vw;
}

.chapeau-image {
    width: 18vw;
    height: 23vw;
}

.smile-image {
    width: 28vw;
    height: 23vw;
    transition: transform 1s ease-out, opacity 1s ease-out;
}

/* Container positions */
#container-junko {
    position: absolute;
    top: 30%;
    left: 20%;
}

#container-drapeau {
    position: absolute;
    top: 2%;
    left: 70%;
}

#container-chapeau {
    position: absolute;
    top: 75%;
    left: 70%;
}

#container-smile {
    position: absolute;
    top: 57%;
    left: 70%;
}

#container-pioche {
    position: absolute;
    top: 27%;
    left: 70%;
}

#container-casque {
    position: absolute;
    top: 71%;
    left: 10%;
}

/* Keyframes for animation */
@keyframes slideInFromRight {
    0% {
        transform: translateX(100vw);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Apply the animation to visible images */
.chapeau-image.visible,
.smile-image.visible,
.drapeau-image.visible,
.junko-image.visible,
.pioche-image.visible,
.casque-image.visible {
    animation: slideInFromRight 1s forwards;
}



/* Media queries for responsive design */
@media (max-width: 1200px) {

    .junko-image,
    .pioche-image,
    .casque-image,
    .drapeau-image,
    .chapeau-image,
    .smile-image {
        width: 25vw;
        height: auto;
    }
}

@media (max-width: 768px) {

    .junko-image,
    .pioche-image,
    .casque-image,
    .drapeau-image,
    .chapeau-image,
    .smile-image {
        width: 35vw;
        height: auto;
    }

    /* Adjust container positions for smaller screens */
    #container-junko {
        top: 20%;
        left: 10%;
    }

    #container-drapeau {
        top: 5%;
        left: 50%;
    }

    #container-chapeau {
        top: 70%;
        left: 50%;
    }

    #container-smile {
        top: 50%;
        left: 50%;
    }

    #container-pioche {
        top: 20%;
        left: 50%;
    }

    #container-casque {
        top: 70%;
        left: 5%;
    }
}

@media (max-width: 460px) {

    .junko-image,
    .pioche-image,
    .casque-image,
    .drapeau-image,
    .chapeau-image,
    .smile-image {
        width: 40vw;
        height: auto;
    }

    /* Adjust container positions for very small screens */
    #container-junko,
    #container-drapeau,
    #container-chapeau,
    #container-smile,
    #container-pioche,
    #container-casque {
        top: auto;
        left: 5%;
        right: 5%;
        bottom: auto;
    }

    #container-junko {
        top: 11%;
    }

    #container-drapeau {
        top: 2%;
    }

    #container-chapeau {
        top: 28%;
    }

    #container-smile {
        top: 40%;
    }

    #container-pioche {
        top: 56%;
    }

    #container-casque {
        top: 70%;
    }
}

.garbage {
    width: 18vw;
    z-index: 2;
    position: absolute;
    animation: fadeIn 0.2s ease-in;
    transform: rotate(10deg);
    transition: opacity 1s ease-in-out;
}

.garbage:hover {
    opacity: 0;
}

.garbage2 {
    width: 30vw;
    z-index: 2;
    position: absolute;
    animation: fadeIn 0.2s ease-in;
    transform: rotate(10deg);
    transition: opacity 1s ease-in-out;
}

.garbage2:hover {
    opacity: 0;
}



*/ */ @keyframes slideInFromRight {
    0% {
        transform: translateX(100vw);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;

    }
}





@keyframes slideInFromRight {
    0% {
        transform: translateX(100vw);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}




@media screen and (orientation:portrait) {

    .blur-image {
        transform: translate(-22%, 0%);
        width: 200%;
    }

    p {
        font-size: 1.5rem;
    }

    .scroll-container {
        height: 3.7rem;
    }

    .scroll-text {
        font-size: 3.6rem;
    }

    .continent {
        font-size: 1rem;
    }

}

.paragraph-text {
    position: absolute;
    top: 100vw;
    /* Ajustez cette valeur selon vos besoins */
    left: 2vw;
    /* Ajustez cette valeur selon vos besoins */

}

.paragraph-text p:nth-of-type(2) {
    /* Styles pour le deuxième paragraphe uniquement */
    /* Ajoutez vos styles de positionnement ici */
    margin-top: 150vw;
    margin-right: 3vw;
    /* Par exemple : déplace le paragraphe vers le bas de 20 pixels */
}

.paragraph-text p:nth-of-type(3) {
    /* Styles pour le deuxième paragraphe uniquement */
    /* Ajoutez vos styles de positionnement ici */
    margin-top: 70vw;
    margin-right: 3vw;
    /* Par exemple : déplace le paragraphe vers le bas de 20 pixels */
}

.paragraph-text p:nth-of-type(4) {
    /* Styles pour le deuxième paragraphe uniquement */
    /* Ajoutez vos styles de positionnement ici */
    margin-top: 150vw;
    margin-right: 3vw;
    /* Par exemple : déplace le paragraphe vers le bas de 20 pixels */
}






.paragraph-text {
    position: absolute;
    top: 200vw;
    /* Ajustez cette valeur selon vos besoins */
    left: 2vw;
    /* Ajustez cette valeur selon vos besoins */
}

.paragraph-text p:nth-of-type(2) {
    margin-top: 150vw;
    margin-right: 3vw;
}

.paragraph-text p:nth-of-type(3) {
    margin-top: 70vw;
    margin-right: 3vw;
}

.paragraph-text p:nth-of-type(4) {
    margin-top: 150vw;
    margin-right: 3vw;
}

/* Exemple de media query pour les écrans de moins de 600px de largeur */
@media (max-width: 460px) {
    .paragraph-text {
        top: 80vh;
        /* Ajustez cette valeur selon vos besoins */
        left: 5vw;
        margin-right: 5vw;
        /* Ajustez cette valeur selon vos besoins */
    }

    .paragraph-text p:nth-of-type(2) {
        margin-top: 145vh;
        /* Ajustez cette valeur selon vos besoins */
        margin-right: 5vw;
        margin-left: 5vw;
        /* Ajustez cette valeur selon vos besoins */
    }

    .paragraph-text p:nth-of-type(3) {
        margin-top: 62vh;
        /* Ajustez cette valeur selon vos besoins */
        margin-right: 5vw;
        /* Ajustez cette valeur selon vos besoins */
    }

    .paragraph-text p:nth-of-type(4) {
        margin-top: 150vh;
        /* Ajustez cette valeur selon vos besoins */
        margin-right: 5vw;
        /* Ajustez cette valeur selon vos besoins */
    }
}

/* Exemple de media query pour les écrans de plus de 1200px de largeur */
@media (min-width: 1200px) {
    .paragraph-text {
        top: 100vw;
        /* Ajustez cette valeur selon vos besoins */
        left: 1vw;
        /* Ajustez cette valeur selon vos besoins */
    }

    .paragraph-text p:nth-of-type(2) {
        margin-top: 150vw;
        /* Ajustez cette valeur selon vos besoins */
        margin-right: 2vw;
        /* Ajustez cette valeur selon vos besoins */
        margin-left: 2vw;
    }

    .paragraph-text p:nth-of-type(3) {
        margin-top: 70vw;
        /* Ajustez cette valeur selon vos besoins */
        margin-right: 2vw;
        margin-left: 2vw;
    }

    .paragraph-text p:nth-of-type(4) {
        margin-top: 150vw;
        /* Ajustez cette valeur selon vos besoins */
        margin-right: 2vw;
        /* Ajustez cette valeur selon vos besoins */
    }
}