body{
	width: 100%;
	height: 100%;
	background-color: #020614;
	overflow: hidden;
}

#sound {
   width: 30px;
   height: 25px;
   top: 30px;
   left: 30px;
   background-color: transparent;
   position: absolute;
   background-position: center;
   background-image: url(../img/speaker_off.png);
   background-position: left;
   background-size: contain;
   background-repeat: no-repeat;
   cursor: pointer;
   opacity: 0.6;
}

audio {
    z-index: auto;
}
canvas{
    position: absolute;
    top: 0;
    left: 0;
    z-index: auto;
}
.stars{
    width: 0;
    height: 0;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-bottom: 4px solid white;
    position: absolute;
    opacity: 0;
}
.dots{
	width: 1px;
    height: 1px;
    position: absolute;
    background-color: #b0e0e6;
    opacity: 0.3;
}
.asteroids{
	width: 1px;
    height: 1px;
    position: absolute;
    background-color: #b0e0e6;
    opacity: 0.8;
    border-radius: 6px;
}
#comet{
	width: 100px;
    height: 78px;
    background-image: url(../img/comet.png);
	background-position: center;
	position: absolute;
	background-color: transparent;
	visibility: hidden;
}
#saturn{
	width: 28px;
	height: 20px;
	background-color: transparent;
	position: relative;
	background-position: center;
	background-image: url(../img/saturn.png);
	background-position: center;
    opacity: 0.8;
    background-size: contain;
}
#uranus{
	width: 10px;
	height: 10px;
	background-color:#149923;
	border-radius: 20px;
	position: relative;
	background-position: center;
	background-image: url(../img/uran.png);
	background-position: center;
	background-size: contain;
}
#jupyter{
	width: 17px;
	height: 17px;
	background-color: #020614;
	border-radius: 17px;
	position: relative;
	background-image: url(../img/jupiter.png);
	/*background-position: center;*/
	background-repeat: no-repeat;
	/*box-shadow: -9px 0px 0px 0px rgba(0,0,0,0.76) inset;*/
	background-size: contain;
}
.planet-shadow{
    width: 20px;
	height: 20px;
    background-color: teal; /*#020614;*/
    position: relative;
    top: -5px;
}

#mars{
	width: 10px;
	height: 10px;
	background-color: #dd331d;
	border-radius: 20px;
	position: relative;
	background-image: url(../img/mars.png);
	background-position: center;
	background-size: contain;
}
#venus{
	width: 12px;
	height: 12px;
	background-color: red;
	border-radius: 24px;
	position: relative;
	background-image: url(../img/venus.png);
	background-position: center;
	background-size: contain;
}
#mercury{
	width: 4px;
	height: 4px;
	background-color: #ffbf7f;
	border-radius: 8px;
	position: absolute;
	background-size: contain;
}

#neptune{
	width: 10px;
	height: 10px;
	background-color: #113dd8;
	border-radius: 20px;
	position: relative;
	background-image: url(../img/neptun.png);
	background-position: center;
	background-size: contain;
}
#earth-shadow {
    background-color: #020614;
    border-radius: 16px;
    width: 16px;
	height: 16px;
	position: absolute;
	z-index: 1000;
	opacity: 0.85;
	margin-left: 0px;
	margin-top: 0px;
}

#earth{
	width: 16px;
	height: 16px;
	background-color: #020614;
	border-radius: 32px;
	position: relative;
	background-image: url(../img/earth.png);
	background-repeat: no-repeat;
	background-size: contain;
}
#mercury-container, #venus-container,
 #earth-container, #mars-container,
 #jupyter-container, #saturn-container,
 #uranus-container, #neptune-container{
    /*box-shadow: -8px 0px 0px 0px rgba(0,0,0,0.76) inset;*/
    position: absolute;
}

#sun{
	width: 30px;
	height: 30px;
	top: 44%;
    left: 48%;
	position: absolute;
	transform-origin: center center;
	z-index: -1;
}

#sun-container{
    width: 27px;
	height: 27px;
	align: center;
	margin-left: 3px;
	background-color: transparent;
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url(../img/sunb.png);
	transform-origin: center center;
}
.blemish{
	position: inherit;
	width: 20px;
	height: 20px;
	opacity: 0.4;
	background-color: #ffffff;
}