@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;
 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 white;
  background-color: transparent;
  color: white;
  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);
        
}







h1{
    font-size :300px;
    margin:auto;
    text-align:center;
    color: rgb(29,33,219);
    
}


a{
   text-decoration: none;
    color:white;
    font-size:12px;
     padding: 8px;
  width: 100px;
  border: 2px solid white;
  background-color: transparent;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.1s;
    
}




.titre{
    /*grid-row-start:1;
     grid-row-end:3;
    grid-column-start:1;
    grid-column-end:3;*/
    
    grid-row-start:2;
    grid-row-end:6;
    grid-column-start:2;
    grid-column-end:10;
    overflow:hidden; 
    margin:auto;
   text-align:center;

   
 }  

.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;
    
    
}


@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;
   
    
}
    
  


    .titre{
   grid-row-start:2;
    grid-row-end:6;
    grid-column-start:2;
    grid-column-end:10;
    overflow:hidden; 
    margin:auto;
   text-align:center;
 }  

    
 h1{
        font-size:70px;
    }


   



    
.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;
 
    
}

}

#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;
}