@import url('https://fonts.googleapis.com/css2?family=Unbounded&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&display=swap');

*{
    font-family: 'Roboto Slab', serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-text-fill-color: rgb(221, 219, 212);
}

body{
    font-family: 'Unbounded', cursive;
    background: #41295a;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2F0743, #41295a);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2e0442, #6e724e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: sans-serif;
    margin: 2rem;
}

#grid {
    font-family: 'Unbounded', cursive;
    display: grid;
    grid-template-columns: repeat(3, 5rem);
    grid-template-rows: repeat(3, 5rem);
    gap: 1rem;
    margin: 3rem auto;
    background-color: rgba(91, 94, 94, 0.418);
    padding: 15px;
    border-radius: 5px;
}

.case{
    font-family: 'Unbounded', cursive;
    border: 1px solid lightgray;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
}

.h1{
    font-family: 'Unbounded', cursive;
}

.h4{
    font-family: 'Unbounded', cursive;
}

p {
    font-family: 'Unbounded', cursive;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

p:first-of-type, #Joueur {
    -webkit-text-fill-color: lightseagreen;
}