* {
  padding: 0;
  margin: 0;
}

#game {
  width: 500px;
  height: 200px;
  border: 1px solid;
  margin: 20px auto;
  position: relative;
  overflow: hidden;

  background-image: url("images/ground.png");
  background-position: left bottom;
  background-repeat: no-repeat;
}


#character {
  width: 44px;
  height: 47px;
  position: absolute;
  bottom: 16px;
  left: 20%;
  background-image: url("./images/dino-running-reduced.gif");
}

#obstacle {
  animation: slide 1500ms infinite linear;
  position: absolute;
  bottom: 16px;
}

.paused{
  animation-play-state:paused;
  display: none;
}

#score {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 22px;
  font-weight: bold;
}

#high-score {
  position: absolute;
  top: 40px;
  left: 10px;
  font-size: 22px;
  font-weight: bold;
}

.small {
  width: 24px;
  height: 50px;
  background-image: url("./images/cactus1-reduced.png");
}

.medium {
  width: 34px;
  height: 35px;
  background-image: url("./images/cactus3-reduced.png");
}

.large {
  width: 49px;
  height: 50px;
  background-image: url("./images/cactus2-reduced.png");
}

.jump {
  animation: jump 0.5s linear;
}

@keyframes slide {
  0%{left: 480px;}
  100%{left: -100px;}
}

@keyframes jump {
  0%{bottom: 16px;}
  30%{bottom: 80px;}
  50%{bottom: 120px;}
  80%{bottom: 80px;}
  100%{bottom: 16px;}
}