/* *, *::after, *::before{
    box-sizing: border-box;
} */
* {
    font-family: 'Courier New', Courier, monospace;
}
:root {
    --cellSize: 120px;
    --markSize: calc(var(--cellSize) * 0.9);
    --black: rgb(30, 30, 30)
}
 body {
    background-color: rgb(30, 30, 30); 
    margin: 0;
    display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    overflow: hidden;
}
.logo {
    width: 120px;
    position: absolute;
    top: 3%;
    left: 2%;
}
a {
    /* font-size: x-small;
    color: aliceblue; */
    text-decoration: none;
}
 /* button {
    
 } */
 .board {
    /* height: 100vh; */
    width: 100vw;
    display: grid;
        justify-content: center;
        align-items: center;
    grid-template-columns: repeat(3, var(--cellSize));
    gap: 5px;
    margin-top: 43vh;
    transform: translateY(-50%); 
    margin-bottom: -110px;
 }
 .cell {
    position: relative;
    height: var(--cellSize);
    width: var(--cellSize);
    background-color: rgb(220, 226, 232);
    display: flex;
        justify-content: center;
        align-items: center;
}
    .cell.x::before,
    .cell.x::after,
    .board.x .cell:not(.x):not(.circle):hover::before,
    .board.x .cell:not(.x):not(.circle):hover::after  {
        content: '';
        position: absolute;
        height: var(--markSize);
        width: calc(var(--markSize)*.15);
        background-color: rgb(36, 35, 35);
        border-radius: 3px;
    }
    .board.x .cell:not(.x):not(.circle):hover::before,
    .board.x .cell:not(.x):not(.circle):hover::after {
        background-color: rgb(180, 180, 180);
    }
        .cell.x::before,.board.x .cell:hover::before {
            transform: rotate(45deg);
        }
        .cell.x::after, .board.x .cell:hover::after {
            transform: rotate(-45deg);
        }


    
        .cell.circle::before,
        .cell.circle::after,
        .board.circle .cell:not(.x):not(.circle):hover::before, 
        .board.circle .cell:not(.x):not(.circle):hover::after {
            content: '';
            position: absolute;
            border-radius: 50%;
        }
        .cell.circle::before,
        .board.circle .cell:not(.x):not(.circle):hover::before {
            height: calc(var(--markSize)*.9);
            width: calc(var(--markSize)*.9);
            background-color: rgb(36, 35, 35);
        }
        .cell.circle::after, 
        .board.circle .cell:not(.x):not(.circle):hover::after {
            height: calc(var(--markSize)*.65);
            width: calc(var(--markSize)*.65);
            background-color: rgb(220, 226, 232)
        }
        .board.circle .cell:not(.x):not(.circle):hover::before {
            background-color: rgb(180, 180, 180);
        }

.winningMsg {
    height: 50px;
    width: 300px;
    display: flex;
    flex-direction: column;
        justify-content: center;
        align-items: center;
}
 /* button {
    height: 150px;

 } */
.winningMsg h1 {
    margin: 0;
    font-size: 70px;
    color: rgb(220, 226, 232);
}
.reset {
    font-weight: bolder;
    font-size: x-large;
    height: 50px;
    width: var(--cellSize);
    background-color: #28c1e0;
    background-color: aquamarine;
}
.playerStatus {
    color: aliceblue;
}

@media only screen and (max-width: 600px) {
 :root {
    --cellSize: 100px;
 }
 .reset {
    height: 50px;
    width: calc(var(--cellSize)*1.2);
}
}