style.css

@keyframes dodo-head         { from { right: -8px } to { right: -3px } }
@-o-keyframes dodo-head      { from { right: -8px } to { right: -3px } }
@-moz-keyframes dodo-head    { from { right: -8px } to { right: -3px } }
@-webkit-keyframes dodo-head { from { right: -8px } to { right: -3px } }

@keyframes waves {
  from { background-position: 0px 0px }
  to { background-position: 0px 30px }
}
@-o-keyframes waves {
  from { background-position: 0px 0px }
  to { background-position: 0px 30px }
}
@-moz-keyframes waves {
  from { background-position: 0px 0px }
  to { background-position: 0px 30px }
}
@-webkit-keyframes waves {
  from { background-position: 0px 0px }
  to { background-position: 0px 30px }
}

@keyframes exit {
  0% { transform: scale(1); opacity: 0 }
  30% { transform: scale(0.9); opacity: 1 }
  100% { transform: scale(0); opacity: 0.5 }
}
@-o-keyframes exit {
  0% { -o-transform: scale(1); opacity: 0 }
  30% { -o-transform: scale(0.9); opacity: 1 }
  100% { -o-transform: scale(0); opacity: 0.5 }
}
@-moz-keyframes exit {
  0% { -moz-transform: scale(1); opacity: 0 }
  30% { -moz-transform: scale(0.9); opacity: 1 }
  100% { -moz-transform: scale(0); opacity: 0.5 }
}
@-webkit-keyframes exit {
  0% { -webkit-transform: scale(1); opacity: 0 }
  30% { -webkit-transform: scale(0.9); opacity: 1 }
  100% { -webkit-transform: scale(0); opacity: 0.5 }
}

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: #000;
  color: #FFF;
  font-family: Liberation Sans, Arial, sans-serif;
  font-size: 16px;
  line-height: 19px;
}

.info {
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -200px;
  padding: 0px 20px 10px 20px;
  width: 400px;
  max-height: 460px;
  background: #EEE;
  border: 3px solid #FFF;
  border-radius: 10px;
  box-shadow: 5px 5px 30px #020;
  color: #444;
  text-align: justify;
  z-index: 100;
}

.info h1 {
  font-size: 22px;
  line-height: 26px;
  text-align: center;
  margin: 5px 0px;
}

.info p {
  margin: 10px 0px;
}

.info ul {
  padding-left: 20px;
}

.info .bts {
  text-align: center;
}

#intro {
  top: 30px;
}

#intro d {
  left: 330px;
  top: 285px;
  transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
#intro d span {
  font-size: 12px;
  white-space: nowrap;
  position: absolute;
  left: -45px;
  top: -30px;
  transform: rotate(200deg);
  -o-transform: rotate(200deg);
  -moz-transform: rotate(200deg);
  -webkit-transform: rotate(200deg);   
}

button {
  font-size: 200%;
  padding: 0 0.5em;
}

#area {
  width: 800px;
  height: 500px;
  background: #090;
  box-shadow: inset 0 0 200px rgba(0,50,0,0.8);
  position: relative;
  overflow: hidden;
  margin: auto;
  border-radius: 30px;
}

.scoreboard {
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 5px 30px;
  background: rgba(0,0,0,0.3);
  z-index: 50;
  border-radius: 0 0 20px 0;
}

d { /* Dodo */
  position: absolute;
  left:0;
  top:0;
  margin: -15px 0 0 -15px;
  width: 26px;
  height: 26px;
  background: #F08;
  background: radial-gradient(circle, #F6E 5%, #B06 90%);
  border: 2px solid #000;
  border-radius: 20px;
  box-shadow: 0 0 11px rgba(0,0,0,0.8);
  z-index: 20;
}

d h { /* Dodo's head */
  animation: dodo-head 0.2s linear 0s infinite alternate;
  -webkit-animation: dodo-head 0.2s linear 0s infinite alternate;
  z-index: 10;
  position: absolute;
  top: 3px;
  right: -6px;
  width: 16px;
  height: 16px;
  background: #F08;
  background: radial-gradient(circle, #F6E 5%, #B06 90%);
  border: 2px solid #000;
  border-radius: 10px;
}

d:hover, d:hover h {
  border: 2px solid #700;
  background: radial-gradient(circle, #FE6 5%, #B60 90%);
}

d.sel, d.sel h {
  border: 2px solid #036;
  background: radial-gradient(circle, #6EF 5%, #06B 90%);
}

d.sel {
  box-shadow: 0 0 30px rgba(255,255,0,1), 0 0 30px rgba(255,255,0,1);
}

d.drowned, d.fallen, d.saved {
  opacity: 0;
  transition: 3s;
  -o-transition: 3s;
  -moz-transition: 3s;
  -webkit-transition: 3s;
}

d.drowned h, d.fallen h, d.saved h { /* Dodo's head */
  animation: dodo-head 0.4s linear 0s infinite alternate;
  -o-animation: dodo-head 0.4s linear 0s infinite alternate;
  -moz-animation: dodo-head 0.4s linear 0s infinite alternate;
  -webkit-animation: dodo-head 0.4s linear 0s infinite alternate;
}

d.saved, d.saved h {
  background: radial-gradient(circle, #FFF 5%, #888 90%);
}

d v { /* Dodo's beak */
  position: absolute;
  top: 5px;
  right: -10px;
  width: 0px;
  height: 0px;
  border: 3px solid transparent;
  border-left: 7px solid #F90;
}

d i { /* Dodo's left eye */
  position: absolute;
  top: 3px;
  right: 3px;
  width: 3px;
  height: 3px;
  background: #000;
  border-radius: 2px;
}

d i:last-child { /* Dodo's right eye */
  top: 10px;
}

l { /* Light */
  position: absolute;
  border-radius: 100px;
  background: radial-gradient(circle, #FFF 33%, rgba(255,255,255,0) 100%);
  margin: -9px 0 0 -9px;
}

water { /* Water */
  position: absolute;
  border-radius: 15px;
  background: #09E;
  background: linear-gradient(22.5deg, #09E 2%, #07D 23%, #07D 27%, #09E 48%, #09E 52%, #07D 73%, #07D 77%, #09E 97%);
  background-size: 75px 30px;
  box-shadow: inset 0 0 45px rgba(150,220,255,0.8),  inset 0 0 50px rgba(0,200,255,0.8), 15px 15px 30px rgba(50,230,50,0.3);
  animation: waves 3s linear 0s infinite normal;
  -o-animation: waves 3s linear 0s infinite normal;
  -moz-animation: waves 3s linear 0s infinite normal;
  -webkit-animation: waves 3s linear 0s infinite normal;
}
water.noAnim {
  animation: none;
  -o-animation: none;
  -moz-animation: none;
  -webkit-animation: none;
}

hole { /* Hole */
  position: absolute;
  border-radius: 15px;
  background: #210;
  background-image: radial-gradient(ellipse, #000 20%, #420 80%);
  box-shadow: inset 0 0 20px rgba(150,100,0,1), inset 0 0 50px rgba(150,100,0,0.9), 15px 15px 30px rgba(50,230,50,0.3);
}

exit { /* Level Target */
  position: absolute;
}

e { /* Exit hole */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(50,150,0,0) 40%, #FF8 100%);
  animation: exit 2s ease-out 0s infinite normal;
  -o-animation: exit 2s ease-out 0s infinite normal;
  -moz-animation: exit 2s ease-out 0s infinite normal;
  -webkit-animation: exit 2s ease-out 0s infinite normal;
}

e:last-child {
  animation: exit 2s ease-out 1s infinite normal;
  -o-animation: exit 2s ease-out 1s infinite normal;
  -moz-animation: exit 2s ease-out 1s infinite normal;
  -webkit-animation: exit 2s ease-out 1s infinite normal;
}

m { /* mouse click -- Dodo target */
  position: absolute;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  left: -99px;
  z-index: 10;
}

x { /* mouse X */
  position: absolute;
  left: 35%;
  width: 30%;
  height: 100%;
  border-radius: 10px;
  background: #D00;
}

x:last-child {
  transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}