@font-face {
    font-family: 'Walter Turncoat';
    src: url(WalterTurncoat-Regular.ttf);
}

body {
    height: 100vh;
    display: grid;
    justify-content: center;
    align-content: center;
    gap: 4rem;
    font-size: 4rem;
    background-color: #73acd8;
    font-family: 'Walter Turncoat', sans-serif;
}

#gameboard {
    width: 500px;
    height: 500px;
    display: grid;
    gap: 1rem;
    grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
}

.square {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: hsl(27, 56%, 93%);
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}

.square:hover {
    box-shadow: 4px 10px 5px rgba(0, 0, 0, 0.22); 
}

p, button {
    background-color: hsl(27, 56%, 93%);
    border-radius: 3rem;
    font-size: 2.8rem;
    padding: 1rem;
    color: white;
    background-color: black;
    border: 6px solid rgb(188, 117, 63);
}

p {
    text-align: center;
}

button:hover {
    background-color: rgb(57, 57, 57);
}