:root {
    --character-z-index: 5;
    --character-width: 25%;
    --tractor-height: 25%;
}
.character {
    position: absolute;
    animation-name: character-moveIt-moveIt;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    z-index: var(--character-z-index);
    width:   var(--character-width);
    height:  var(--tractor-height);
    touch-action: manipulation;
}

.character > img {
    width:  var(--character-width);
    height: var(--tractor-height);
}
.field-item {
    position: absolute;
    animation-name: field-item-tractor-moveIt-moveIt;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    z-index: var(--character-z-index);
}
#game-board {
    position: absolute;
    top: 0 ;
    left: 1% ;
    width:  var(--screen-width);
    height: calc(var(--screen-height) - 50px);
}

#game-board > img {
    width:  var(--screen-width);
    height: calc(var(--screen-height) - 50px);
}

#game-container {
    display: flex;
    flex-direction: row;
}
#header {
    display: flex;
    flex-direction: row;
    margin-left: 5% ;
}
#health {
    display: flex;
    flex-direction: row;
}
.health-icon {
    margin-left: 3%;
    width:30px;
    height: 30px ;
}

#instructions1 {
    margin-top: 5%;
}
#lose-game img {
    width: 50%;
}

#layer1 {
    border: 1px black;
    background-size  : cover ;
    display: flex ;
    justify-content: center;

}
#movement-buttons {
    display: flex;
    flex-direction: column;
    padding:10%;
    user-select: none;
    font-size: 2em;
}

#move-up, #move-down {
    user-select: none;
}
#move-up > img {
    height:50px ;
}
#move-down > img {
    height: 50px ;
}
.obstacle > img {
    width: 30px;
    height: 30px;
}
#play {
    margin-left: 35%;
}
.reward {
    width: 3%;
    height: 4%;
}

.reward > img {
    width: 100%;
    height: 100%;
}

#score, #health {
    font-size: 1.0rem;
  color: white ;
}

/* This button is just used as a spacer */
#start-button {
    margin-bottom: 5px;
    background-color: navajowhite;
    border: 1px solid black ;
    visibility: hidden;
}


#win-game, #lose-game {
    background-color: white;
    font-size: 2rem;
    padding: 2%;
    border: 2px black solid;
    top: 35% ;
}




@keyframes character-moveIt-moveIt {
    from {
        left: 0;
    }
    to {
        left: 90%;
    }
}




@keyframes field-item-tractor-moveIt-moveIt {
    from {
        opacity: 0;
    }
    to {
        opacity: 80%;
    }
}
