body {
    user-select: none;
    text-align: center;
    background-color: rgb(252, 228, 197);
    color: rgb(22, 61, 69);
    text-shadow: 1px 1px 3px rgb(23, 20, 20);
}
td {
    width: 30px;
    height: 30px;
    background-color: rgb(121, 188, 188);
    box-shadow: 1px 1px 3px inset black;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    font-size: 20px;
    color: rgb(248, 246, 201);
    user-select: none;
}
td.X {
    background-color: rgb(113, 64, 159);
    color: rgb(255, 193, 253);
}
td.O {
    background-color: rgb(25, 100, 165);
    color:rgb(198, 235, 255)
}
td:hover {
    background-color: rgb(54, 144, 144);
    box-shadow: 1px 1px 3px black;
}
td:active {
    background-color: rgb(144, 54, 54);
    box-shadow: 1px 1px 3px inset black;
}
td.X:hover {
    background-color: rgb(113, 64, 159);
    box-shadow: 1px 1px 3px inset black;
    cursor: not-allowed;
}
td.O:hover {
    background-color: rgb(25, 100, 165);
    box-shadow: 1px 1px 3px inset black;
    cursor: not-allowed;
}
table {
    cursor: not-allowed;
    margin: auto;
    padding: 6px;
    border-spacing: 4px;
    background-color: azure;
    border-radius: 7px;
    box-shadow: 1px 1px 4px black;
}