body {
  background-color: darkblue;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
}

header {
  position: fixed;
  top: 5rem;
  color: white;
}
header:before {
    content: "❤";
    position: absolute;
    margin-left: -2pc;
}

body * {
  border: 0;
  list-style: none;
  margin: auto;
  background: none center no-repeat;
  background-size: cover;
  position: fixed;
}

#player {
  background-image: url('start.gif');
  padding: 5rem;
  bottom: 5rem;
}

@keyframes jump {
  from {bottom:5rem;}
  50% {bottom:10rem;}
  to {bottom:5rem;}
}

#goal {opacity: 0}

.bom, .apple, .orange, .banana, .strawberry, .pineapple, .watermelon, .peach, .pear, .grapes, .cherry {
    padding: 2rem; 
    bottom: 15rem;
}
.apple {background-image: url('img/apple.png')}
.orange {background-image: url('img/orange.png')}
.banana {background-image: url('img/banana.png')}
.strawberry {background-image: url('img/strawberry.png')}
.pineapple {background-image: url('img/pineapple.png')}
.watermelon {background-image: url('img/watermelon.png')}
.peach {background-image: url('img/peach.png')}
.pear {background-image: url('img/pear.png')}
.grapes {background-image: url('img/grapes.png')}
.cherry {background-image: url('img/cherry.png')}

.bom {background-image: url('bom.png')}

@keyframes food {
  from {right:0vw;}
  to {right:100vw;}
}