* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background-color: #1f5f85;
    display: flex; /*organise les elements dans un conteneur */
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#fond {
    background-color: #cf2020;
    width: 900px;
    padding: 20px;
    border-radius: 20px; /* arondie les coin */
    position: relative; /* sert à devenir un point de ref et sans casser la mise en page*/ 
}

#jeton, #solde {
    background-color: #ffbf4d;
    width: 100px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: right;
    position: absolute;  /* sert à placer un élément exactement où tu veux sur la page */
}

#jeton {
    top: 15px;
    left: 15px;
}

#solde {
    top: 15px;
    right: 15px;
}
#coins{
    margin-right: 40px;
}
#argent{
    margin-right: 40px;
}

#points,
#money {
    width: 30px;
    margin-right: 10px;
}

#titre {
    background-color: #1f5f85;
    color: white;
    text-align: center;
    padding: 15px;
    margin: 60px 0 30px 0;
}

#titre h1 {
    letter-spacing: 3px;
}

#case1, #case2, #case3 {
    background-color: #f2f2f2;
    width: 200px;
    height: 200px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#case1 img,
#case2 img,
#case3 img {
    width: 120px;
}

#case1, #case2, #case3 {
    display: inline; /* sert à faire en sorte qu’un élément se comporte comme du texte dans une phrase */
    margin: 0 15px;
}

#case1 {
    margin-left: 110px;
}

#lancer {
    display: block; /* sert à faire d’un élément un bloc qui prend toute la largeur disponible et qui commence sur une nouvelle ligne*/
    margin: 30px auto; /* sert à centrer un élément horizontalement et à lui donner de l'espace en haut et en bas */ 
    padding: 12px 30px;
    background-color: #d29a2a;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer; /* sert à changer la forme de la souris pour montrer que quelque chose est cliquable */
    transition: 0.2s;
}

#lancer:hover {
    background-color: #e4b44c;
}

#sept, #diamant, #cerise, #coeur, #dé {
    padding: 10px;
    display: inline;
}

#sept { bottom: 20px; left: 20px; }
#coeur { bottom: 20px; left: 200px; }

#diamant { bottom: 20px; left: 380px; }
#dé { bottom: 20px; left: 560px; }

#cerise { bottom: 20px; right: 20px; }

#sept img,
#diamant img,
#cerise img,
#coeur img,
#dé img {
    width: 120px;
}