@import url("./reset.css");

.container-regles {
    width: 50rem;
    margin: 0 auto;
    font-size: 1.2rem;

    h1,
    h2 {
        text-align: center;
    }

    h1 {
        font-size: 2rem;
        color: black
    }

    h2 {
        font-size: 1.5rem;
        color: darkgray
    }

    ul {
        margin: 2rem 0;
    }

    li {
        margin-left: 2rem;
        list-style-type: disc;
    }
}

.container-game {
    width: 30rem;
    margin: 2rem auto;

    p {
        font-size: 1.5rem;
        color: gray;
        margin-bottom: 1.5rem;
    }
}

.container-scores {
    display: flex;
    justify-content: space-between;
    background-color: lightgoldenrodyellow;
    margin-bottom: 2rem;

    >div {
        width: 33.33%;
        margin: 1rem;
        font-weight: 600;
        font-size: 1.3rem;
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    .partie-number,
    .score-user,
    .score-computer {
        color: lightcoral;
        font-weight: 900;
        font-size: 1.8rem;
    }
}

.container-buttons {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.bouton-feu,
.bouton-eau,
.bouton-terre,
.bouton-rejouer {
    border: none;
    width: 31%;
    padding: 1rem 0;
    font-size: 2rem;
    font-weight: 600;
}

.bouton-feu:disabled,
.bouton-eau:disabled,
.bouton-terre:disabled,
.bouton-rejouer:disabled {
    pointer-events: none;
    cursor: not-allowed;
    background-color: #eee;
    color: darkgray;
}

.bouton-feu {
    background-color: burlywood;
}
.bouton-feu:hover {
    cursor: pointer;
    background-color: orange;
}

.bouton-eau {
    background-color: lightblue;
}

.bouton-eau:hover {
    cursor: pointer;
    background-color: lightskyblue;
}

.bouton-terre {
    background-color: lightgrey;
}

.bouton-terre:hover {
    cursor: pointer;
    background-color: gray;
}

.bouton-rejouer {
    background-color: lightgreen;
    width: 100%;
}

.bouton-rejouer:hover {
    cursor: pointer;
    background-color: greenyellow;
}

.interractions {
    margin-top: 2rem;
    padding: 1rem;
    width: 100%;
    height: 8rem;
    background-color: #EEE;
    color: black;
    font-size: 1rem;
    font-weight: 400;
}