style.css

body {
    background: url(images/ferns-bg.png);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
}

h1 {
    color: rgb(146, 200, 152);
    font-family: monospace;
    text-align: center;
    font-size: xx-large;
}

.container {
    margin: auto;
    align-self: center;
    display: flex;
    width: 50%;
    justify-content: center;
}

/* modals */
.modal {
    align-self: center;
    display: flex;
    flex-direction: column;
    background-color: aliceblue;
    padding: 20px;
    opacity: 0.7;
    max-width: 50%;
    margin-top: 15%;
    z-index: 2; 
    position: absolute;
}

.modal_content {
    color: rgb(75, 125, 81);
    font-family: monospace;
    margin: 3%;
    text-align: center;
    z-index: 3; 
}

.modal_close {
    background-color: rgb(187, 141, 192) ;
    color: rgb(230, 230, 230);
    font-family: monospace;
    align-self: center;
    padding: 1%;
    border: none;
}

.modal_close:hover {
    cursor: pointer;
}

/* game over modal */
#gameOverModal {
    display: none;
}

/* game board */
#board {
    z-index: 1;
}

footer {
    align-self: bottom;
    color: rgb(146, 200, 152);
    font-family: monospace;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-left: 2%;
}