body {
    background-color: black;
}

.hidden {
    display: none !important;
}

.game-buttons {
    display: grid;
    grid-template-rows: 44vh 44vh;
    grid-template-columns: 49vw 49vw;
    grid-gap: 2px;
    position: relative;
    justify-content: center;
    background-size: contain;
    background-position: center;
}

.yellow-square {
    background-color: #84f14e;
    display:inline-block;
    padding:0.3em 1.2em;
    margin:0 0.1em 0.1em 0;
    border:0.16em solid rgba(255,255,255,0);
    border-radius: 15%;
}

.yellow-square:active,
.yellow-square.activated {
    background-color: yellow;
}

.red-square {
    background-color: #f14e4e;
    display:inline-block;
    padding:0.3em 1.2em;
    margin:0 0.1em 0.1em 0;
    border:0.16em solid rgba(255,255,255,0);
    border-radius: 15%;
}

.red-square:active,
.red-square.activated {
    background-color: red;
}

.blue-square {
    background-color: #4e9af1;
    display:inline-block;
    padding:0.3em 1.2em;
    margin:0 0.1em 0.1em 0;
    border:0.16em solid rgba(255,255,255,0);
    border-radius: 15%;
}

.blue-square:active,
.blue-square.activated {
    background-color: blue;
}

.green-square {
    background-color: #4ef18f;
    display:inline-block;
    padding:0.3em 1.2em;
    margin:0 0.1em 0.1em 0;
    border:0.16em solid rgba(255,255,255,0);
    border-radius: 15%;
}

.green-square:active,
.green-square.activated {
    background-color: green;
}

/* .users {
    display: grid;
    position: relative;
    justify-content: center;
    padding-top: 20px;
    grid-template-columns: 150px 150px;
} */

/* .player {
    border-style: solid;
    border-color: black;
    text-align: center;
}

.computer {
    border-style: solid;
    border-color: black;
    text-align: center;
} */

footer {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    height: 50px;
}

button {
    background-color: #9a4ef1;
    padding:0.3em 1.2em;
    margin:0 0.1em 0.1em 0;
    border:0.16em solid rgba(255,255,255,0);
    border-radius:2em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color:#FFFFFF;
    text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
    text-align:center;
    transition: all 0.2s;
}

.instructions {
    color: white;
}