html, body {
    margin: 0;
    padding:0;
    height: 100%;
    background-color:#000000;
}

body
{
  background-image:url('../Art/LoadingScene/Loading_Fondo.png');
  background-repeat:repeat;
}

#gameArea {
  position: absolute;
  left:     50%;
  top:      50%;
}

#gameCanvas {
  width: 100%;
  height: 100%;
}

/*************************/
/* Orientation handling  */
/*************************/

@-webkit-keyframes earthquake {
  0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
  10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
  20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
  30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
  40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
  50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
  60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
  70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
  80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
  90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
  100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

@-moz-keyframes earthquake {
  0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
  10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
  20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
  30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
  40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
  50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
  60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
  70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
  80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
  90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
  100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}

@-o-keyframes earthquake {
  0% { -o-transform: translate(2px, 1px) rotate(0deg); }
  10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
  20% { -o-transform: translate(-3px, 0px) rotate(1deg); }
  30% { -o-transform: translate(0px, 2px) rotate(0deg); }
  40% { -o-transform: translate(1px, -1px) rotate(1deg); }
  50% { -o-transform: translate(-1px, 2px) rotate(-1deg); }
  60% { -o-transform: translate(-3px, 1px) rotate(0deg); }
  70% { -o-transform: translate(2px, 1px) rotate(-1deg); }
  80% { -o-transform: translate(-1px, -1px) rotate(1deg); }
  90% { -o-transform: translate(2px, 2px) rotate(0deg); }
  100% { -o-transform: translate(1px, -2px) rotate(-1deg); }
}

@-ms-keyframes earthquake {
  0% { -ms-transform: translate(2px, 1px) rotate(0deg); }
  10% { -ms-transform: translate(-1px, -2px) rotate(-1deg); }
  20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }
  30% { -ms-transform: translate(0px, 2px) rotate(0deg); }
  40% { -ms-transform: translate(1px, -1px) rotate(1deg); }
  50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }
  60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }
  70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }
  80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }
  90% { -ms-transform: translate(2px, 2px) rotate(0deg); }
  100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }
}

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

.earthquake {
    -webkit-animation-name: earthquake;
    -webkit-animation-duration: 0.8s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: earthquake;
    -moz-animation-duration: 0.8s;
    -moz-transform-origin:50% 50%;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -o-animation-name: earthquake;
    -o-animation-duration: 0.8s;
    -o-transform-origin:50% 50%;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;

    -ms-animation-name: earthquake;
    -ms-animation-duration: 0.8s;
    -ms-transform-origin:50% 50%;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: earthquake;
    animation-duration: 0.8s;
    transform-origin:50% 50%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}