body {
  margin:0;
  background-color: black;
}

#fond{
  top:50%;left:50%;
    position:absolute;
    width:800px;height:600px;
    margin-left:-400px;
    margin-top:-300px;
    object-fit: scale-down;
    background-image: url(images/nuit_constellation950.png);
    background-position:center center;
    background-repeat: no-repeat;
    background-size: cover;  
}


/*.moon {
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 22px;
  left: 400px;
  width: 200px;
  height: 200px;
  cursor:pointer;
  display:none;
/*  border:solid 1px red;*/


#m01 {
  background-image: url(images/moon_5.png);
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 22px;
  left: 400px;
  width: 200px;
  height: 200px;
  z-index:300;
  cursor:pointer;
    

}

#m02 {
  background-image: url(images/moon_4.png);
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 22px;
  left: 400px;
  width: 200px;
  height: 200px;
  z-index:300;
  cursor:pointer;
  z-index:250;
  display: none;
  
}

#m03 {
  background-image: url(images/moon_3.png);
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 21px;
  left: 400px;
  width: 200px;
  height: 200px;
  z-index:300;
  cursor:pointer;
  z-index:250;
  display: none;

  
}

#m04 {
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 22px;
  left: 400px;
  width: 200px;
  height: 200px;
  z-index:300;
  cursor:pointer;
  z-index:250;
  background-image: url(images/moon_2.png);
  display: none;
  
}

#m05 {
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 21px;
  left: 400px;
  width: 200px;
  height: 200px;
  z-index:300;
  cursor:pointer;
  z-index:250;
  background-image: url(images/moon_1.png);
  display: none;

  
}

#m06 {
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 22px;
  left: 400px;
  width: 200px;
  height: 200px;
  z-index:300;
  cursor:pointer;
  z-index:250;
  background-image: url(images/moon_6.png);
  display: none;

  
}

#m07 {
  background-image: url(images/moon_7.png);
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 22px;
  left: 400px;
  width: 200px;
  height: 200px;
  z-index:300;
  cursor:pointer;
  z-index:250;
  display: none;
  
}

#m08 {
  background-image: url(images/moon_9.png);
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 22px;
  left: 400px;
  width: 200px;
  height: 200px;
  z-index:300;
  cursor:pointer;
  z-index:250;
  display: none;
  
}

#m09 {
  background-image: url(images/moon_8.png);
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 21px;
  left: 400px;
  width: 200px;
  height: 200px;
  z-index:300;
  cursor:pointer;
  z-index:250;
  display: none;
  
}

#m10 {
  background-image: url(images/moon_9.png);
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 22px;
  left: 400px;
  width: 200px;
  height: 200px;
  z-index:300;
  cursor:pointer;
  z-index:250;
  display: none;
  
}

#m11 {
  background-image: url(images/moon_7.png);
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 22px;
  left: 400px;
  width: 200px;
  height: 200px;
  z-index:300;
  cursor:pointer;
  z-index:250;
  display: none;
  
}

#m12 {
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 22px;
  left: 400px;
  width: 200px;
  height: 200px;
  z-index:300;
  cursor:pointer;
  z-index:250;
  background-image: url(images/moon_6.png);
  display: none;

  
}

#m13 {
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 21px;
  left: 400px;
  width: 200px;
  height: 200px;
  z-index:300;
  cursor:pointer;
  z-index:250;
  background-image: url(images/moon_1.png);
  display: none;

  
}

#m14 {
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 22px;
  left: 400px;
  width: 200px;
  height: 200px;
  z-index:300;
  cursor:pointer;
  z-index:250;
  background-image: url(images/moon_2.png);
  display: none;
  
}

#m15 {
  background-image: url(images/moon_3.png);
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 21px;
  left: 400px;
  width: 200px;
  height: 200px;
  z-index:300;
  cursor:pointer;
  z-index:250;
  display: none;
  
}


#m16 {
  background-image: url(images/moon_4.png);
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 22px;
  left: 400px;
  width: 200px;
  height: 200px;
  z-index:300;
  cursor:pointer;
  z-index:250;
  display: none;
  
}