body {
    background: #3d0403;
    color: rgb(240, 240, 240);
    text-align: center;
    margin: 0 auto;
    padding: 0 1em;
    max-width: 1420px;
    font-size: clamp(12px, 1vw, 1em);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    overflow-x: hidden;
    position: relative;
}

main {
    position: relative;
    background: #6b1b00;
    height: 85vh;
    border: 5px inset rgb(235, 255, 57);
}

ul,
p {
    padding: 0;
    list-style-type: none;
    font-size: 10px;
}

img {
    width: 35px;
    height: 35px;
}

/* I applied position: absolute; to all sprites so they remain unaffected by added elements on Game Screen */
.food-man {
    /* Fit div to content of sprite (image) and scales to 1.3 */
    position: absolute;
    width: fit-content;
    height: auto;
    z-index: 4;
}

.grandma {
    position: absolute;
    translate: 15px 15px;
    width: fit-content;
    height: auto;
    z-index: 2;
}

.food {
    position: absolute;
    width: fit-content;
    height: auto;
    opacity: 100%;
    animation: foodSpawn 1s linear forwards;
    z-index: 1;
}

.score-board {
    position: absolute;
    text-align: right;
    top: 0;
    right: 0;
    padding: 1em;
    z-index: 3;
}

.score-board>* {
    /* Combinator, applies to all children elements */
    font-size: clamp(1.5em, 1vw, 2em);
    margin: 0;
}

.mobile-touch-control {
    z-index: 15;
    font-size: 12px;

    width: 150px;
    height: 150px;

    margin: 1em;

    position: absolute;
    right: 0;
    bottom: 0;

    display: none;
}

.touch-button {
    background: rgba(255, 255, 255, 0.7);
    width: 50px;
    height: 50px;
    border-radius: 25%;
}

.touch-button:active {
    background: rgb(156, 156, 156);
    color: red;
}

.touch-up {
    position: absolute;
    top: 0;
    left: 50px;
}

.touch-right {
    position: absolute;
    top: 50px;
    right: 0;
}

.touch-down {
    position: absolute;
    bottom: 0;
    left: 50px;
}

.touch-left {
    position: absolute;
    top: 50px;
    left: 0;
}

.touch-stop {
    background: rgba(255, 0, 0, 0.651);
    width: 40px;
    height: 40px;
    position: absolute;
    top: 55px;
    left: 55px;
}

/* Starvation Bar */
.starvation-bar-div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5px;
    align-items: center;
    margin-top: 5px;
    max-width: 100%;

}

.starvation-bar-div p {
    margin: 0;
    font-size: clamp(1em, 1vw, 1.5em);
}

.starvation-bar {
    height: .7em;
    width: 100%;
    background: rgb(204, 0, 0);
    border: 1px solid white;
}

/* CSS Animation */
@keyframes foodSpawn {
    0% {
        opacity: 100%;
    }

    25% {
        opacity: 0%;
    }

    50% {
        opacity: 100%;
    }

    75% {
        opacity: 0%;
    }

    to {
        opacity: 100%;
    }
}