:root {
    --box-size: 100px;
    --board-size: 521px;
}

.board {
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    row-gap: 3px;
    column-gap: 3px;
    width: var(--board-size);
}

.board div {
    border: 1px solid black;
    width: var(--box-size);
    height: var(--box-size);
    margin: auto;
    text-align: center;
}

.board p {
    font-size: 2rem;
    font-family: 'Courier New', Courier, monospace;
}

h2 {
    text-align: center;
}

.X {
    background-color: #FF7659;
}

.O {
    background-color: #80D7FF;
}

.default-box {
    background-color: white;
}

.button-cont {
    display: flex;
    justify-content: center;
}

.credits {
    text-align: center;
}

.display {
    margin: auto;
    text-align: center;
}

.display .square {
    width: 300px;
}

.display .rectangle {
    width: 200px;
}

.menu {
    text-align: center;
}

.rules {
    margin: auto;
    width: 500px;
}

.rules table, td {
    border: 1px solid;
    border-collapse: collapse;
    padding: 7px;
}

@media screen and (max-width: 540px) {
    :root {
        --box-size: 50px;
        --board-size: 271px;
    }

    .board p {
        font-size: 1.1rem;
    }

    .rules {
        width: 300px;
    }
}