#crab {

 height: 60%;
 width: 60%;
 margin: auto;
 vertical-align: middle;
 display: block;
 position: relative;
 z-index: 1;
 
}

#crab:hover {
  -webkit-animation-name: wobble;
  -moz-animation-name: wobble;
  animation-name: wobble;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}

body {
 
 width: 100%;
 height: 100%;
 cursor: url('images/prawncursor.png'), auto;
 filter: invert(100%) saturate(280%);

}

.background-image {

 width: 100%;
 height: 100%;
 display: block;
 margin: auto;
 background-image: url("/images/ocean.gif");
 z-index: 0;

}

table {

 height: 100%;
 width: 100%;
 margin: 0 auto;
 vertical-align: middle;
 position: relative;
 float: right;

}

@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(25%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(25%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(25%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(25%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(25%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(25%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(25%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(25%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  -moz-animation-name: wobble;
  animation-name: wobble;
}