*, * {
    padding: 0;
    margin: 0;
}
html {
    background-color: rgb(49, 49, 49);
    box-shadow: inset 0 -1em 3em 1em rgba(51, 0, 255, 0.5);
    height: 100%;
    width: 100%;
    transition: all 5s ease-out;
    animation: test 20s ease-in-out infinite;
}
@keyframes test {
    25% { box-shadow: inset 0 -1em 3em 1em rgba(34, 255, 0, 0.5);}
    50% {box-shadow: inset 0 -1em 3em 1em rgba(255, 196, 0, 0.5);}
    75% { box-shadow: inset 0 -1em 3em 1em rgba(255, 0, 0, 0.5);}
    100%{box-shadow: inset 0 -1em 3em 1em rgba(51, 0, 255, 0.5);}
}
a {
    text-decoration: none;
    font-size: 110%;
    color: white;
}
p {
    color: red;
    display: inline;
}
#conec {
    background-color: rgba(255, 0, 0, 0.174);
    color: rgb(118, 118, 118);
}
.connecte {
    position: absolute;
    width: 100%;
    text-align: center;
}
.deco:hover {
    cursor: pointer;
}
.butdeco {
    display: flex;
    justify-content: center;
}
.deco {
    background-color: rgba(95, 158, 160, 0.622);
    text-align: center;
    margin-top: 2vh;
}
header {
    letter-spacing: 5px;
    text-align: center;
    height: 20%;
    font-size: 1100%;
    background: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(49, 49, 49) 56%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 1.5%;
}
.backconnexion {
    width: 100%;
    display: none;
    height: 200%;
    margin-top: -50vh;
    background-color: rgba(49, 49, 49, 0.85);
    position: fixed;
    z-index: 2;
}
.connexion {
    width: 25%;
    margin-left: 37.5%;
    font-size: 200%;
    margin-top: -3vw;
    text-align: center;
    background: -webkit-linear-gradient(-90deg, rgb(170, 170, 170) 0%, rgb(49, 49, 49) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.connexion:hover {
    cursor: pointer;
}
section {
    width: 100%;
    height: 40%;
}
article {
    color: white;
    margin-top: 10vh;
    text-align: center;
}
.Attention {
    margin-left: 30%;
    width: 40%;
    padding: 7px;
    margin-top: 4%;
    font-size: 75%;
    border-radius: 20px;
    border: 1px solid black;
    box-shadow: inset 0 0em 2.5em 1em rgb(186, 180, 0);
}
.choix {
    margin-top: 1%;
    margin-left: 45%;
    padding: 5px;
    border-radius: 10px;
    width: 10%;
    text-align: center;
    transition: all 0.6s ease-out;
}
#facile {
    margin-top: 5%;
    border: 1px solid rgb(55, 255, 0);
    background-color: rgb(0, 153, 0);
    box-shadow: inset 0 0em 0.7em 0.5em rgb(55, 255, 0);
}
#facile:hover {
    box-shadow: inset 0 0em 0.7em 0.5em rgb(55, 255, 0), 0 0em 0.7em 0.5em rgb(55, 255, 0);
    cursor: pointer;
}
#normal {
    margin-top: 1%;
    border: 1px solid rgb(246, 255, 0);
    background-color: rgb(153, 138, 0);
    box-shadow: inset 0 0em 0.7em 0.5em rgb(246, 255, 0);
}
#normal:hover {
    box-shadow: inset 0 0em 0.7em 0.5em rgb(246, 255, 0), 0 0em 0.7em 0.5em rgb(246, 255, 0);
    cursor: pointer;
}
#difficile {
    margin-top: 1%;
    border: 1px solid rgb(255, 0, 0);
    background-color: rgb(148, 0, 0);
    box-shadow: inset 0 0em 0.7em 0.3em rgb(255, 0, 0);
}
#difficile:hover {
    box-shadow: inset 0 0em 0.7em 0.3em rgb(255, 0, 0), 0 0em 0.7em 0.5em rgb(255, 0, 0);
    cursor: pointer;
}
#historique {
    margin-top: 3%;
    border: 1px solid rgb(0, 94, 255);
    background-color: rgb(0, 37, 148);
    box-shadow: inset 0 0em 0.7em 0.3em rgb(0, 94, 255);
}
#historique:hover {
    box-shadow: inset 0 0em 0.7em 0.3em rgb(0, 94, 255), 0 0em 0.7em 0.5em rgb(0, 94, 255);
    cursor: pointer;
}
.artco {
    display: none;
    position: fixed;
    margin-top: 0vh;
    width: 40%;
    height: 30%;
    margin-left: 30%;
    border: red 1px solid;
    box-shadow: inset 0 0em 0.7em 0.3em rgb(83, 0, 0), 0 0em 0.7em 0.5em rgb(76, 0, 0);
    border-radius: 100px;
    background-color: rgba(49, 49, 49, 0.99);
    z-index: 3;
}
.cotext {
    width: 100%;
    margin-top: 1vh;
    text-align: center;
    position: absolute;
    color: coral;
}
.iden {
    font-size: 160%;
    margin-top: 2vh;
    margin-bottom: 2vh;
    background: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(49, 49, 49) 73%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.iden:nth-child(1) {
    margin-top: 5vh;
}
.radio {
    margin-left: 50vh;
    margin-top: 1vh;
}
.checkfacile {
    margin-top: -12vh;
}
.ok {
    width: 10vh;
    margin-left: 34.5vh;
    margin-top: 4vh;
    border: red 1px solid;
    border-radius: 100px;
    color: aliceblue;
    background-color: rgb(49, 49, 49);
    transition: all 2s ease;
    box-shadow: inset 0 0em 0.7em 0.3em rgb(83, 0, 0), 0 0em 0.7em 0.5em rgb(76, 0, 0);
}
.ok:hover {
    box-shadow: inset 0 0em 0.7em 0.8em rgb(147, 0, 0), 0 0em 0.7em 0.5em rgb(76, 0, 0);
    cursor: pointer;
    color: rgb(0, 72, 72);
}
.conf {
    width: 12vh;
    margin-left: 33vh;
    margin-top: 4vh;
    font-size: large;
    border: red 1px solid;
    border-radius: 100px;
    color: aliceblue;
    background-color: rgb(49, 49, 49);
    transition: all 3s ease;
    box-shadow: inset 0 0em 0.7em 0.3em rgb(83, 0, 0), 0 0em 0.7em 0.5em rgb(76, 0, 0);
}
.conf:hover {
    box-shadow: inset 0 0em 0.7em 0.8em rgb(147, 0, 0), 0 0em 0.7em 0.5em rgb(76, 0, 0);
    cursor: pointer;
    color: rgb(0, 72, 72);
}




@media (max-width:650px ) {
    header {
        font-size: 8vh;
        background: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(49, 49, 49) 73%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .connexion {
        width: 45%;
        margin-left: 27.5%;
        font-size: 160%;
        margin-top: -4vh;
    }
    article {
        font-size: 1.3vh;
    }
    .Attention {
        width: 50%;
        margin-left: 25%;
        margin-top: 14%;
        font-size: 80%;
    }
    .choix {
        width: 20%;
        margin-left: 40%;
    }
    #facile {
        margin-top: 20%;
    }
    #normal {
        margin-top: 5%;
    }
    #difficile {
        margin-top: 5%;
    }
    .artco {
        width: 95%;
        margin-left: 2.5%;
        border-radius: 70px;
    }
    .radio {
        margin-left: 37vh;
    }
    .ok {
        margin-left: 18vh;
    }
    .conf {
        margin-left: 18vh;
        font-size: small;
    }
}