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

display:flex;
flex-direction:column;
align-items:center;

margin:0;
}

/* heading */
h1{
color:#39ff14;
font-size:4vw;
margin-top:3vh;
}

/* player section */
.players{
display:flex;
gap:5vw;
margin:3vh 0;
}

#player1 , #player2{
    font-size: 30px;
}

/* board container */
.container{
width:70vw;
max-width:600px;
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:1vw;
}

/* boxes scale */
.box{
width:100%;
aspect-ratio:1/1;
background:#111;
border:2px solid white;
font-size:4vw;
color:#39ff14;
cursor:pointer;
transition:0.2s;
}

.box:hover{
transform:scale(1.05);
background:#1a1a1a;
}

/* text below board */
#result{
margin-top:3vh;
font-size:1.5vw;

}

/* reset button */
button{
margin-top:2vh;
padding:1vh 2vw;
font-size:1.2vw;
border:none;
background:#39ff14;
color:black;
font-weight:bold;
cursor:pointer;
border-radius:6px;
}