body{
    		overflow:hidden;	
		}

		#sky, #night, #canvas{
    		position:absolute;
    		top:0px;
    		left:0px;
    		right:0px;
    		bottom:0px;
    		width:100%;
		}


    #canvas{
      z-index:6;
    }

    #audioplayer{
      width:40px;
      height:40px;
      left:100%;
      position: absolute;
      margin-left: -60px;
      text-align: center;
      z-index: 8;
      text-decoration: none;
      color:#fff;
    }

    #card{
      width:220px;
      bottom: 0;
      left: 50%;
      margin-left: -110px;
      position: absolute;
      height:240px;
      text-align: center;
      z-index:7;
    }

    #card a:active, a:link, a:hover, a:visited{
      margin: 0px;
      padding: 0.8em;
      padding-left: 3em;
      padding-right: 3em;
      text-decoration: none;
      background-color: #bb2020;
      font-family: Helvetica, sans-serif;
      font-size: 0.7em;
      color:#fff;
    }
		
		#sky{
    		background:#fff url(./img/sky.png) repeat-x top left;
    		background-color: #fff;
  			animation: mymovesky 22s infinite;
    		z-index:1;
		}

		#sun{
    		position:absolute;
    		left:30%;
    		top:10%;
    		width:150px;
    		height:152px;
    		background:transparent url(./img/sun.png) no-repeat center center;
    		z-index:2;
    		animation: mymovesun 22s infinite;
		}


		#night{
    		background-color:#000;
    		z-index:3;
    		opacity:0;
    		filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    		animation: mymovenight 22s infinite;
		}

		#moon{
   		 	position:absolute;
    		left:70%;
    		top:10%;
    		width:150px;
    		height:150px;
    		background:transparent url(./img/moon.png) no-repeat center center;
    		z-index:4;
    		opacity:0;
    		filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    		animation: mymovemoon 22s infinite;
		}

		@keyframes mymovemoon {
 	 		0% {opacity: 0;}
  			25% {opacity: 0;}
  			40% {opacity: 0;}
  			55% {opacity: 1;}
  			70% {opacity: 1;}
  			85% {opacity: 0;}
  			100% {opacity: 0;}
		}


		@keyframes mymovesun {
 	 		0% {top: 10%;}
  			25% {top: 10%;}
  			60% {top: 120%;}
  			75% {top: 120%;}
  			100% {top: 10%;}
		}

		@keyframes mymovenight {
 	 		0% {opacity: 0;}
  			25% {opacity: 0;}
  			40% {opacity: 0;}
  			55% {opacity: 1;}
  			70% {opacity: 1;}
  			85% {opacity: 0;}
  			100% {opacity: 0;}
		}

		@keyframes mymovesky {
 	 		0% {background-color: #fff;}
  			25% {background-color: #fff;}
  			50% {background-color: #4F0030;}
  			75% {background-color: #4F0030;}
  			100% {background-color: #fff;}
		}