body {
    font-family: 'Schoolbell', cursive, sans-serif ;
    box-sizing: border-box;
}

.header_logo {
    width: 80%;
    display: flex;
    justify-content: center;
    margin: auto;   
}

.header_logo > img {
    object-fit: contain;
    max-width: 100%;
    height: auto;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Les 3 titres avec lettres de toutes les couleurs*/
h1, h2, h3 {
    text-align: center;
}

h1 {
    font-size: 40px;
}

h1 > span:nth-child(1) {color: springgreen;}
h1 > span:nth-child(2) {color: lime;}
h1 > span:nth-child(3) {color: mediumaquamarine;}
h1 > span:nth-child(4) {color: deeppink;}
h1 > span:nth-child(5) {color: deepskyblue;}
h1 > span:nth-child(6) {color: darkturquoise;}
h1 > span:nth-child(7) {color: aqua;}
h1 > span:nth-child(8) {color: palegreen;}
h1 > span:nth-child(9) {color: hotpink;}
h1 > span:nth-child(10) {color: darkviolet;}
h1 > span:nth-child(11) {color: fuchsia;}
h1 > span:nth-child(12) {color: blueviolet;}
h1 > span:nth-child(13) {color: gold;}
h1 > span:nth-child(14) {color: turquoise;}
h1 > span:nth-child(15) {color: mediumslateblue;}
h1 > span:nth-child(16) {color: aquamarine;}
h1 > span:nth-child(17) {color: blue;}
h1 > span:nth-child(18) {color: steelblue;}

h2 {
    font-size: 25px;
    color :darkturquoise;
}

h2:before {content: "🚀";}

h2 > span {color: deepskyblue;}
h2 > span:before {content: "⭐";}

h3 {
    font-size: 25px;
    color: deeppink;
}

h3:before {
    content: "🧭";}

/* boutons pour choisir sa liste*/
.listes {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: auto;
    gap: 20px ;
    flex-wrap: wrap;
    width : 80%; 
    padding:0;
}

.listes > li > button:before {
    content: "⭐";
}

.listes > li > button {
    background-color: white;
    border-radius: 15px;
    padding: 5px;
    font-size: 25px;
    cursor: pointer;
    font-family: 'schoolbell',cursive, sans-serif;
}

.listes > li:nth-child(1) > button {color: springgreen; border: 2px solid mediumslateblue;}
.listes > li:nth-child(2) > button {color: lime; border: 2px solid fuchsia;}
.listes > li:nth-child(3) > button {color: mediumaquamarine; border: 2px solid gold;}
.listes > li:nth-child(4) > button {color: deeppink; border: 2px solid steelblue;}
.listes > li:nth-child(5) > button {color: deepskyblue; border: 2px solid palegreen;}
.listes > li:nth-child(6) > button {color: darkturquoise; border: 2px solid blueviolet;}
.listes > li:nth-child(7) > button {color: aqua; border: 2px solid lime;}
.listes > li:nth-child(8) > button {color: palegreen; border: 2px solid blue;}
.listes > li:nth-child(9) > button {color: hotpink; border: 2px solid turquoise;}
.listes > li:nth-child(10) > button {color: darkviolet; border: 2px solid deepskyblue;}
.listes > li:nth-child(11) > button {color: fuchsia; border: 2px solid aqua;}

.listes > li > .selected {
    box-shadow: 0 0  10px orange;
    transform: scale(1.25);
}

/*** Section mot à trouver ***/
#word_to_find {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: auto;
    margin: auto;
    justify-content: space-evenly;
    border: 2px solid springgreen;
    border-radius: 15px;
    padding : 10px;
    font-size: 20px;
}

.word_to_find__text {
    padding: 20px;
}

figure > img {
    border-radius: 15px;
    height: 200px;
    object-fit: cover;
    object-position: top;
    align-items: center;
}

figcaption {
    color: darkorange;
    font-style: italic;
    font-weight: bold;
    text-align: center;
}

.word_to_find__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.text__data {
    color: dodgerblue;
    padding-bottom: 25px;
}

.text__data > span {
    color : crimson;
}

.text__hidden_word {
    display: flex;
    justify-content: center;
    width : auto;
    margin: 0;
    padding: 10px;
    letter-spacing: 5px;
    font-size: 30px;
    font-weight: bold;
    color: darkcyan;
    border: dashed darkturquoise;
    border-radius: 15px;
}

#letters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#letters > ul {
    display: flex;
    justify-content: center;
    gap : 10px;
    flex-wrap: wrap;
    padding: 10px;
    cursor: pointer;
}

#letters > ul > li {
    width : 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    list-style-type: none;
    border : 2px solid mediumorchid;
    border-radius: 50%;
    padding: 5px;
    font-size: 25px;
    font-weight: bold;
    color : indigo;
    background-color: powderblue;
}

#letters > ul> li:hover {
    transform: scale(0.80);
    box-shadow: 0 0 7px mediumorchid;
}

#letters > ul > .good {
    border-color : green;
    background-color: greenyellow;
}

#letters > ul > .wrong {
    border-color : tomato;
    background-color: rgb(245, 135, 135);
}

.gameover {
    letter-spacing: 0rem;
    font-size: 30px;
    font-weight: bold;
}

.winner {
    color:lime;
}

.winner:after {
    content: "😸";
}

.loser {
    color: crimson;
}

.loser:after {
    content: "😿";
}

#letters > button {
    font-size: 25px;
    padding: 20px;
    align-self: center;
    text-align: centre;
    border-radius: 15px;
    border: 2px solid mediumvioletred;
    background-color:pink;
    color: darkcyan;
    cursor: pointer;
}