@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

*{
	 margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
 font-family: 'Space Mono', monospace;
    background-color:white;
}

body {
    	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.container{
    
	 width: 100%;
 height: 100vh;
  display: grid ;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
    grid-template-rows:1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
 /* align-items: center;
  justify-content: center;*/
  flex-direction: column;
	gap: 10px;
  transition: all 0.7s;
  color: white;
    overflow:hidden;
}



button{
  padding: 8px;
  width: 100px;
  border: 2px solid rgb(29,33,219);
  background-color: transparent;
  color: rgb(29,33,219);
  cursor: pointer;
  border-radius: 5px;
  transition: 0.1s;
}
button:hover{
  transform: scale(1.05);
}






.menus {
    text-decoration:none;
    padding: 8px;
  width: 100px;
  border: 2px solid rgb(29,33,219);
  background-color: transparent;
  color: rgb(29,33,219);
  border-radius: 5px;
  transition: 0.1s;
align-items:center;
    text-align:center;

    
}
.menus:hover{
  transform: scale(1.05);
        
}




img{
    height:100%; 
    width:auto;
    margin:auto;
    filter: invert(1);
    -webkit-filter: invert(100%);

}
img:hover {
filter: invert(0);
-webkit-filter: invert(0);
}

h1{
    font-size :80px;
    text-align:start;
     color: rgb(29,33,219);
}

p{
    font-size:12px;
      color: rgb(29,33,219);
}
h4{
    font-size:12px;
      color: rgb(29,33,219);
}
a{
   text-decoration: none;
     color: rgb(29,33,219);
    font-size:12px;
     padding: 8px;
  width: 100px;
  border: 2px solid rgb(29,33,219);
  background-color: transparent;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.1s;
    
}

video{
      width:100%; 
    height:100%;
    margin:auto;
   

}

.image1 {
     grid-row-start:2;
    grid-row-end:7;
    grid-column-start:3;
    grid-column-end:9;
    display:flex; 
    flex-direction:row;
    overflow:scroll;
    gap:15px;
}

.image2 {
     grid-row-start:2;
    grid-row-end:7;
    grid-column-start:3;
    grid-column-end:9;
    overflow:hidden;
    
}

.text{
       grid-row-start:5;
    grid-row-end:7;
    grid-column-start:1;
    grid-column-end:3; 
    display: flex;
    flex-wrap:wrap-reverse;
    width: 95%;
    align-items: flex-start;
    padding-left:20px;


}

.titre{
    grid-row:1;
    grid-column-start:1;
    grid-column-end:10;
    margin-left:20px;
    overflow:hidden;
 }  

.navigation{
    grid-column-start:9;
     grid-column-end:11;
    grid-row:7;
    margin:auto;
    margin-right:20px;
    margin-bottom:30px;
   
}

.menu{
    grid-column:1;
    grid-row:7;
    margin:auto;
    margin-left:20px;
    margin-bottom:30px;
}



.button {
	text-decoration:none;
    width: 100px;
    border: 2px solid white;
    background-color: transparent;
    color: white;
    border-radius: 5px;
    transition: 0.1s;
    
}
.button:hover {
     transform: scale(1.05);
}



.CICME{
    filter:none;
    width:auto;
    height:100%;
    margin-top:10px;
    overflow:hidden;
}
.email {
grid-column-start:5;
     grid-column-end:7;
    grid-row:7;
    margin:auto;
    margin-bottom:30px;
}


.email:not(.expand) {
  cursor: pointer;
}
.email:not(.expand):hover {
  background: black;
}
.from {

    grid-column-start:5;
     grid-column-end:7;
    grid-row:7;  
}
.from-contents {
       grid-column-start:5;
     grid-column-end:7;
    grid-row:7;
}
.ouvert {
    margin-top:20px;
  opacity: 0;
  position: absolute;
  transition: opacity 100ms ;
    grid-row-start:1;
    grid-row-end:7;
    grid-column-start:3;
    grid-column-end:9;
    overflow:hidden;
}
.ouvert-contents {
  transform: scale(.55);
  transform-origin: 0 0;
  transition: transform 300ms ;
    overflow:hidden;
}
.top {
  background: black;
  display: flex;
  flex-direction: row;
  height: 50px;
  transition: height 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
  width: 100%;  
}
.name-large {
  color: white;
  font-size: 30px;
  line-height: 70px;
  margin-left: 20px;
}
.x-touch {
  align-items: center;
  align-self: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin-left: auto;
     width: 70px;
    height:35px;
    border: 2px solid white;
    background-color: transparent;
    color: white;
    border-radius: 5px;
    transition: 0.1s;
    text-align:center;
}

.x {
  position: relative;
    margin:auto;
    padding:auto;
    font-size:12px;


}

/*photo*/
.bottom {
  
    color:black;
    grid-row-start:1;
    grid-row-end:7;
    grid-column-start:3;
    grid-column-end:9;
    width:100%;
    height:660px;
    overflow:hidden;

}

@media screen and (min-width: 1700px) {
   .bottom {
           color:black;
    grid-row-start:1;
    grid-row-end:7;
    grid-column-start:3;
    grid-column-end:9;
    width:100%;
    height:830px;
    overflow:hidden;
    }
}


/*taille ouvert*/
.email.expand {
       grid-row-start:1;
    grid-row-end:7;
    grid-column-start:3;
    grid-column-end:9;
    width:100%;
    height:100%;
    overflow:hidden;
    
}
.expand .from {
  opacity: 0;
  transition: opacity 100ms ;
    background-color:black;
    
}
.expand .from-contents {
  transform: scale(1);
}
.expand .ouvert {
  opacity: 1;
  transition: opacity 200ms 100ms ;
     z-index:2;
}
.expand .ouvert-contents {
  transform: scale(1);
}



@media screen and (max-width:800px) {
    
    body {
        
    	width: 100%;
	height: 100lv;
	    overflow:hidden;
        position:fixed;
        

    }
    
    .container{
        
        width: 100%;
	height: 100%;
  display:grid;
      grid-column: 4(1fr);
        grid-row: 4(1fr);
	gap: 10px;
  transition: all 0.7s;
  color: white;
   
    
}
    
    .image1 {
       grid-row-start:2;
    grid-row-end:6;
    grid-column-start:2;
    grid-column-end:10;
    display:flex; 
    flex-direction:column;
    overflow:auto;
    gap:15px;
}
    
    img{
    width:100%; 
    height:auto;
    margin:auto;
    filter: invert(0);
    -webkit-filter: invert(0);

}
img:hover {
filter: invert(0);
-webkit-filter: invert(0);
}
    
    
    
    .video{
     grid-row-start:2;
    grid-row-end:4;
    grid-column-start:2;
    grid-column-end:11;
      
        
    
}

.text{
  grid-row-start:6;
    grid-row-end:7;
     grid-column-start:2;
    grid-column-end:10;
    display: flex;
    flex-wrap:wrap-reverse;
    width: 95%;
    align-items: flex-start;
    padding-left:0px;
    overflow:auto;


}
    .titre{
    grid-row:1;
    grid-column-start:2;
    grid-column-end:10;
    margin-left:0px;
    overflow:hidden;
          display:flex;
        flex-direction: column-reverse;
               align-items:center;
 }  

    
    h1{
        font-size:20px;
        text-align: center;

  
        
        
    }
    
    p{
        font-size:10px;
        z-index:5;
    
    }

   

.navigation{
   grid-column-start:5;
     grid-column-end:10;
    grid-row:7;
    margin:auto;
      margin-right:0;
}

.menu{
   grid-column-start:1;
    grid-column-end:4;
    grid-row:7;
    margin:auto;
    padding-left:20px;
    display:flex;
 
    
}
    .email {
        visibility:hidden;
}

    
    
}

#cursor {
  position: absolute;
  left: -28px;
  top: -34px;
  will-change: transform;
  transform: translate(-999px, -999px);
  pointer-events: none;
         background:none;
      border:none;
}
  .curseur {
    will-change: transform;
    transition: transform .1s linear;
      filter:none;
     width:40px;
      height:auto;
      background:none;
      border:none;
}