@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');



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

body{
    font-family: "Orbitron", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;

}


.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* row-gap: 5vh; */
    margin: 5vh 0;
}

header{
    margin-bottom: 2vh;
}

.player-section{
    margin-bottom: 3vh
}


.grid-box{
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    /* gap: 0.5rem; */
    /* border: 1px solid black; */
    margin: 2% 0;
}
.grid-box:hover{
    /* color: red; */
}

.tiles{
    border: 3px solid rgb(127, 108, 108);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 5px 5px rgb(225, 225, 201);
}
.tiles:hover{
    /* filter: brightness(30%); */
    cursor: pointer;
    background-color: rgba(201, 201, 201, 0.608);
}

.x-mark{
    font-size: 3rem;
    color: red;
}

.o-mark{
    font-size: 3rem;
    color: green;
}

.player-turn-display{
    font-size: 3rem;
}

.x-turn{
    font-size: 3rem;
    color: red;
}

.o-turn{
    font-size: 3rem;
    color: green;
}

.default-turn{
    font-size: 3rem;
    color: red;
}

.winner-message{
    margin: 2vh;
    height: 80px;
}

.winner-1{
    font-size: 2rem;
    color: red;
}

.winner-2{
    font-size: 2rem;
    color: green;
}


.new-game{
    height: 40px;
    width: 100px;
    border-radius: 7px;
    cursor: pointer;
    font-family: "Orbitron", sans-serif;
    font-weight: 600;
    background-color: rgb(94, 199, 245);
    color: white;
    border: 2px solid rgb(21, 153, 186);
}