*{
    --grid-background-color: #8559A5;
    --grid-background-hover-color: #54336b;
    --neutral-text-background-color: #6DB193;
    --player-one-background-color: #678dc7;
    --player-two-background-color: #da7eec;
    --text-color:#F4E5C2;
    --page-background-color:#F4E5C2;
    --gray-color: #323232;
    font-family: Arial, Helvetica, sans-serif;
}

body{
    display:flex;
    flex-direction: column;
    align-items: center;
    height:100vh;
    justify-content:center;
    gap: 20px;
    background-color: var(--page-background-color);
}

p, h1 {
    margin:0;
    padding:0;
}

h1 {
    color: var(--gray-color);
}

/* game area */
.game.grid{
    display:none;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    aspect-ratio: 1/1;
    height: 50vh;
    gap: 10px;
    background-color: var(--gray-color);
}

.game.grid > div{
    background-color: var(--grid-background-color);
}

.game.grid > div.x{
    background: url("./images/x-mark.svg");
    background-color: var(--grid-background-color);
}

.game.grid > div.o{
    background: url("./images/o-mark.svg");
    background-color: var(--grid-background-color);
}

.game.grid > div.empty:hover{
    background-color: var(--grid-background-hover-color);
}

/* display bottom area*/
.display.area {
    display:none;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 1fr 1fr;
    gap: 0 30px;
    align-items:center;
}

.display.area .info{
    padding: 12px;
    box-sizing:border-box;
    color: var(--text-color);
    box-shadow: 2px 2px 2px black;
    border-radius: 12px;
}

.display.area .turn.info{
    grid-column: 1/3;
    text-align: center;
    font-size: 24px;
    background-color: var(--neutral-text-background-color);
    height: 80px;
}

.display.area .player1.info{
    background-color: var(--player-one-background-color);
}

.display.area .player2.info{
    background-color: var(--player-two-background-color);
}

.display.area button{
    display:none;
    color: var(--text-color);
    font-size: 24px;
    grid-column: 1/3;
    padding:12px;
    background-color: var(--neutral-text-background-color);
    border-style:none;
    box-shadow: 2px 2px 2px black;
}

/* style form */
form {
    display: grid;
    grid-template-columns: max-content minmax(300px, 500px);
    gap: 20px;
    align-items:center;
    margin: 0 10vw;
}

form button{
    grid-column: 1/3;
    justify-self: center;
    color: var(--text-color);
    font-size: 24px;
    grid-column: 1/3;
    padding:12px;
    background-color: var(--neutral-text-background-color);
    border-style:none;
    box-shadow: 2px 2px 2px black;
    width: 300px;
}

form input{
    padding: 12px 20px;
    border-radius: 8px;
    border: 2px solid gray;
}