html, body
{
padding: 0 0 0 0;
border-width: 0 0 0 0;
border-style: none;
margin: 0 0 0 0;
color: rgb(255,255,255);
background-color: rgb(0,0,0);
width: 100%;
height: 100%;
overflow: hidden;
}

#espace
{
position: absolute;
top: 0px;
left: 0px;
width: 768px;
height: 768px;
/*border: solid 1px red;*/

perspective: 500px;
transform-origin: 0% 0% 0px;
perspective-origin:50% 50%;
}
#titre
{
position: absolute;
top: 20px;
left: 184px;
width: 400px;
height: 40px;

font-weight: bold;
text-align: center;
font-size: 30px;
color: rgba(255,255,255,1);
opacity: 1;

/*border: solid 1px green;*/

}
#galaxy
{
opacity: 1;
transition: opacity 0.5s ease;
position: absolute;
top: 184px;
left: 184px;
width: 400px;
height: 400px;
/*border: solid 1px white;*/
perspective: 700px;
perspective-origin:50% 0%;
transform-origin: 50% 50% 0px;
}
#galaxy:hover
{
opacity: 1;
}
#anneaux
{
position: absolute;
top: -200px;
left: -200px;
width: 800px;
height: 800px;

transform-origin: 50% 50% 0px;
transform: rotateX(90deg);

opacity: 0.4;
background-image: url('galaxy.png');
background-size: 100% 100%;
background-repeat: no-repeat;
/*border: solid 1px blue;*/
}
.etoile
{
opacity: 1;
/*border: solid 3px yellow;*/
position: absolute;
transform-origin: 50% 50% 0px;
width: 40px;
height: 40px;

display: inline-block;
background-image: url('etoile.png');
background-size: 100% 100%;
background-repeat: no-repeat;

}
#etoil1
{
opacity: 1;
width: 200px;
height: 200px;
}