*{
  margin:0;
  padding:0;
}

/*titre animé*/
#texteanime {
  position: absolute;
  color: rgba(127, 205, 9, 0.773);
  margin-top: -400px;
  margin-left: 310px;
  z-index: 100;
  font-size: 10mm;
  animation-delay: 2s;
  animation-duration: 7s;
  animation-name: slidein;
  }

.disques {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100vh;
}

.center {
  position:absolute;
  top:42%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
}

/*fond*/
.espace1 {
    width:100vw; 
    height:100vh;
    object-fit:cover;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:-1;
  }

/*C1*/
.circleBase {
border-radius:50%;
width:74mm;
height:74mm;
background:rgb(255, 255, 255);
z-index:95;
margin-left:1mm;
  }

/*C2*/
#c2 {
  height:101mm;
  width:101mm;
  border-radius:100% 0% 10% 0% / 100% 0% 0% 0% ;
  transform:rotate(90deg); 
  background-color: rgb(190, 172, 172);
  transform-origin:50% 50%;
  z-index:90;
  margin-left:101mm;
  margin-top:27mm;
  }

/*C3*/
#box {
height: 64mm;
width: 128mm;
border-radius: 50% 50% 0 0/100% 100% 0 0;
transform:rotate(-90deg); 
background-color: #303639;
z-index:85;
margin-left:-64mm;
}

#box3 { 
  height:120mm;
  width:120mm;
  border-radius:100% 0% 10% 0% / 100% 0% 0% 0% ;
  transform:rotate(90deg); 
  background-color:#000000;
  }
  #box4 {
  height:120mm;
  width:120mm;
  border-radius:100% 0% 10% 0% / 100% 0% 0% 0% ;
  transform:rotate(180deg); 
  background:rgb(0,0,0);
  background:linear-gradient(45deg, rgba(0,0,0,1) 0%, rgb(0, 0, 0) 50%, rgba(255, 255, 255, 0) 50%, rgba(255,255,255,0) 100%);
  }

  
/* groupe pour C4*/
#gc4 
{
  display:flex;
  flex-direction:column;
  transform:rotate(180deg);
  margin-left:-220mm;
  margin-top:0mm;
  z-index:80;
}

/*c'est le segment AB
#box2 
{
top:0mm; 
left:0mm;
height:74mm;
width:2mm;
border-radius: 0% 0% 0 0/100% 100% 0 0;
transform: rotate(0deg); 
background-color: #000000;
z-index:99;
}
#box5
{
top: 155px; 
left:660px;
transform:rotate(90deg);
}

/*la c'est le A
h1{
position: absolute;
color: rgba(195, 2, 2, 0.715);
margin-top: -385px;
margin-left: 455px;
z-index: 99;
font-size: 10mm;
}
/*la c'est le B
h2{
position: absolute;
color: rgba(195, 2, 2, 0.715);
margin-top: -385px;
margin-left: 740px;
z-index: 99;
font-size: 10mm;
}
/*la c'est le texte (C1)
h3{
position: absolute;
color: white;
margin-top: -490px;
margin-left: 583px;
z-index: 99;
font-size: 8mm;
}
/*la c'est le texte (C4)
h4{
position: absolute;
color: rgb(0, 0, 0);
margin-top: -640px;
margin-left: 583px;
z-index: 99;
font-size: 8mm;
}
/*la c'est le texte (C2)
h5{
position: absolute;
color: rgb(153, 151, 151);
margin-top: -575px;
margin-left: 700px;
z-index: 99;
font-size: 8mm;
}
/*la c'est le texte (C3)
h6{
position: absolute;
color: rgb(59, 58, 58);
margin-top: -515px;
margin-left: 310px;
z-index: 99;
font-size: 8mm;
}
*/

@keyframes slidein {
  from {
    margin-left: 35%;
    width: 10%;
  }
  to {
    margin-left:80%;
    width: 10%;
  }}

/*ovnis + animations */
#box8 
{
position:absolute;
top: 450px; 
left:0px;
height:30mm;
width:0mm;
border-radius: 0% 0% 0 0/100% 100% 0 0;
background-color: #1f534f00;
z-index: 99; 
animation-delay:0s;
animation-duration:15s;
animation-name: soukoup;
animation-iteration-count:infinite;
}

@keyframes soukoup
{
  from {
    margin-left: 1%;
    width: 10%;
  }
  to {
    margin-left:99%;
    width: 10%;}
  }
    
  
#box9 {
position:absolute;
top: 500px; 
left:0px;
height:30mm;
width:0mm;
border-radius: 0% 0% 0 0/100% 100% 0 0;
background-color:#1f534f00;
z-index:99; 
animation-delay:10s;
animation-duration:10s;
animation-name:soukoup;
animation-iteration-count:infinite;
}
@keyframes soukoup {
from{
margin-left:1%;
width: 10%;
}
to{
 margin-left:99%;
 width:10%;}}

#box10 {
position: absolute;
top: 180px; 
left:0px;
height:30mm;
width:0mm;
border-radius: 0% 0% 0 0/100% 100% 0 0;
background-color: #1f534f00;
z-index:99; 
animation-delay:5s;
animation-duration:15s;
animation-name: soukoup;
animation-iteration-count:infinite;
}
@keyframes soukoup {
from{
margin-left:1%;
width:10%;
} 
to{
margin-left:90%;
width:10%;}}
                
#box11 {
transform:rotate(-20deg)scale(0.7, 1.2) ;
position:absolute;
top:630px; 
left:0px;
height:30mm;
width:0mm;
border-radius: 0% 0% 0 0/100% 100% 0 0;
background-color: #1f534f00;
z-index:99; 
animation-delay:12s;
animation-duration:10s;
animation-name:soukoup;
animation-iteration-count:infinite;
}
 @keyframes 
 soukoup{
from{
 margin-left:1%;
 width:10%;
}               
to{
margin-left:90%;
width:10%;
}
}