body { background-color: grey; color: black; font-family: Verdana; font-size:34; }

.eclipse-gif { Width:180px; Height:180px; top: 50%; left: 35%;  border-radius: 100%; }

.box3 { display: flex; justify-content: center; align-items: center; height: 0px; Width:0px ; margin-top: 25%; left:50%;  
border-radius: 100% ; background-color: black;    position: absolute;}

.center { display: flex; justify-content: center; align-items: center; height: 200px; Width:200px ; margin-top: 25%; left:50%;  
border-radius: 100% ; background-color: black;   animation: rotate1 9s linear infinite; position: relative; }

.box  { display: flex; justify-content: center; align-items: center; height: 106px; Width:170px ; Margin-top: 10px; Margin-left: 40%;
 ; transform: translateX(1000px); animation: rotate2 9s linear infinite; position:absolute ; z-index: 5; }

.box2 { display: flex; justify-content: center; align-items: center; height: 106px; Width:170px ; Margin-top:470px; Margin-left: 40%;
 ; animation: rotate2 9s linear infinite; position:absolute ; z-index: 6; transform: translateX(1000px)}

.box4 { display:flex; justify-content: center; align-items: center; height: 106px; Width:170px ; Margin-top: 470px; Margin-left: 69%;
 ; animation: rotate2 9s linear infinite; position:absolute ; z-index: 7; transform: translateX(1000px)}

.box5 { display:flex; justify-content: center; align-items: center; height: 106px; Width:170px ; Margin-top: 470px; Margin-left: 16%;
 ; animation: rotate2 9s linear infinite; position:absolute ; z-index: 8; transform: translateX(1000px)}

.box6 { display:flex; justify-content: center; align-items: center; height: 106px; Width:170px ; Margin-top: 10px; Margin-left: 16%;
 ; animation: rotate2 9s linear infinite;  position:absolute ; z-index: 9;  transform: translateX(1000px)}

.box7 { display:flex; justify-content: center; align-items: center; height: 106px; Width:170px ; Margin-top: 225px; Margin-left: 16%;
 ; animation: rotate2 9s linear infinite;  position:absolute ; z-index: 10;  transform: translateX(100px)}

.box8 { display:flex; justify-content: center; align-items: center; height: 106px; Width:170px ; Margin-top: 10px; Margin-left: 69%;
 ; animation: rotate2 9s linear infinite;  position:absolute ; z-index: 11; transform: translateX(100px)}

.box9 { display:flex; justify-content: center; align-items: center; height: 106px; Width:170px ; Margin-top: 225px; Margin-left: 69%;
 ; animation: rotate2 9s linear infinite;  position:absolute ; z-index: 12; }


 
 


@keyframes rotate1 {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rotate2 {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}


/* mnmam */
.A-link  { Height: 106px; Width:170px; top: 50%; left: 100%;}

.A2-link { Height: 106px; Width:170px; top: 50%; left: 100%; }

.A4-link { Height: 106px; Width:170px; top: 50%; left: 100%; }

.A5-link { Height: 106px; Width:170px; top: 50%; left: 100%; }

.A6-link { Height: 106px; Width:170px; top: 50%; left: 100%; }

.A7-link { Height: 106px; Width:170px; top: 50%; left: 100%; }

.A8-link { Height: 106px; Width:170px; top: 50%; left: 100%; }

.A9-link { Height: 106px; Width:170px; top: 50%; left: 100%; }

/* B Section */

.B-link  { Height: 106px; Width:170px; bottom: 11px; left: 10px; }

.B2-link { Height: 106px; Width:170px; bottom: 11px; left: 10px; }

.B4-link { Height: 106px; Width:170px; bottom: 11px; left: 10px; }

.B5-link { Height: 106px; Width:170px; bottom: 11px; left: 10px; }

.B6-link { Height: 106px; Width:170px; bottom: 11px; left: 10px; }

.B7-link { Height: 106px; Width:170px; bottom: 11px; left: 10px; }

.B8-link { Height: 106px; Width:170px; bottom: 11px; left: 10px; }

.B9-link { Height: 106px; Width:170px; bottom: 11px; left: 10px; }

/* Transitions :P */

.B-link  { Position:absolute; opacity: 0; transition: opacity 0.5s; }
.box2:hover .B-link { opacity: 1; }

.B2-link { Position:absolute; opacity: 0; transition: opacity 0.5s; }
.box:hover .B2-link { opacity: 1; }
  
.B4-link { Position:absolute; opacity: 0; transition: opacity 0.5s; }
.box5:hover .B4-link { opacity: 1; }

.B5-link { Position:absolute; opacity: 0; }
.box6:hover .B5-link { opacity: 1; }

.B6-link { Position:absolute; opacity: 0; transition: opacity 0.5s; }
.box7:hover .B6-link { opacity: 1; }

.B7-link { Position:absolute; opacity: 0; transition: opacity 0.5s; }
.box8:hover .B7-link { opacity: 1; }

.B8-link { Position:absolute; Opacity: 0; Transition: opacity 0.5s; }
.box9:hover .B8-link { opacity: 1; }

/* Comz! :P */

.MessageContainer { display:flex; justify-content: center; align-items: center; height: 106px; Width:170px ; Margin-top: 225px; Margin-left: 69% ;}