* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'main font';
    /* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
}

@font-face {
    font-family: 'main font';
    src: url(../font/scribble-mark.otf);
}

body {
    height: 100vh;
    padding-top: 5rem;
    background-color: rgb(30, 30, 30);
    color: white;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

body > * {
    /* border: 1px dashed white; */
    width: 500px;
}

.header {
    height: 100px;
    font-size: 4.5rem;

    display: flex;
    justify-content: center;
}


.game-info {
    height: 60px;

    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 2rem;
}

.game-info .turn {
    padding-bottom: 3px;
    color: rgb(255, 0, 100);
    font-size: 1.5rem;
}

.game-info .turn.playerO {
    color: rgb(0, 195, 255);
}

.game-info .restart {
    width: 10%;
    padding: 5px;
    background-color: transparent;
    filter: brightness(0) invert(1);
    border: none;
    cursor: pointer;
}

.game-info .restart:active {
    width: 9.8%;
}

.board-container {
    height: 500px;
    border: 1px solid white;
    cursor: pointer;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.board-container .cell {
    border: 2px solid white;
    color: rgb(255, 0, 100);
    font-size: 6rem;

    display: flex;
    justify-content: center;
    align-items: center;
}

.board-container .cell:hover {
    background-color: rgb(20, 20, 20);
    transition: 0.2s ease-out;
}

.board-container .cell.playerO {
    color: rgb(0, 195, 255);
}

dialog {
    margin: auto; 
    border: none;
    border-radius: 8px;
    box-shadow: rgba(255, 255, 255, 0.25) 0px 7px 29px 0px;
    transform: scale(0.8);
    transition: 0.3s ease;
    opacity: 0;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.75);
}

dialog.open {
    opacity: 1;
    transform: scale(1);
    transition: 0.3s ease;
}

.modal {
    height: 300px;
    padding: 2rem;
    background-color: rgb(20, 20, 20);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.modal .close {
    width: 8%;
    padding: 2px 17px;
    border: 2px solid white;
    border-radius: 4px;
    background-color: transparent;
    cursor: pointer;

    color: white;
    font-size: 2rem;

    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-end;
}

.modal .close:focus {
    outline: none;
}

.modal .result {
    color: rgb(255, 0, 100);    
    font-size: 3rem;
}

.modal .result.playerO{
    color: rgb(0, 195, 255);
}

.modal .play-again {
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}