html, body {
  height:100%;
}

body {
  background-color: #CCC;
  margin: 0;
  padding: 0;
}

h3 {
  font-size:22px;
  font-family:"Open Sans", Arial;
  line-height:1em;
  font-weight:bold;
  margin-left:1em;
  white-space:nowrap;
}

/* main wrapper */

#main {
  background: #666;
  width: 600px;
  /*100%*/
  /* makes responsive */
  
  height: 400px;
  /*100%*/
  /* makes responsive */
  
  position: relative;
  /* absolute */
  margin-left:1.5em;
  border:1px solid #777;
}


/* foreground and background */

#sky {
  background:#49cfef;
  background: linear-gradient(to bottom, #49cfef, #a7f3f2);
  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
  /*300px*/
  
  z-index: 0;
}

#ground {
  background:#666;
  background: linear-gradient(to bottom, #666666, #999999);
    
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;  
  z-index: 0;
}
/* svg styles */

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

#mc_shadow {
  position: absolute;
  left: 300px;
  top: 324px;
}

#mc_shadow #shadow_path {
  fill-opacity: 1;
}

#mc_ball {
  position: absolute;
  top: 0;
  left: 300px;
  top: 279px;
}

#mc_ball_base {
  position: absolute;
  top: 0;
}