/* sunshine */
.sun { 
  position: absolute;
	top:-90px;
	left:410px;
	right:0;
	bottom:0;
	margin: auto;  
	width:70px;
	height:70px;
	border-radius:50%;	
	background:#ffe5a3;
	opacity:0.9;			
	box-shadow: 0px 0px 40px 15px #fccd4d;  
}

.ray_box {
  position: absolute;
  margin: auto;
	top:0px;
	left:0;
	right:0;
	bottom:0;	
  width:70px;  
  -webkit-animation: ray_anim 120s linear infinite;
  animation: ray_anim 120s linear infinite;
}
.ray {  
    background: #ffc700; /* Old browsers */
background: -moz-linear-gradient(top, #ffc700 0%, #ffd84f 50%, #fbdf93 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffc700 0%,#ffd84f 50%,#fbdf93 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffc700 0%,#ffd84f 50%,#fbdf93 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc700', endColorstr='#fbdf93',GradientType=0 );
    margin-left:10px;
    border-radius:80% 80% 0 0;
    position:absolute;
    opacity:0.1;
}

.ray1 {    
    height:170px;
    width:30px;
   -webkit-transform: rotate(180deg);
    top:-175px;
    left: 15px;
}
.ray2 {
    height:100px;
    width:8px;
   -webkit-transform: rotate(220deg);
    top:-90px;
    left: 75px;
}
.ray3 {
    height:170px;
    width:50px;
   -webkit-transform: rotate(250deg);
    top:-80px;
    left: 100px;
}
.ray4 {
    height:120px;
    width:14px;
   -webkit-transform: rotate(305deg);
    top:30px;
    left: 100px;
}
.ray5 {
    height:140px;
    width:30px;
   -webkit-transform: rotate(-15deg);
    top:60px;
    left: 40px;
}
.ray6 {
    height:90px;
    width:50px;
   -webkit-transform: rotate(30deg);
    top:60px;
    left: -40px;
}
.ray7 {
    height:180px;
    width:10px;
   -webkit-transform: rotate(70deg);
    top:-35px;
    left: -40px;
}
.ray8 {
    height:120px;
    width:30px;
   -webkit-transform: rotate(100deg);
    top:-45px;
    left:-90px;
}
.ray9 {
    height:80px;
    width:10px;
   -webkit-transform: rotate(120deg);
    top:-65px;
    left:-60px;
}
.ray10 {
    height:190px;
    width:23px;
   -webkit-transform: rotate(150deg);
    top:-185px;
    left: -60px;
}

/*
@-webkit-keyframes ray_anim { 
		0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}    
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
 end sunshine */
/* smoke */
canvas {
    position:relative;
    left: 0;
    right: 0;
margin: 0 auto;
    width: 680px;
height: 370px;
}

img{display:none;}

#stripes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
    
}
h1 {
  position: absolute;
  right: 0;
  bottom: 10vh;
  left: 0;
  z-index: -1;
  color: #222;
  font-size: 12vw;
  text-align: center;
}

.arcadeScreen{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
    opacity:0.2;
    margin:0 auto;
  position: absolute;       background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEElEQVQIW2NkYGCYycgABAADrwCcot0erQAAAABJRU5ErkJggg==) repeat;
}
#dudescar {
    position: absolute;
    top:40px;
    left: -50px;
    /*left:-1000px;*/
}
#schatten {
opacity: 0.8;
}
#planet {
  position: absolute;
    top:1500px;
   left: 140px;
   -webkit-transform: scale(8);
-moz-transform: scale(8);
-ms-transform: scale(8);
-o-transform: scale(8);
transform: scale(8);
}
#heart {
    position: absolute;
    color: #ff0000;
    top: 20px;
    left: 20px;
    width: 20px;
    height: 20px;
    
background-color: transparent;
opacity:1;
}
body{
  background: #333;
  margin: 150px 0;
  text-align: center;
  color: #fff;
}
#sea {
    position: absolute;
    background: #fcc583; /* Old browsers */
background: -moz-linear-gradient(top, #fcc583 0%, #e5d4ac 22%, #ccc3b1 41%, #93b5bc 57%, #79969e 76%, #4a6f87 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fcc583 0%,#e5d4ac 22%,#ccc3b1 41%,#93b5bc 57%,#79969e 76%,#4a6f87 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fcc583 0%,#e5d4ac 22%,#ccc3b1 41%,#93b5bc 57%,#79969e 76%,#4a6f87 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcc583', endColorstr='#4a6f87',GradientType=0 );
    height: 160px;
    width: 640px;
    left:0;
    top: 180px;
    opacity: 1
}
#road {
    position: absolute;
    background-color: #615b51; /* Old browsers */

    height: 50px;
    width: 640px;
    left:0;
    top: 350px;
    opacity: 1
}
.content{
position:absolute;
    border: 1px solid;
    border-color: #111;
    top:20px;
    left:0;
    right:0;
    margin: 0 auto;
    height: 440px;
width: 500px;
    overflow:hidden;
    background-color: #ffbe78;
}
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
     background: #333 ; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:50px;
    height:30px;
    position:fixed;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
   margin:-25px 0 0 -15px; /* is width and height divided by two */
}

.spinner {
  margin: 0px auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #fff;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}