body{
margin: 0;
padding: 0;
background-color: #E6E6E6; 
}
     
.no-overflow {
overflow: hidden;
}

/*-fonts-*/        
@font-face{
font-family: regular;
src: url(../fonts/CabinetGrotesk-Regular.ttf);
font-display: swap;
}
      
@font-face{
font-family: fin;
src: url(../fonts/CabinetGrotesk-Light.ttf);
font-display: swap;
}
            


      
    
/*-scroll-*/

::-webkit-scrollbar {
position: fixed;
width: 15px;
background-color: #E6E6E6; 
z-index: 99;
}
 
::-webkit-scrollbar-thumb  {
position: relative;    
background-color: #2b3945;
border: 5px solid transparent;
border-radius: 50px;
background-clip: content-box;
}
    
::-webkit-scrollbar-track {
background-color: transparent;
}
     
::-webkit-scrollbar-thumb:hover {
background-color: #3e5060;
}


/*Textes*/

p{
font-size: 1.1em;
font-family: regular;
color: #1F2226;  
}

h1{
font-size: 1.7em;
font-family: fin;
color: #1F2226;  
}

h2{
font-size: 1.4em;
font-family: regular;	
color: #2f5bd4;  
}

/*bouton*/

.bouton{
background-color: white;
border: solid #E6E6E6 2px;

border-radius: 150px;
height: 60px;
width: 140px;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
transition: .2s;
transform-style: preserve-3d;
cursor: pointer;
text-decoration: none;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.778) 0px 1px 3px -1px;  
}
	
.rond{
width: auto;
aspect-ratio: 1/1;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}


	.bouton:hover{
	background-color: white;
	border: solid #1F2226 2px;
	transition: .2s;
	}

	.bouton p{
	position: relative;
	width: 100%;
	height: 100%;
	border: solid #ffffff00 2px;
	border-radius: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	}

	.bouton:hover::before{
	content: '';
	position: absolute;
	border-radius: 300px;
	background: linear-gradient(45deg,#83a1ff,#0e51d8, #173acc, #0e51d8, #83a1ff);
	background-size: 400%;
	width: calc(100% + 5px);
	height: calc(100% + 5px);
	left: -2.5px;
	top: -2.5px;
	filter: blur(10px);
	transform: translateZ(-1px);
	animation: light 20s linear infinite;
	/*mix-blend-mode: luminosity;*/
	transition: .2s;
	}   

@keyframes light {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 400% 0;
	}
	100% {
		background-position: 0 0;
	}
}  
    
/*-page-*/

#page{
display: flex; 
justify-content: left;
flex-direction:row; 
top: 0;
left: 0;
width: 100%;
height: 100%;
}
    
#contenu{  
height: 100vh;
width: calc(100vw + 100px);
margin-left: 100px;
transition: .5s;  
}
         
#check:checked ~ #page #contenu {
width: calc(100vw + 300px);
margin-left: 300px;
transition: .5s;
}
    
/*titre des pages*/
#titre{ 
z-index: 40;  
position: fixed;
width: 100%;
height: 100PX;
background-color:#E6E6E6 ;

display: flex;
align-items: center;  
}
    
#titre h1{  
margin-left: 40px; 
}



/*filtre*/

.filtre{
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
opacity:1;
bottom: 0;
z-index: 100;
pointer-events: none;
background-color: black;
backdrop-filter:blur(20px) brightness(110%);
}








@media only screen and (max-width: 1200px) {

#contenu{  
width: 100vw;
margin-left: 0px;
}
				 
#check:checked ~ #page #contenu {
width: 100vw;
margin-left: 0px;
}

#titre{   
height: 100px;
}

#titre h1{
 margin-left: 200px;
}
  
p{
font-size: 1em;
}
	
    

}