html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* To ensure no scrolling on the entire page */
}

.player {
    background-color: blue; /* Color to represent the player */
}

#mathInput {
    display: flex; /* Use flexbox layout */
    align-items: center; /* Align items vertically in the center */
    justify-content: center; /* Center the items horizontally */
    gap: 10px; /* Add some space between the items */
}

.cell-has-player {
    background-image: url('images/playerSimple.jpg') !important;
    background-size: 100% 100%; /* fit image to cell */
    background-repeat: no-repeat; /* Prevent the image from repeating */
}
.cell-has-stairs-down {
    background-image: url('images/stairsDown.jpg');
    background-size: 100% 100%;
}
.cell-has-stairs-up {
    background-image: url('images/stairsUp.jpg');
    background-size: 100% 100%;
}
.cell-has-plus-monster {
    background-image: url('images/plusMonster.jpg');
    background-size: 100% 100%;
}
.cell-has-minus-monster {
    background-image: url('images/minusMonster.jpg');
    background-size: 100% 100%;
}
.cell-has-times-monster {
    background-image: url('images/timesMonster.jpg');
    background-size: 100% 100%;
}
.cell-has-division-monster {
    background-image: url('images/divisionMonster.jpg');
    background-size: 100% 100%;
}