:root {
    --transition: all 1s ease-in-out;
}
body {
    min-width: 50rem;
    margin: 1rem auto;
    text-align: center;
}
main {
    margin: 1rem;
}
.gameplay {
    width: 50rem;
    height: 50rem;
    margin: 1rem auto;
    text-align: center;
}
.game-position {
    display: inline-block;
    position: relative;
    margin: 0.125rem;
    border: 1px solid black;
    width: 15rem;
    height: 15rem;
    transition: var(--transition);
    cursor: pointer;
}
.X:before,.O:before {
    content: 'X';
    position: absolute;
    font-size: 12.5rem;
    left: 3rem;
    top: -3rem;
    transition: var(--transition)
}
.O:before {
    content: 'O';
}
.control {
    visibility: hidden;
    width: 12rem;
    margin: 0 auto;
    text-align: center;
    transition: var(--transition)
}
.message {
    font-size: 1.25rem;
    transition: var(--transition)
}