header {
    background-image: url(../les_autistes/PHOTO-2023-09-03-tarik-dahmani-qui\ mange-chocolat\ copie.jpg);

    margin: 0;
    background-position: center center;
    border-radius: 0 0 30px 30px;

    padding-bottom: 100px;
    list-style-type: none;
    text-align: center;
    text-decoration: none;
    margin-top: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-position 0.3s ease;
    /* Smooth transition for position change */
}

.vas {
    opacity: 0;
}

.vas:hover {
    opacity: 100;
}


body {
    padding: 0;
    margin: 0;
    background-color: hsl(190, 95%, 77%);
    font-family: Arial, Helvetica, sans-serif;
    cursor: url('../les_autistes/cursor_audin.png')16 16, auto;
}


/* Styles pour le bloc leader */
.leader {
    text-align: center;
    /* Centrer le titre */
    margin-bottom: 20px;
    /* Ajouter de l'espace sous le titre */
    background-color: #333;
    /* Couleur de fond du bloc */
    padding: 20px;
    /* Espacement à l'intérieur du bloc */
    border-radius: 10px;
    /* Coins arrondis */
}

h1 {

    padding-top: 119px;
    margin: 0;
    font-size: 36px;
    /* Taille du texte du titre */
    color: #fff;
    /* Couleur du texte */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    /* Effet de lueur */
    animation: changeGlowColor 3s infinite alternate;
    /* Animation de la lueur */
}

header h1 {
    margin: 0;
    text-align: left;
    padding-right: 00px;
}

header a:hover {
    background-color: hsl(190, 32%, 55%);
}

header li {
    padding: 0px;
    margin-bottom: 20px;
}

header ul {
    padding-top: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    float: right;
}

/* Styles existants pour les liens du menu */
header a {
    background-color: hsl(190, 95%, 77%);
    padding: 10px;
    text-decoration: none;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #000000;


}




h1 {

    font-size: 100px;
    font-weight: bold;
    color: #fff;
    /* Couleur du texte */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    /* Effet de lueur */
    animation: changeGlowColor 3s;
}

@keyframes changeGlowColor {

    0% {
        text-shadow: 0 0 10px rgb(255, 0, 0);
        color: #ff0000;
    }


    14.29% {
        text-shadow: 0 0 10px rgb(255, 0, 0);
        color: #ff0000;
    }

    28.58% {
        text-shadow: 0 0 10px rgb(255, 247, 0);
        color: #ffff2c;
    }

    42.87% {
        text-shadow: 0 0 10px rgb(38, 255, 0);
        color: #04ff00;
    }

    57.16% {
        text-shadow: 0 0 10px rgb(0, 255, 200);
        color: #00ff62;
    }

    71.45% {
        text-shadow: 0 0 10px rgb(0, 8, 255);
        color: #000dff;
    }

    85.74% {
        text-shadow: 0 0 10px rgb(136, 0, 255);
        color: #b300ff;
    }

    100% {
        text-shadow: 0 0 10px rgb(255, 0, 153);
        color: #ff00ea;
    }




    /* Nouvelle couleur du texte */
}


.audin a {
    padding: 0;
    margin: 0;
    color: #ff0000;
    color: #0077cc;
    /* Couleur du lien non visité */

}

div.letes p {
    color: hsl(190, 95%, 77%);
    ;
    font-size: 14px;
}

div.letes p:hover {
    color: #000000;
    transition: 0.5s ease;
}

a.audin:hover {
    background-color: #b76aff;
    /* Ajoute une soulignement au survol */
    transition: 0.5s ease;

}

.pk {
    max-width: 500px;
    margin: auto;
    text-align: center;
}

.au::after {
    content: "AAHHHAAA!!!!";
    font-size: 14px;
    text-align: top;
}

.au {

    width: 10px;


    position: relative;
    animation: au 0.5s linear infinite;
    /* 5s duration, linear timing function, infinite loop */

}



/* Container for the game */
#game-container {
    position: relative;
    width: 100%;
    height: 200px;
    /* Adjust height as needed */
}

/* Image element style */
.idAU {
    position: absolute;
    left: 0;
    transition: 100s;
    /* Smooth transition */
}

/* Animation when the 'au' class is active */
.au {
    animation: moveRight 100ms infinite alternate;
    /* Animation alternates left to right */
}

/* Keyframes for the movement from left to right */
@keyframes moveRight {
    0% {
        left: 0;
    }

    100% {
        left: calc(100% - 100px);
        /* 100% width minus image width */
    }


}

footer {
    margin-top: 60px;
    padding: 10px;
    animation: changeGlowBack 3s infinite alternate;
}

footer a {
    animation: changeGlowBack 3s infinite alternate;
    text-decoration: none;

}

footer.retour {
    margin-top: 100px;
    font-size: 40px;
    text-align: center;

}

@keyframes changeGlowBack {
    0% {
        background-color: rgb(255, 0, 0);
        color: white;
    }

    10% {
        background-color: rgb(255, 183, 0);
        color: rgb(0, 0, 0);
    }

    20% {
        background-color: rgb(94, 255, 0);
        color: rgb(0, 0, 0);
    }

    30% {
        background-color: rgb(0, 255, 132);
        color: rgb(0, 0, 0);
    }

    40% {
        background-color: rgb(0, 115, 255);
    }

    50% {
        background-color: rgb(8, 0, 255);
        color: white;
    }

    60% {
        background-color: rgb(123, 0, 255);
        color: white;
    }

    70% {
        background-color: rgb(255, 0, 183);
        color: white;
    }

    /* Nouvelle couleur du texte */
}


/* Finished state style */
.fin {
    display: none;
}

a.logo {
    float: left;
    width: 160px;
    border-radius: 0 0 2em;
    background-color: hsl(190, 95%, 77%);
}

/*williamine start!!!!!!!!*/

header.lewill {
    background-image: url(../les_autistes/IMG_5802copie.jpg);

    margin: 0;
    background-position: center center;
    border-radius: 0 0 30px 30px;

    padding-bottom: 100px;
    list-style-type: none;
    text-align: center;
    text-decoration: none;
    margin-top: 0px;
    background-repeat: no-repeat;
    background-size: cover;

    /* Smooth transition for position change */
}

body.willi {
    padding: 0;
    margin: 0;
    background-color: hsl(133, 26%, 56%);
    font-family: Arial, Helvetica, sans-serif;
    cursor: url('../les_autistes/cursor_audin.png')16 16, auto;
}

a.logowill {
    float: left;
    width: 160px;
    border-radius: 0 0 2em;
    background-color: hsl(133, 26%, 56%);
}

.leader {
    text-align: center;
    /* Centrer le titre */
    margin-bottom: 20px;
    /* Ajouter de l'espace sous le titre */
    background-color: #333;
    /* Couleur de fond du bloc */
    padding: 20px;
    /* Espacement à l'intérieur du bloc */
    border-radius: 10px;
    /* Coins arrondis */
}

h1 {
    padding-top: 119px;
    margin: 0;
    font-size: 36px;
    /* Taille du texte du titre */
    color: #fff;
    /* Couleur du texte */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    /* Effet de lueur */
    animation: changeGlowColor 3s infinite alternate;
    /* Animation de la lueur */
}

header h1.williamine {
    margin: 0;
    text-align: left;
    padding-right: 500px;
}

header a:hover {
    background-color: hsl(190, 32%, 55%);
}

header li {
    padding: 0px;
    margin-bottom: 20px;
}

header ul {
    padding-top: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    float: right;
}

/* Styles existants pour les liens du menu */
header a {
    background-color: hsl(190, 95%, 77%);
    padding: 10px;
    text-decoration: none;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #000000;


}




h1 {

    font-size: 100px;
    font-weight: bold;
    color: #fff;
    /* Couleur du texte */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    /* Effet de lueur */
    animation: changeGlowColor 4s infinite ease-in-out alternate;
}

header li {
    padding: 0px;
    margin-bottom: 20px;
}

header nav.wutr ul {
    padding-top: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    float: right;
}

/* Styles existants pour les liens du menu */
header nav.wutr a {
    background-color: hsl(133, 26%, 56%);
    padding: 10px;
    text-decoration: none;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #000000;

}

header nav.wutr a:hover {
    background-color: hsl(132, 20%, 35%);
}

h2 {
    padding-top: 20px;
    text-align: center;
}

h3 {
    padding-top: 20px;
    text-align: center;
}

p.willwut {
    margin: 0 20px;
    font-size: 21px;

}

p.willwut a {

    text-decoration: none;

    animation: LinkPuls 1s infinite alternate ease-in-out;
}

@keyframes changeSize {
    0% {
        padding: 0 1% 0 1%;
        font-size: 15px;
        margin-bottom: 100px;
    }

    100% {
        padding: 1%;
        font-size: 18px;
        margin-bottom: 78.895px;
    }

}

@keyframes LinkPuls {
    0% {
        color: #000000;
    }

    100% {
        text-shadow: 0 0 10px #211473;
        color: #211473;
    }

}

a.wilbut {
    animation: changeSize 1s infinite ease-in-out alternate;

    text-align: left;
    background-color: hsl(132, 20%, 35%);
    color: #fff;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    /* Adapts to 80% of the parent width */
    max-width: 1200px;
    min-width: 30px;
    margin: auto;

}

a.wilbut:hover {
    background-color: hsl(133, 36%, 57%);
    transition: 0.2s ease-in-out;
}

video {
    max-width: 100%;
    /* Makes the video responsive */
    height: auto;
    /* Maintains aspect ratio */
    width: 30%;
    /* Adapts to 80% of the parent width */

    max-width: 1200px;
    min-width: 300px;
    margin: auto;
    float: right;
    margin: 0 50px 50px 50px;
}

button {

    margin: auto;
    display: block;
    font-family: Verdana, sans-serif;
    font-size: 20px;
    margin-top: 30px;
    width: 300px;
    height: 50px;
    border-radius: 10px;
    border: hsl(135, 16%, 42%) outset 5px;
    background-color: hsl(132, 20%, 35%);
    color: #fff;
}

button:active {
    background-color: hsl(134, 19%, 23%);
    border: hsl(134, 19%, 44%) inset 5px;
}

.box {
    width: 50px;
    height: 50px;
    transform: translateX(10px) translateY(-1030px);


}

.blok {
    background: center url(../les_autistes/AWFZ8879.PNG);
    background-size: cover;
    opacity: 20%;
}

.blok:hover {
    opacity: 100;
    transition: 0.3s ease-in-out;
}

header.aud {
    background-image: url(../les_autistes/audinwek.JPG);

    margin: 0;
    background-position: center;
    border-radius: 0 0 30px 30px;

    padding-bottom: 100px;
    list-style-type: none;
    text-align: center;
    text-decoration: none;
    margin-top: 0px;
    background-repeat: no-repeat;
    background-size: cover;

    /* Smooth transition for position change */
}

a.audi {
    background-color: #e95b5b;
}

.wow {
    background-color: #e95b5b;
}

a.kap {
    background-color: #e95b5b;
}

a.kap:hover {
    background-color: #a13e3e;
}