body{
	font-family: kind, regular;
	margin: 0;
	background-color: black;
}

*{
	margin: 0px;
	padding: 0px;
	font-family: kind;
}


.nom{
	width: calc(100% - 20px);
	right:0;
	text-align:right;
	color: black;
	font-size:16pt;
	position:fixed;
}


.section1{
	position:obsolute;
	text-align: center;
	width:30%;
	margin-left:35%;
	margin-bottom: 200px;
	margin-top:200px;
	border-radius:20%;
}
.section2{
	position:obsolute;
	text-align: center;
	width:30%;
	margin-left:35%;
	margin-top: 400px;
	margin-bottom: 200px;
	border-radius:20%;

}
.section3{
	position:obsolute;
	text-align: center;
	width:30%;
	margin-left:35%;
	margin-top: 400px;
	margin-bottom: 10%;
	border-radius:20%;

}

h2::before {
	content: " ";
	display:inline-block;
	position: absolute;
	top: 0; 
	right: 0; bottom: 0; left: 0;
	background: hsl(200 100% 80%);
	z-index: -1;
	transition: transform .3s ease;
	background-color: black;
	border-radius:30px;
	font-family: kind, sans-serif;
    font-weight: 30; 
}

h2 {
	position: relative;
	font-size: 3rem;
	color: white;
	z-index:1;
	background-color: black;
	font-family: kind, sans-serif;
    font-weight: 30; 
    transition: filter 0.3s ease;
}




h2 :hover{
	background-color: red;
	color: white;
	transform: scaleX(1);
	transform-origin: bottom right;
	font-family: kind, sans sherif;
	font-weight: 30;
}

 
 .bloc1{
	width:70%;
	margin-left:15%;
	overflow:hidden;
	line-height:0;
	margin-top:100px;
	border-radius:30px;
	align-items: center;
    justify-content: center;
    padding: 10px;
    display:inline-block;
  
 }

img{
	width:100%;
	height:100%;
}

.contact{
	width: 100%;
	height:500px;
	background-color: blue;
	margin-top: 180px
}

a { font-size: 3rem;
    text-decoration: none;
     color: white;
     font-family: kind, sans-serif;
     font-weight: 30; 
}

.invisible-button {
      position: fixed; 
      margin-bottom: 50px; 
      margin-right: 50px;
      width: 100px; 
      height: 50px; 
      background: transparent; 
      border: none; 
      cursor: pointer; 
    }

  
.invisible-button:hover {
      background: rgba(0, 0, 0, 0.1);
    }


.conteneur {
      display: flex;
      flex-direction: column;
      margin:0%;
      gap: 10px;
      border: 2px solid white;
    
    }

 .box {
      background-color: black; 
      padding: 20px;
      cursor: pointer;
      position: relative;
      transition: all 3s ease; 
      margin:0%;
      z-index:1;
      font-family: kind, sans sherif, thin;
    }
.box2 {
      background-color:black; 
      padding: 20px;
       cursor: pointer;
      position: relative;
      transition: all 3s ease;
      cursor: pointer; 
	  margin:0%;
	  z-index:1;
	  font-family: kind, sans sherif, thin;
    }
     
.box .image {
      max-height: 0; 
      overflow: hidden; 
      transition: max-height 0.5s ease;
    }
.box2 .image {
      max-height: 0; 
      overflow: hidden; 
      transition: max-height 0.5s ease;
    }

.box:hover .image {
      max-height: 1500px; 
    }
.box2:hover .image {
      max-height: 1500px; 
    }
.image img {
      width: 70%; 
      display: block;
    margin-left:15%;
    }



.image { 
      vertical-align: top; 
      width: 80%; 
      height: 80%; 
    
    
 }     
.image2 {
      display: inline-block;
      vertical-align: top;
      width: 100px; 
      height: auto; 
      margin-right: 10px; 
      margin-right:20%;
    }

    
.image-container {
  width: 200px; 
  height: 200px; 
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: slideshow 1s steps(6) infinite; 
  margin-left:10%;
  margin-top:200px;
  margin-bottom:0px;
  will-change: background-image; 
  backface-visibility: hidden;  
}


@keyframes slideshow  {
  0% { background-image: url('photo/dessin_craie/étoiles_1.png'); }
  50%{ background-image: url('photo/dessin_craie/étoiles_2.png'); } 
  100%{ background-image: url('photo/dessin_craie/étoiles_1.png'); } 
}

   
.image-container2{
  width: 200px; 
  height: 200px; 
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: slideshow 1s steps(6) infinite; 
  margin-left:80%;
  margin-top:200px;
  margin-bottom:0px;
  will-change: background-image; 
  backface-visibility: hidden;
}


@keyframes slideshow {

  0%{ background-image: url('photo/dessin_craie/étoiles_3.png'); }
  35%{ background-image: url('photo/dessin_craie/étoiles_5.png'); }
  70%{ background-image: url('photo/dessin_craie/étoiles_6.png'); } 
  100%{ background-image: url('photo/dessin_craie/étoiles_3.png'); } 
}



.menu {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: black;
    color: white;
    transition: transform 0.3s ease;
    z-index: 1000;
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

.menu ul li a {
    color: white;
    text-decoration: none;
    padding: 14px 16px;
    display: block;
}

.menu ul li a:hover {
    color: white;
}

.menu {
	filter: blur(2px); 
    opacity: 0.9; 
   
    padding: 16px;
   
}

.menu.small {
    transform: translateY(-50%);
}

.menu:hover {
    transform: translateY(0);
     filter: none;
    opacity: 1;s
    
}