/*

 /$$$$$$$   /$$$$$$  /$$$$$$$  /$$     /$$
| $$__  $$ /$$__  $$| $$__  $$|  $$   /$$/
| $$  \ $$| $$  \ $$| $$  \ $$ \  $$ /$$/ 
| $$$$$$$ | $$  | $$| $$  | $$  \  $$$$/  
| $$__  $$| $$  | $$| $$  | $$   \  $$/   
| $$  \ $$| $$  | $$| $$  | $$    | $$    
| $$$$$$$/|  $$$$$$/| $$$$$$$/    | $$    
|_______/  \______/ |_______/     |__/    
                                           */                               
                                          


	body{
		background-color: #0c0c10;

	}

	.souligne {
	    text-decoration: underline 4px;
	}

	.scroll-container {
	    display: flex;
	    flex-direction: row;
	    width: 100vw;
	    height: 100vh;
	    overflow: hidden;
	}

	.vertical-container {
	    min-width: 100vw;
	    height: 100vh;
	    overflow: hidden;
	    scroll-snap-type: y mandatory;
	    scroll-snap-align: start;
	    position: relative;
	   
	}

		header{
		width: 100vw;
		height: 60px;
		align-items: center;
		display: flex;
		justify-content: space-between;
		font-family: 'starcrushregular';
		padding-top: 5px;
		color: white;
		position: fixed;
		z-index: 100;
	}

	/*

	 /$$$$$$$$ /$$$$$$  /$$   /$$ /$$$$$$$$
	| $$_____//$$__  $$| $$$ | $$|__  $$__/
	| $$     | $$  \ $$| $$$$| $$   | $$   
	| $$$$$  | $$  | $$| $$ $$ $$   | $$   
	| $$__/  | $$  | $$| $$  $$$$   | $$   
	| $$     | $$  | $$| $$\  $$$   | $$   
	| $$     |  $$$$$$/| $$ \  $$   | $$   
	|__/      \______/ |__/  \__/   |__/                                          
	                                       
	                                       */
	@font-face {
	    font-family: 'safiromedium';
	    src: url('Typo/safiro-medium-webfont.eot');
	    src: url('Typo/safiro-medium-webfont.eot?#iefix') format('embedded-opentype'),
	         url('Typo/safiro-medium-webfont.woff2') format('woff2'),
	         url('Typo/safiro-medium-webfont.woff') format('woff'),
	         url('Typo/safiro-medium-webfont.ttf') format('truetype');      
	}

	@font-face {
	    font-family: 'starcrushregular';
	    src: url('Typo/star-crush.regular.ttf') format('truetype');   
}

	@font-face {
	    font-family: 'LTRemark';
	    src: url('Typo/LTRemark-Black.otf') format('truetype'),
	  		 url('Typo/LTRemark-Blackitalic.otf') format('truetype'),
	  		 url('Typo/LTRemark-Bold.otf') format('truetype'),
	  		 url('Typo/LTRemark-BoldItalic.otf') format('truetype'),
	  		 url('Typo/LTRemark-Italic.otf') format('truetype'),
	  		 url('Typo/LTRemark-Regular.otf') format('truetype');


	}

/* 
  /$$$$$$   /$$$$$$   /$$$$$$  /$$   /$$ /$$$$$$$$ /$$$$$$ /$$      
 /$$__  $$ /$$__  $$ /$$__  $$| $$  | $$| $$_____/|_  $$_/| $$      
| $$  \ $$| $$  \__/| $$  \__/| $$  | $$| $$        | $$  | $$      
| $$$$$$$$| $$      | $$      | $$  | $$| $$$$$     | $$  | $$      
| $$__  $$| $$      | $$      | $$  | $$| $$__/     | $$  | $$      
| $$  | $$| $$    $$| $$    $$| $$  | $$| $$        | $$  | $$      
| $$  | $$|  $$$$$$/|  $$$$$$/|  $$$$$$/| $$$$$$$$ /$$$$$$| $$$$$$$$
|__/  |__/ \______/  \______/  \______/ |________/|______/|________/
                                                                    
                                                                    
                                                                    */


	#langue{
		border: 2.5px solid white;
		font-size: 2.5em;
		text-align: center;
		margin: auto 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		font-family: 'starcrushregular';
		position: relative;
		
	}

	#menu{
		border: 2.5px solid white;
		height: 50px;
		width:  50px;
		margin: auto 10px;
		position: relative;
		align-content: center;
		

		
	} 
	#menu img{
		height: 40px;
		width:  40px;
		left: 10%;
		top: 3%;
		position: relative;
}


	.accueil {
	    width: 150vw;
    	flex-shrink: 0; 
	    height: 100vh;
	    background-image: url('fond_accueil.png');
	    background-size: cover;
	    background-position: left;
	    position: relative;
	    scroll-snap-align: start;
	}

	#texte_accueil {
	    color: white;
	    font-size: 338%;
			font-family: 'safiromedium';
	    text-align: justify;
	    text-align-last: justify;
	    width: 46vw; 
	    margin: 0;
	    position: absolute;
	    top: 50vh;
	    left: 50vw;
	    transform: translate(-50%, -50%);
	    line-height: 210%;
	    letter-spacing: -1%;  
	
}

/*
/ $$$$$$$  /$$$$$$$   /$$$$$$     /$$$$$ /$$$$$$$$ /$$$$$$$$ /$$$$$$ 
| $$__  $$| $$__  $$ /$$__  $$   |__  $$| $$_____/|__  $$__//$$__  $$
| $$  \ $$| $$  \ $$| $$  \ $$      | $$| $$         | $$  | $$  \__/
| $$$$$$$/| $$$$$$$/| $$  | $$      | $$| $$$$$      | $$  |  $$$$$$ 
| $$____/ | $$__  $$| $$  | $$ /$$  | $$| $$__/      | $$   \____  $$
| $$      | $$  \ $$| $$  | $$| $$  | $$| $$         | $$   /$$  \ $$
| $$      | $$  | $$|  $$$$$$/|  $$$$$$/| $$$$$$$$   | $$  |  $$$$$$/
|__/      |__/  |__/ \______/  \______/ |________/   |__/   \______/ 
                                                                     
                                                                     
                                                                     */


#venus{
	width: 100vw;
	left: 100vw;
	top: 0;
	z-index: 1;
}

#titre{
	font-family: 'starcrushregular';
	font-size: 8em;
	z-index: 10;
	position: absolute;
	top: 47%;
  left: 50%;
  transform: translate(-50%, -58%);
  color: white;
}

#liste_projets{
	width: 30vw;
	max-height: 1700px;
	/*outline: solid white 2px;*/
	position: absolute;
  z-index: 5;
  bottom: -150%;
  top: 75%;
  left: 35%;
	font-family:'LTRemark-Regular' ;
	font-size: 300%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: white;

}

.nom_projet h3{
	user-select: none;

	transition: letter-spacing 0.5s ease;
	position: relative;

  
}

.nom_projet{
	position: relative;
}


.nom_projet.hovered h3{
	font-family: 'safiromedium';
	letter-spacing: 0.04em;
	position: relative ;
	

}

.nom_projet img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25vw;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
}

.nom_projet.hovered img {
    opacity: 0.66;
}

#footer{
	font-family: LTRemark-Regular;
	font-size: 1em;
	color: white;
	z-index: 20;
	position: absolute;
	text-align: justify;
	display: flex;
	padding-top: 10px;
	padding-bottom: 10px;
}

a{
	color: white;
	text-decoration: none;

	}

a:hover{
	text-decoration: underline;
	color: #00c8be;

}