* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: black;
}

header {
    background-color: red;
    color: white;
    text-align: center;
    rotate: -45deg;
    padding: 4.2rem;
    left: -2vw;
    top: 15vw;
    margin-top: -20vw;
    margin-left: -18.23rem;
    position: absolute;
}

header h1 {
    font-size: 60px;
    padding-top: 18.2rem;
    padding-left: 5.2rem;
    padding-right: 6.2rem;
    
}

#box_cover {
    position: absolute;
    z-index: -999;
    background: #1e35ba;
        background: linear-gradient(145deg, rgba(30, 53, 186, 1) 0%, rgba(176, 0, 0, 1) 100%);
    height: 80vh;
    width: 80vw;
    margin-right: 20%;
    top: 6vw;
}

.lilthang {
    position: absolute;
    background-color: red;
    height: 3.3vh;
    width: 40vw;
    top: 0;
    left: 60%;
    transform: translate(-50%);
}

#grille {
    width: calc(50vmin + 12px);
    height: calc(50vmin + 12px);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: solid rgb(255, 255, 255) 4px;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
}
#grille .case {
    border: solid rgb(255, 255, 255) 4px;
    display: grid;
    place-items: center;
    height: 15vmin;
    width: 15vmin;
    margin: auto;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

body.player-n div:hover{
    background-color: #ff000057;
}
body.player-s div:hover{
    background-color: #0000c437;
}


#players {
    position: fixed;
    top: 30%;
    left: 89vw;
    transform: translate(-150%);
    z-index: -999;
    padding: 2rem;
    background-color: black;
}

#players .left_player {
    position: relative;
    padding-bottom: 6.2rem;
}
.left_player.player-n {
    color: #ff0000bf;
}

#players {
    color: gray;
}

#players .right_player {
    top: 30vw;
}

.right_player.player-s {
    color: #0000ffbf;
}
footer {
    position: absolute;
    margin-left: 60%;
    top: 90%;
    color: red;
}



#grille .case img {
    width: 80%;
    
}


#winner {
    position: fixed;
    min-height: 37vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
    min-width: 20%;
    background-color: hsla(0, 0%, 0%, 0.753);
    left: 50%;
    transform: translate(-50%);
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.2rem;
    transition: opacity 0.3s ease-in-out;
} 

.hidden {
    opacity: 0%;
    pointer-events: none;
}

#message {
    color: white;
}

nav {
    margin-top: 1em;
}

nav button {
    padding: 1.25rem;
    border-radius: 15%;
    border: none;
}