* {
    font-family: Poppins, sans-serif,Poppins-SemiBold;
}

@media screen and (max-width: 768px) {
    /* La base */
    html, body {
        overflow: hidden;
    }

    body {
        background-color: #303030;
        height: 100%;
    }

    #welcome {
        padding-bottom: 0;
        color: goldenrod;
        text-align: center;
        font-weight: bold;
        font-size: 30px;
    }

    #subtitle {
        color: whitesmoke;
        text-align: center;
        font-weight: bold;
        font-size: 15px;
    }

    .subtitle2 {
        color: whitesmoke;
        text-align: center;
        font-weight: bold;
        font-size: 15px;
    }

    /* La zone de jeu */
    #limitgame > article{
        text-align: center;

    }

    /* Bouton de lancement du jeu */
    #launchgame {
        background-color: goldenrod;
        color: #303030;
        text-align: center;
        border-radius: 10px 10px 10px 10px;
        border-width: 4px;
        border-color: #303030;
        height: 60px;
        width: 340px;
        font-size: 30px;
        font-weight: bold;
        display: block;
        margin: auto;
        position: absolute;
        top: 40%;
        left: 20%;
    }

    #launchgame:hover {
        background-color: #303030;
        color: goldenrod;
        border-color: darkgreen;
    }

    #launchgame:active {
        transform: scale(0.9);
    }


    /*Bouton des Règles du jeu*/
    #show-modal-btn {
        background-color: goldenrod;
        color: #303030;
        text-align: center;
        border-radius: 10px 10px 10px 10px;
        border-width: 4px;
        border-color: #303030;
        height: 60px;
        width: 340px;
        font-size: 30px;
        font-weight: bold;
        display: block;
        margin: auto;
        position: absolute;
        top: 50%;
        left: 20%;
    }

    #show-modal-btn:hover {
        background-color: #303030;
        color: darkred;
        border-color: darkred;
    }

    #show-modal-btn:active {
        transform: scale(0.9);
    }


    /*css pop up Règles du jeu */
    #overlay {
        display: none;
        position: absolute;
        top: 50%;
        left: 20%;
        border-radius: 10px;
    }

    #modal2 {
        width: 340px;
        background-color: goldenrod;
        border-radius: 10px;
        text-align: center;
        color: white;
        font-weight: bold;
    }

    #modal2 img {
        width: 60px;
        margin-top: -25px;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    #modal2 h2 {
        font-size: 30px;
        font-weight: 800;
        margin: 30px 0 10px;
    }

    #close-modal-btn {
        width: 50%;
        margin-top: 20px;
        padding: 10px 0;
        background: #303030;
        border-color: goldenrod;
        border-width: 4px;
        color: goldenrod;
        font-size: 18px;
        border-radius: 10px;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
        font-weight: bold;
    }

    #close-modal-btn:hover {
        background: goldenrod;
        border-color: darkgreen;
        color: darkgreen;
        font-size: 18px;
        border-radius: 10px;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    }

    /* css pop up joueur récupère la clé */
    .heighter {
        height: 1200px;
    }

    .modal {
        display: none;
    }

    .modal-back {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .25)
    }

    .modal-container {
        position: fixed;
        top: 50%;
        left: 50%;
        padding: 25px;
        height: 50px;
        border-radius: 10px 10px 10px 10px;
        background-color: #03224C;
        color: whitesmoke;
        font-weight: bold;
        font-size: 17px;
        transform: translate(-50%, -50%);
        border-color: goldenrod;
    }

    #modal-close {
        text-align: center;
        color: goldenrod;
        text-decoration: none;
    }


    /* Css pop up du joueur qui essaye d'ouvrir le coffre sans la clé */
    .heighter-nokey {
        height: 1200px;
    }

    .modal-nokey {
        display: none;
    }

    .modal-back-nokey {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .25)
    }

    .modal-container-nokey {
        position: fixed;
        top: 50%;
        left: 50%;
        padding: 25px;
        height: 50px;
        border-radius: 10px 10px 10px 10px;
        background-color: darkred;
        color: whitesmoke;
        font-weight: bold;
        font-size: 17px;
        transform: translate(-50%, -50%);
        border-color: goldenrod;
    }

    #modal-close-nokey {
        text-align: center;
        color: goldenrod;
        text-decoration: none;
    }


    /* css pop up joueur perd une vie */
    .heighter-life {
        height: 1200px;
    }

    .modal-life {
        display: none;
    }

    .modal-back-life {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .25)
    }

    .modal-container-life {
        position: fixed;
        top: 50%;
        left: 50%;
        padding: 25px;
        height: 50px;
        border-radius: 10px 10px 10px 10px;
        background: darkred;
        color: whitesmoke;
        font-weight: bold;
        font-size: 17px;
        transform: translate(-50%, -50%);
        border-color: goldenrod;
    }

    #modal-close-life {
        text-align: center;
        color: whitesmoke;
        text-decoration: none;
        font-weight: bold;
    }


    /* css pop-up Game Over */
    .heighter-gameover {
        height: 1200px;
    }

    #gameover {
        display: none;
    }

    .modal-back-gameover {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .25)
    }

    .modal-container-gameover {
        text-align: center;
        position: fixed;
        top: 50%;
        left: 50%;
        padding: 20px;
        width: 25%;
        border-radius: 10px 10px 10px 10px;
        background: darkred;
        font-weight: bold;
        transform: translate(-50%, -50%);
        border-color: goldenrod;
    }

    #modal-close-relance {
        width: 150px;
        height: 40px;
        text-align: center;
        background-color: darkred;
        color: goldenrod;
        text-decoration: none;
        border-radius: 6px;
        border-color: goldenrod;
        border-width: 3px;
        font-weight: bold;
    }

    #modal-close-relance:hover {
        background-color: goldenrod;
        color: darkred;
        border-color: darkred;
    }

    #modal-close-retourmenu {
        width: 150px;
        height: 40px;
        text-align: center;
        background-color: darkred;
        color: goldenrod;
        border-color: goldenrod;
        border-radius: 6px;
        border-width: 3px;
        font-weight: bold;
    }

    #modal-close-retourmenu:hover {
        background-color: goldenrod;
        color: darkred;
        border-color: darkred;
    }

    p.GameOver {
        font-size: 40px;
        color: goldenrod;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 15px
    }

    p {
        font-size: 17px;
        color: whitesmoke;
    }


    /* css pop up de la Victoire */
    .heighter-victoire {
        height: 1200px;
    }

    #victoire {
        display: none;
    }

    .modal-back-victoire {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .25)
    }

    .modal-container-victoire {
        text-align: center;
        position: fixed;
        top: 50%;
        left: 50%;
        padding: 20px;
        width: 25%;
        border-radius: 10px 10px 10px 10px;
        background: #03224C;
        font-weight: bold;
        transform: translate(-50%, -50%);
        border-color: goldenrod;
    }

    #modal-close-retourmenu-victoire {
        width: 150px;
        height: 40px;
        text-align: center;
        background-color: #03224C;
        color: goldenrod;
        border-color: goldenrod;
        border-radius: 6px;
        border-width: 3px;
        font-weight: bold;
    }

    #modal-close-retourmenu-victoire:hover {
        background-color: goldenrod;
        color: #03224C;
        border-color: #03224C;
    }

    p.victoire {
        font-size: 40px;
        color: goldenrod;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 15px
    }

    p {
        font-size: 11px;
        color: whitesmoke;
    }
}

/*----------------------------------------------------*/
/* Fin partie mobile 768 */
/*----------------------------------------------------*/


/*----------------------------------------------------*/
/* Début partie desktop */
/*----------------------------------------------------*/

@media screen and (min-width: 768px) {

    /* La base */
    html, body {
        overflow: hidden;
    }

    body {
        background-color: #03224C;
        height: 100%;
    }

    #welcome {
        padding-bottom: 0;
        color: goldenrod;
        text-align: center;
        font-weight: bold;
        font-size: 50px;
    }

    #subtitle {
        color: whitesmoke;
        text-align: center;
        font-weight: bold;
        font-size: 25px;
    }

    .subtitle2 {
        color: whitesmoke;
        text-align: center;
        font-weight: bold;
        font-size: 25px;
    }

    /* La zone de jeu */
    #limitgame > article{
      text-align: center;
    }

    /* Bouton de lancement du jeu */
    #launchgame {
        background-color: goldenrod;
        color: #03224C;
        text-align: center;
        border-radius: 10px 10px 10px 10px;
        border-width: 4px;
        border-color: #03224C;
        height: 100px;
        width: 400px;
        font-size: 50px;
        font-weight: bold;
        display: block;
        margin: auto;
        position: absolute;
        top: 35%;
        left: 20%;
    }

    #launchgame:hover {
        background-color: #03224C;
        color: goldenrod;
        border-color: goldenrod;
    }

    #launchgame:active {
        transform: scale(0.9);
    }


    /*Bouton des Règles du jeu*/
    #show-modal-btn {
        background-color: goldenrod;
        color: #03224C;
        text-align: center;
        border-radius: 10px 10px 10px 10px;
        border-width: 4px;
        border-color: #03224C;
        height: 100px;
        width: 400px;
        font-size: 50px;
        font-weight: bold;
        display: block;
        margin: auto;
        position: absolute;
        top: 35%;
        right: 20%;
    }

    #show-modal-btn:hover {
        background-color: #03224C;
        color: goldenrod;
        border-color: goldenrod;
    }

    #show-modal-btn:active {
        transform: scale(0.9);
    }


    /*css pop up Règles du jeu */
    #overlay {
        display: none;
        position: absolute;
        top: 35%;
        right: 20%;
        border-radius: 10px;
    }

    #modal2 {
        width: 400px;
        background-color: goldenrod;
        border-radius: 10px;
        text-align: center;
        color: white;
        font-weight: bold;
    }

    #modal2 img {
        width: 100px;
        margin-top: -50px;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    #modal2 h2 {
        font-size: 38px;
        font-weight: bold;
        margin: 30px 0 10px;
    }

    #close-modal-btn {

        width: 50%;
        padding: 10px 0;
        margin-bottom: 10px;
        background: #03224C;
        border-color: goldenrod;
        border-width: 4px;
        color: goldenrod;
        font-size: 18px;
        font-weight:bold ;
        border-radius: 10px;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    }

    #close-modal-btn:hover {
        background: goldenrod;
        border-color: #03224C;
        color: #03224C;
        font-size: 18px;
        border-radius: 10px;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    }


    /* css pop up joueur récupère la clé */
    .heighter {
        height: 3000px;
    }

    .modal {
        display: none;
    }

    .modal-back {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .25)
    }

    .modal-container {
        position: fixed;
        top: 50%;
        left: 50%;
        padding: 25px;
        height: 50px;
        border-radius: 10px 10px 10px 10px;
        background-color: #03224C;
        color: whitesmoke;
        font-weight: bold;
        font-size: larger;
        transform: translate(-50%, -50%);
        border-color: goldenrod;
    }

    #modal-close {
        text-align: center;
        color: goldenrod;
        text-decoration: none;
    }


    /* Css pop up du joueur qui essaye d'ouvrir le coffre sans la clé */
    .heighter-nokey {
        height: 3000px;
    }

    .modal-nokey {
        display: none;
    }

    .modal-back-nokey {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .25)
    }

    .modal-container-nokey {
        position: fixed;
        top: 50%;
        left: 50%;
        padding: 25px;
        height: 50px;
        border-radius: 10px 10px 10px 10px;
        background-color: darkred;
        color: whitesmoke;
        font-weight: bold;
        font-size: larger;
        transform: translate(-50%, -50%);
        border-color: goldenrod;
    }

    #modal-close-nokey {
        text-align: center;
        color: goldenrod;
        text-decoration: none;
    }


    /* css pop up joueur perd une vie */
    .heighter-life {
        height: 3000px;
    }

    .modal-life {
        display: none;
    }

    .modal-back-life {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .25)
    }

    .modal-container-life {
        position: fixed;
        top: 50%;
        left: 50%;
        padding: 25px;
        height: 50px;
        border-radius: 10px 10px 10px 10px;
        background: darkred;
        color: whitesmoke;
        font-weight: bold;
        font-size: larger;
        transform: translate(-50%, -50%);
        border-color: goldenrod;
    }

    #modal-close-life {
        text-align: center;
        color: whitesmoke;
        text-decoration: none;
        font-weight: bold;
    }


    /* css pop-up Game Over */
    .heighter-gameover {
        height: 3000px;
    }

    #gameover {
        display: none;
    }

    .modal-back-gameover {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .25)
    }

    .modal-container-gameover {
        text-align: center;
        position: fixed;
        top: 50%;
        left: 50%;
        padding: 20px;
        width: 25%;
        border-radius: 10px 10px 10px 10px;
        background: darkred;
        font-weight: bold;
        transform: translate(-50%, -50%);
        border-color: goldenrod;
    }

    #modal-close-relance {
        width: 150px;
        height: 40px;
        text-align: center;
        background-color: darkred;
        color: goldenrod;
        text-decoration: none;
        border-radius: 6px;
        border-color: goldenrod;
        border-width: 3px;
        font-weight: bold;
    }

    #modal-close-relance:hover {
        background-color: goldenrod;
        color: darkred;
        border-color: darkred;
    }

    #modal-close-retourmenu {
        width: 150px;
        height: 40px;
        text-align: center;
        background-color: darkred;
        color: goldenrod;
        border-color: goldenrod;
        border-radius: 6px;
        border-width: 3px;
        font-weight: bold;
    }

    #modal-close-retourmenu:hover {
        background-color: goldenrod;
        color: darkred;
        border-color: darkred;
    }

    p.GameOver {
        font-size: 40px;
        color: goldenrod;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 15px
    }

    p {
        font-size: 17px;
        color: whitesmoke;
    }


    /* css pop up de la Victoire */
    .heighter-victoire {
        height: 3000px;
    }

    #victoire {
        display: none;
    }

    .modal-back-victoire {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .25)
    }

    .modal-container-victoire {
        text-align: center;
        position: fixed;
        top: 50%;
        left: 50%;
        padding: 20px;
        width: 25%;
        border-radius: 10px 10px 10px 10px;
        background: #03224C;
        font-weight: bold;
        transform: translate(-50%, -50%);
        border-color: goldenrod;
    }

    #modal-close-retourmenu-victoire {
        width: 150px;
        height: 40px;
        text-align: center;
        background-color: #03224C;
        color: goldenrod;
        border-color: goldenrod;
        border-radius: 6px;
        border-width: 3px;
        font-weight: bold;
    }

    #modal-close-retourmenu-victoire:hover {
        background-color: goldenrod;
        color: #03224C;
        border-color: #03224C;
    }

    p.victoire {
        font-size: 40px;
        color: goldenrod;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 15px
    }

    p {
        font-size: 17px;
        color: whitesmoke;
    }
}