@charset "UTF-8";

@font-face {
    font-family: Ginto;
    src: url(../fonts/ABCGintoRounded-Regular-Trial.woff) format('woff');
}

@font-face {
    font-family: Ginto gras;
    src: url(../fonts/ABCGintoRounded-Black-Trial.woff) format('woff');
}

body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

html,
body {
    padding-left: 0px;
    margin-left: 0;
}


body {
    /* Styles CSS */
    font-family: Ginto;
}


.grid-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(60, 1fr);
    grid-gap: 20px;
    overflow-y: auto;
    height: 100vh;
    grid-auto-rows: minmax(100px, auto);
}

.title {
    grid-column: 1 / span 3;
    grid-row: 1;
    text-align: center;
    font-size: 5rem;
    font-weight: bolder;
    font-family: Ginto gras
}

.button-container {
    grid-column: 1 / span 3;
    grid-row: 2;
    display: flex;
    justify-content: center;
}

.button {
    grid-column: 1;
    grid-row: 2;
    font-size: 2rem;
    color: white;
    border-radius: 5rem;
    background-color: black;
    border: 0.5rem solid black;
    text-align: center;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;

}

.empty-row {
    grid-column: 1;
    grid-row: 4;
    background-color: white;
    color: white;
    font-size: 40rem;
    min-height: 40vh;
}

.target {
    grid-column: 2;
    grid-row: 13;
    font-size: 2rem;
    color: white;
    border-radius: 5rem;
    background-color: black;
    border-radius: 5rem;
    border: 0.5rem solid black;
    text-align: center;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;
}

.target:hover {
    font-size: 2.5rem;
}

.salut {
    grid-column: 1 / span 3;
    grid-row: 14;
    text-align: left;
    font-size: 2rem;
    color: black;
    padding: 10px;
}


.liste-container {
    grid-column: 1/ span 2;
    grid-row: 15;
}

.liste {
    grid-row: 15;
    text-align: left;
    font-size: 1.5rem;
    animation-name: animate-key;
    animation-duration: 15s;
    animation-iteration-count: infinite;
}

.exemple {
    grid-column: 1/ span 3;
    grid-row: 16;
    font-size: 2rem;
    text-align: left;
}

.Nina {
    grid-column: 1;
    grid-row: 18;
    font-size: 2rem;
    text-align: center;
    position: sticky;
    top: 0;
    font-weight: bold;
    font-family: Ginto gras;
}

.message {
    grid-column: 1/span 3;
    grid-row: 17;
    font-size: 2rem;
    color: black;
    text-align: left;
}

.Bob {
    grid-column: 3;
    grid-row: 18;
    font-size: 2rem;
    text-align: center;
    position: sticky;
    top: 0;
    font-weight: bold;
    font-family: Ginto gras;
}

.Smileynina {
    grid-column: 1;
    grid-row: 19;
    position: sticky;
    top: 30px;
    z-index: 1;
}


.joyeuxnoel {
    grid-column: 2;
    grid-row: 19;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.Smileybob {
    grid-column: 3;
    grid-row: 19;
    position: sticky;
    top: 30px;
    z-index: 1;
}


.comment {
    grid-column: 1/span 3;
    grid-row: 20;
    font-size: 2rem;
    text-align: left;

}


.Bobpossède {
    grid-column: 3;
    grid-row: 21;
    font-size: 2rem;
}

.clépriv {
    grid-column: 3;
    grid-row: 22;
    font-size: 1.5rem;
    height: fit-content;
    width: 100%;
    text-align: center;
}


.cléprivé {
    grid-column: 3;
    grid-row: 23;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clépubli {
    grid-column: 3;
    grid-row: 24;
    font-size: 1.5rem;
    height: fit-content;
    width: 100%;
    text-align: center;
}

.clépublique {
    grid-column: 3;
    grid-row: 25;
    width: 85%;
    display: flex;
    transition: grid-column 0.5s ease;
    cursor: pointer;
}

.clépublique:hover {
    opacity: 0.5;
}

.clépublique.move {
    animation: moveLeft 5s linear;
}


.chapitre1 {
    grid-column: 1;
    grid-row: 27;
    font-size: 10rem;
    font-weight: bold;
    text-align: right;
    justify-content: center;
    align-items: center;
}

.envoie {
    grid-column: 2/ span 2;
    grid-row: 27;
    font-size: 2rem;
    color: black;
    border-radius: 5rem;
    border: 0.6vw solid black;
    text-align: center;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;
}

.chapitre2 {
    grid-column: 1;
    grid-row: 28;
    font-size: 10rem;
    font-weight: bold;
    text-align: right;
}

.utilise {
    grid-column: 2/ span 2;
    grid-row: 28;
    font-size: 2rem;
    color: white;
    border-radius: 5rem;
    text-align: center;
    background-color: black;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;

}

.chiffrage {
    grid-column: 1;
    grid-row: 29;
    width: 95%;
    transition: transform 0.5s ease;
}

.chiffrage:hover {
    opacity: 0.5;
}

.chiffrage img:hover {
    cursor: pointer;
}

.cadenas-ferme {
    display: none;
}

#cadenas-toggle:checked+label .cadenas-ferme {
    display: block;
}

#cadenas-toggle:checked+label img:first-child {
    display: none;
}

#cadenas-toggle:checked+label img:last-child {
    display: inline-block;
    /* Affichez l'image du cadenas fermé */
    transform: translateX(100%);
    /* Déplacez l'image vers la droite */
}


.message2 {
    grid-column: 2;
    grid-row: 29;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    width: 100%;
}

/* .rouage {
    grid-column: 2;
    grid-row: 28;
    height: max-content;
    animation: rotation 5s linear infinite;
} */


.chapitre3 {
    grid-column: 1;
    grid-row: 30;
    font-size: 10rem;
    font-weight: bold;
    text-align: right;
}

.pouvoir {
    grid-column: 2/ span 2;
    grid-row: 30;
    font-size: 2rem;
    color: white;
    border-radius: 5rem;
    text-align: center;
    background-color: black;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;
}


.messagechiffré {
    grid-column: 2;
    grid-row: 31;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.messageenvoyer {
    grid-column: 2;
    grid-row: 31;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    width: 100%;
}

.déchiffrage {
    grid-column: 3;
    grid-row: 31;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 100px;
    cursor: pointer;
}

.déchiffrage:hover {
    opacity: 0.5;
}

.déchiffrage.move2 {
    animation: move2Left 5s linear;
}



.chapitre4 {
    grid-column: 1;
    grid-row: 32;
    font-size: 10rem;
    font-weight: bold;
    text-align: right;
}

.liremessage {
    grid-column: 2/ span 2;
    grid-row: 32;
    font-size: 2rem;
    border-radius: 5rem;
    border: 0.6vw solid black;
    text-align: center;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;
}

.voila {
    grid-column: 1 / span 2;
    grid-row: 33;
    font-size: 2rem;
}

.final {
    grid-column: 1 / span 3;
    grid-row: 34;
    position: relative;
    width: 100%;
}


.étoiles {
    grid-column: 1 / span 3;
    grid-row: 34;
    font-size: 5rem;
    text-align: center;
    animation: moveStars 5s infinite linear;
    position: relative;
    width: 100%;
}


.Shafi {
    grid-column: 1/span 3;
    grid-row: 35;
    font-size: 2rem;
    text-align: left;
}

a {
    color: inherit;
    text-decoration: underline;
    display: contents;
    font-size: inherit;
    font-weight: bold;
}


@keyframes animate-key {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(100%, 0%);

    }
}

@keyframes moveLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-200%);
    }
}

@keyframes move2Left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-70%);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
        /* Rotation initiale */
    }

    to {
        transform: rotate(360deg);
        /* Rotation complète */
    }
}



@media screen and (max-width:800px) {

    .grid-container {
        grid-template-columns: 1fr;
    }
}

@keyframes moveStars {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-100px) translateY(-100px);
    }

    50% {
        transform: translateX(-200px);
    }

    75% {
        transform: translateX(-100px) translateY(50px);
    }

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