style.css

body
{
    margin: 0;
    background-color: darkslateblue;

    /* Disable text selection - caused bug with click events when selected */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container
{
    text-align: center;
}

h1
{
    color: thistle;
    font-size: 4rem;
    font-family: 'Courier New', Courier, monospace;
}

/* Game square */

.square
{
    width: 16rem;
    height: 16rem;
    display: inline-block;
    margin: 1rem;
    border-radius: 1rem;
    border: 0.5rem solid black;
}



.yellow
{
    background-color: yellow;
}

.blue
{
    background-color: blue;
}

.green
{
    background-color: green;
}

.red
{
    background-color: red;
}

.clicked
{
    background-color: blueviolet;
}