*,
*::before,
*::after {
  box-sizing: border-box;
  user-select: none;
}

.world {
  overflow: hidden;
  position: relative;
  max-width: 1000px;
  width: 100% !important;
  background-image: url('../game/imgs/background.jpg');
  background-position: 0 -220px;
  background-size: cover;
  /* animation: land 30s linear infinite; */
}

/* @keyframes land {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
} */

.score {
  position: absolute;
  font: 400 2.8rem 'Iceland';
  text-shadow: 2px 2px gray;
  color: white;
  right: 5vmin;
  top: 5vmin;
}

.start-screen {
  position: absolute;
  font: 400 2.4rem 'Bungee';
  text-shadow: 1px 1px gray;
  color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hide {
  display: none;
}

.ground {
  --left: 0;
  position: absolute;
  width: 300%;
  bottom: 0;
  left: calc(var(--left) * 1%);
}

.dino {
  --bottom: 0;
  position: absolute;
  left: 1%;
  height: 30%;
  bottom: calc(var(--bottom) * 1%);
}

.cactus {
  position: absolute;
  left: calc(var(--left) * 1%);
  height: 30%;
  bottom: 0;
}