/* styles.css */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}



.presentation {
    position: fixed;
    top: 55%; /* Positionne le contenu au milieu de la page en hauteur */
    left: 20%; /* Positionne le contenu à 20% du côté gauche */
    /*transform: translateY(-50%); /* Centre verticalement le contenu */
    color: white; /* Couleur du texte, ajustez selon le fond */
    z-index: 2; /* Assurez-vous que le contenu soit au-dessus de la vidéo */
}


.presentation h1 {
    font-size: 3em;
    margin-bottom: 0;

}

.presentation p {
    font-size: 2em;
    margin-top: 1%;
    margin-bottom: 4%;

}


.presentation > button{
    all: unset; /* Réinitialise toutes les propriétés CSS */
    display: inline-block; /* Pour que le bouton se comporte comme un bouton */

    padding : 4% 8%;
    border : 1px solid white;
    border-radius: 3px; /* Ajoute des coins arrondis */

}


.presentation > button:hover{
    background-color: white;
    color: black;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Ajoute une transition douce */

}

.video-background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.video-background iframe {
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}


/*         TABLETTES            */


/* Pour les tablettes (écrans entre 768px et 1024px) */
@media only screen and (max-width: 1024px) {
    body {
        width: 90%;
        font-size: 15px;
    }
}


/*         SMARTPHONES            */


/* Pour les smartphones (écrans de moins de 768px) */
@media only screen and (max-width: 768px) {
    body {
        width: 100%;
        font-size: 14px;
        padding: 10px;
    }
}