body{
font-family: arial, sans-serif, verdana;
height:5000px;
color:white;
margin:0;
padding:0;
}
p{
font-size: 72px;
width: 30%;
position: absolute;
left: 10%;
top: 25%;
padding: 10px 20px;
font-weight: bold;
font-family: Verdana;
text-shadow: 0 1px 1px #000;
}
/*The loading bar*/
.bmeter {
position: absolute;
top: 146px;
left: 0px;
width: 0%;
height: 15px;
background-color: #fff;
opacity: 0.5;
z-index: 16;
}
/*The end screen*/
.theend {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
padding-top: 45%;
padding-left: 60%;
font-size: 72px;
font-weight: bold;
font-family: Verdana;
text-shadow: 0 1px 1px #000;
opacity: 0;
z-index: 13;
}
.content{
position:fixed;
width:100%;
height:100%;
}

.behind, .planet1, .planet2{
display:block;
position:absolute;
}

.behind{
width:100%;
height:110%;
background:url(images/back.jpg) top center no-repeat;
top:0%;
left:0%;
position:absolute;
z-index:-1;
}

.planet1{
width:356px;
height:344px;
background:url(images/bigmoon.png) no-repeat;
left:65%;
top:90%;
}

.planet2{
background:url(images/smallmoon.png) no-repeat;
width:204px;
height:183px;
left:50%;
top:70%;
}
/*For OXP DEMO Only*/
.floating {
position: fixed;
width: 100%;
height: 161px;
top: 0px;
left: 0px;
z-index: 15;
}
.float_inner {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 146px;
z-index: 16;
background-color: #000;
}
@media only screen and (max-width: 1000px) {
p{
font-size: 48px;
}
.planet2{
left: 40%;
background-size: 80%;
}
.planet1 {
background-size: 80%;
}
.theend {
font-size: 48px;
}
}