body{
background-color: #8bf0e6;
}

#welcome{
height: 20%;
max-width: 100%;
position: absolute;
top:  0%;
left: 0%;
transform: translate(10px, 10px);
z-index: 4;

opacity: 0;
animation: fade-in-out 4s ease-in-out infinite;
}

#mainlogo{
height: 60%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 4;
}

#road{
height: 110%;
max-width: 100%;
position: fixed;
bottom: 1;
left: 0;
z-index: 1;

animation-name: roadbounce;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}


#bobatruck{
height: 70%;
max-width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 3;

animation-name: bounce;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
}




#menu{
height: 20%;
max-width: 100%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, 140%);
z-index: 4;
}




.table {
height: 40%;
max-width: 120%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(30%, 44%);
z-index: 3;
}

#bag1{
height: 14%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(270%, 170%);
z-index: 4;
}

#bag1:hover{
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}

#bag2{
  height: 14%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(265%, 170%);
z-index: 4;
}

#bag2:hover{
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}

#bag3{
height: 14%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(325%, 170%);
z-index: 4;
}

#bag3:hover{
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}


#bag4{
height: 14%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(385%, 170%);
z-index: 4;
}

#bag4:hover{
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}



/* Animation */

@keyframes fade-in-out {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes roadbounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}


@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}




@media only screen and (max-width: 768px) {

  #welcome{
    height: 10%;
    max-width: 100%;
    transform: translate(5%, 120%);
    animation: none;
    opacity: 1;
    }

  #mainlogo{
    height: 25%;
    transform: translate(-100%, -190%);
    
  }

  #bobatruck {
    height: 55%;
    width: 80%;
    position: fixed;
    bottom: 0;
    left: -10%;
    /* transform: translateX(0%); */
  }
  

  .table {
    height: 38%;
    max-width: 120%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-25%, 52%); /* Side & Up */
      
    }

    #bag1{
      transform: translate(-30%, 173%); /* Side & Up */
      }
      

      #bag2{
      transform: translate(10%, 174%); /* Side & Up */
      }

      

      #bag3{
        transform: translate(65%, 170%); /* Side & Up */
        }

        #bag4{
          transform: translate(124%, 170%); /* Side & Up */
          }

          #bag1 #bag2 #bag3 #bag4:hover{
            display: none;
          }
          
          /* Menu Sign */
          #menu{
            height: 13%;
            max-width: 45%;
            transform: translate(-115%, 290%); /* Side & Up */
           
            }
}

@media only screen and (max-width: 480px) {

  #welcome{
    height: 20%;
    max-width: 100%;

    }
  
  #road{
    height: 100%;
    max-width: 100%;
  }
 
  

  
}