style.css

body {
  margin: 0px;
  overflow: hidden;
  background: grey;
  position: absolute;
}

#videogame {
  position: absolute;
  overflow: hidden;
  margin: auto;
  padding: 0px;
  height: 600px;
  width: 800px;
  left:50%;
}



#videogame level {
  position:absolute;
  min-height: 600px;
  min-width: 800px;
  left:0px;
  top:0px;
  width:0px;
}


platform {
  position: absolute;
  width: 200px;
  height: 16px;
  background: linear-gradient(45deg, rgb(255, 153, 0) 12.5%, #fff 12.5%, #fff 37.5%, rgb(255, 153, 0) 37.5%, rgb(255, 153, 0) 62.5%, #fff 62.5%, #fff 87.5%, rgb(255, 153, 0) 87.5%);
  background-size: 32px 32px;
  background-position: 50px 50px;
  border: black 2px solid;
  border-radius: 8px;
}

.grass {
  background-color: green;
  background-image: radial-gradient(circle, rgb(6, 85, 6) 50%, transparent 10%), radial-gradient(circle, rgb(6, 85, 6) 50%, transparent 10%);
  background-size: 10px 10px;
  background-position: 0 0, 50px 50px;
  border: none;
  border-top: rgb(6, 85, 6) 6px solid;
  border-radius: 16px;
}



#msg {
  position: absolute;
  left: 50%;
  right: 50%;
  top: 30%;
  margin: auto;
  font-size: 3em;
  color:grey;
}

.fragile {
  border: none;
}

.fragile.on {
  animation: fall 5s forwards;
}

.shrinkable {
  animation: shrink 3s alternate-reverse infinite;
}

@keyframes blink {
  to {opacity: 0}
}

.blink {
  animation: blink 2s alternate-reverse infinite;
}

.blink2 {
  animation: blink 2s alternate infinite;
}

#hero {
  position: absolute;
  background-color: yellow;
  width: 16px;
  height: 16px;
  border: black 2px solid;
}

win {
  position: absolute;
  background: linear-gradient(90deg, rgb(160, 97, 4) 40%, black, rgb(160, 97, 4) 60%);
  width: 32px;
  height: 64px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border: black 2px solid;
}

.upDown {
  animation: moveUpDown 3s alternate-reverse infinite;
}

@keyframes moveUpDown {
  from {
    transform: translateY(-200px);
  }

  to {
    transform: translateY(200px);
  }
}

@keyframes fall {
  5% {
    transform: translateX(5px);
  }

  10% {
    transform: translateX(-5px);
  }

  15% {
    transform: translateX(5px);
  }

  20% {
    transform: translateX(-5px);
  }

  25% {
    transform: translateX(0px);
  }

  to {
    transform: translateY(2000px);
  }
}


@keyframes shrink {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0.1);
  }
}