#robot{
    scale: 0.5;
    position: absolute;
    top: 18.6%;
    left: calc(50%-447.5px);
    transform-origin: center;
}
#robot2{
    scale: 0.5;
    position: absolute;
    top: 18.6%;
    left: 1500px;
    transform-origin: center;
}

body {
    background-color: rgb(108, 197, 227); 
}

#grass {
    background-color: darkgreen;
}

#dirt {
    background-color: rgb(103, 72, 46)43;
}

.shake {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;
  
    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}

@keyframes shake {
    0% {  translate:1px 1px; rotate:0deg; }
    10% { translate:-1px -2px; rotate:-1deg; }
    20% { translate:-3px 0px; rotate:1deg; }
    30% { translate:3px 2px; rotate:0deg; }
    40% { translate:1px -1px; rotate:1deg; }
    50% { translate:-1px 2px; rotate:-1deg; }
    60% { translate:-3px 1px; rotate:0deg; }
    70% { translate:3px 1px; rotate:-1deg; }
    80% { translate:-1px -1px; rotate:1deg; }
    90% { translate:1px 2px; rotate:0deg; }
    100% {translate:1px -2px; rotate:-1deg; }
}

#left, #right, #up, #down{
    width: 50px;
    position: fixed;
    bottom: 10px;
    height: 50px;
    border: 1px solid #ffffff;
    border-radius: 13px;
    font-size: 26px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: rgb(0, 225, 255);
    z-index: 1;
}
#right{
    right: 10px;
}
#up{
    bottom: 70px;    
}
#down, #up{
    left: 50%;
    margin-left: -25px;
}