html, body {
  background:#111;
  color:white;
  text-align:left;
  font-family:monospace;
  overflow:hidden;
  padding:0;
  margin:0;
  
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index:-1;  
  cursor:crosshair;
}

#game {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow:hidden;
}

#info {
  padding:10px;
  position:fixed;
  pointer-events:none;
}

#score {
  position:fixed;
  top:10px;
  right:10px;
  text-align:right;
}

#sun {
  width:200px;
  height:200px;
  border-radius:50%;
  background:radial-gradient(circle at 70% 70%, darkorange, gold);
  box-shadow:10px 10px 100px 10px gold;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  animation:sun 10s linear infinite;
  z-index:-1;
  color:darkOrange;
  font-size:72px;
  line-height:200px;
  text-align:center;
  transform-origin:center;
}
@keyframes sun {
 100% { transform:translate(-50%, -50%) rotate(360deg); }
}

@keyframes sun2 {
  50% { transform:translate(-50%, -50%) scale(2); } 
  100% { transform:translate(-50%, -50%) scale(0); } 
}

.planet {
  width:50px;
  height:50px;
  border-radius:50%;
  position:absolute;
  transition:.25s; 
}

#burnOut {
  pointer-events:none;
  animation:burnOut 1s linear forwards;
}
@keyframes burnOut {
  100% { transform:scale(.1) rotateY(720deg); }
}

.moon:after {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ddd;
  box-shadow:-5px 5px 4px #111;
  content:'';
  position:absolute;
  left:-10%;
  top:-10%;
  animation:moon 10s linear infinite;
}
@keyframes moon {
  25% { left:50%; top:50%; transform:scale(2.5);  opacity:1;}
  50% { left:100%; top:100%; transform:scale(1);  opacity:1;}
  65% { transform:rotate(360deg) scale(0); opacity:0; }
  90% { transform:rotate(360deg) scale(0);  opacity:0; }
  95% { transform:rotate(360deg) scale(1);  opacity:1;}
  100% { transform:rotate(360deg) scale(1);  opacity:1;}
}

.rings:before {
  width:130%;
  height:15%;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.55);
  border-top:0;
  content:'';
  position:absolute;
  left:calc(-15% - 3px);
  top:50%;
  transform:skewY(-10deg);
  animation:rings 5s linear infinite;
}

.double:before {
  width:130%;
  height:15%;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  border-top:0;
  content:'';
  position:absolute;
  left:-17%;
  top:50%;
  transform:skewY(15deg);
  animation:double 7s linear infinite;
}
.double:after {
  width:130%;
  height:15%;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  border-top:0;
  content:'';
  position:absolute;
  left:-17%;
  top:40%;
  transform:skewY(-15deg);
  animation:double2 7s linear infinite;
}

@keyframes rings {
  50% { transform:translateY(-100%) skewY(-10deg) }
}

@keyframes double {
  50% { transform:skewY(-15deg) }
}
@keyframes double2 {
  50% { transform:skewY(15deg) }
}

.spin {
  animation:spin .5s linear forwards
}
@keyframes spin {
  50% { transform:scale(1.25); }
}

#thanks {
  position:fixed;
  bottom:10px;
  right:10px;
  font-size:10px;
}

#thanks a {
  color:white;
}