html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.outercontainer {
  position: fixed;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  position: fixed;
  width: 500px;
  height: 200px;
  margin: 0;
  padding: 0;

  transform: translate(-50%, -50%);

  top: 50%;
  left: 50%;
}


.dino {
  position:absolute;
  width: 50px;
  height: 50px;
  background-size: 50px;
  background-image: url(t-rex.png);
  bottom: 0px;
  top: auto;
  left: 20px;
}

.obstacle {
  position: absolute;
  width: 60px;
  height: 60px;
  background-image: url(cacti.png);
  bottom: 5px;
  top: auto;
  overflow: hidden;
}

.score{
  position: absolute;
  width: inherit;
  top: 20px;
  bottom: auto;
  left: auto;
  right:auto;
  text-align: center;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  font-size: 20px;
}


.gameOver{
  position: absolute;
  width: 0%;
  height:0%;
  background-color: black;
  z-index: 100;
  text-transform: capitalize;
  text-align: center;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  font-size: 40px;
  line-height: 160px;
}

@keyframes slideright {
  from {
      background-position: -1000%;
  }
  to {
      background-position: 0%;
  }
}

@-webkit-keyframes slideright {
  from {
      background-position: -1000%;
  }
  to {
      background-position: 0%;
  }
}

.rainbowOverlay {
  filter: hue-rotate(0deg);
}
.desert {
  position: relative;
  top: 0px;
  background-image: url('t-rex-background.png');
  background-repeat: repeat-x;
  animation: slideright 10s infinite linear;
  -webkit-animation: slideright 10s infinite linear;
  width: 100%;
  height: 100%;
}