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

body  { 

    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.world {
     overflow: hidden;
     position: relative;
     
}  

.score {
     position: absolute;
     font-size: 3vmin;
     right : 1vmin;
     top : 1vmin;
}

.prev-score {
    
      position: absolute;
      font-size: 3vmin;
      right: 1vmin;
      top : 5vmin;
}

.start-screen { 
    position: absolute;
    font-size: 5vmin;
    top : 50%;
    left :50%;
    transform: translate(-50% , -50%);
    animation: zoomEffect 1s linear infinite;
}



.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;
}

@keyframes zoomEffect { 
     0% {
         transform: translate(-50%, -50%) scale(1);
     }
 
     50% {
         transform: translate(-50%, -50%) scale(1.2);
     }
 
     100% { 
         transform: translate(-50%, -50%) scale(1);
     }
 }