@font-face {
  font-family: SFPro;
  src: url(SFPro.ttf);
}

@font-face {
  font-family: Fractul;
  src: url(Fractul-Light.ttf);
}




::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: #ffff;
}

::-webkit-scrollbar-thumb {
  background-color : rgba(0,25,0, 1);
  border-radius: 10px
}
::-webkit-scrollbar-thumb:hover {
  background-color : rgba(0,255,0, 1); ;
}

html{
  scroll-behavior: smooth;
}

img{
	width :100%;
}


body{
  margin: 0;
  color : black;
  background-color: white;
  font-family : Fractul;
  font-weight : light;
}

hr, h1, p{
  margin: 0;
}

header{
  position: fixed;
  width : 100%;
  //background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.0) 100%);
  background-color : rgba(0,25,0,1);
  z-index : 1000;
}

.logo1{
	width:30%;
	margin-left:10%;
	margin-bottom : 2%;
}

.navbar{
	display : flex;
	align-items: center;
	margin-left : 1%;
	margin-top : 1%;
}

.links{
	margin-left : auto;
	
}

.lien{
	margin-right : 100px;
	color : white;
	text-decoration: none;
	font-family : SFPro;
	font-size : 80%;

}

.lien:hover{
	text-decoration: underline;
}

.logo2{
	margin-top : 35vh;
	width:40vw;
	
}

.imagefond{
	height:100vh;
	background-image: url('images/imagedefond4.jpg');
	background-size : cover;
	background-position : center;
	color : white;
}

.paragraphe{
	width : 40%;
	margin-left : 3%;
	margin-top : 1%;
	text-align : justify;
}


#apropos{
	padding-top : -10%;
}


.apropos{
	margin-left : auto;
	margin-top : 8%;
	background-image: url('images/apropos2.jpg');
	background-size : cover;
	background-position : center;
	/height : 15vh;
	width : 60vw;
	border-radius: 1000px 0px 0px 1000px;
	font-family : SFPro;
	font-weight : normal;
	color : white;
	font-size : 23pt;
	padding-left : 7%;
	padding-top : 2%;
	padding-bottom : 2%;
}

.apropos2{
	font-size : 12pt;
}

.apropos3{
	padding-left:3%;
	padding-top : 3%;
	padding-right : 33%;
}

.projets{
	margin-top : 8%;
	background-image: url('images/eye2.jpg');
	background-size : cover;
	background-position : center;
	/height : 12vh;
	width : 40vw;
	border-radius: 0px 1000px 1000px 0px;
	font-family : SFPro;
	font-weight : normal;
	color : white;
	font-size : 23pt;
	padding-right : 9%;
	text-align : right;
	padding-top : 2%;
	padding-bottom : 2%;
}

.projets3{
	margin-top : 5%;
	margin-left: 10%;
	margin-right: 10%;
}


.rangee1{
	display:flex;
}

.gauche1{
	width : 100%;
	margin : 0.5%;
}

.droite1{
	width : 50%;
	margin : 0.5%;
}

.img1{
	margin-bottom : 0.75%;
	border-radius : 10px;
	filter:blur(1px);
	filter: grayscale(var(--value, 100%));
	opacity : 50%;
}

.img2{
	border-radius : 10px;
	filter:blur(1px);
	filter: grayscale(var(--value, 100%));
	opacity : 50%;
}

.img3{
	border-radius : 10px;
	filter:blur(1px);
	filter: grayscale(var(--value, 100%));
	opacity : 50%;
}


.img1:hover{
	filter:blur(0px);
	filter: grayscale(var(--value, 0%));
	opacity : 100%;
	transition : 0.3s;
	
}

.img2:hover{
	filter:blur(0px);
	filter: grayscale(var(--value, 0%));
	opacity : 100%;
	transition : 0.3s;
}

.img3:hover{
	filter:blur(0px);
	filter: grayscale(var(--value, 0%));
	opacity : 100%;
	transition : 0.3s;
}

footer{
	margin-top : 10%;
	background-color : rgba(0,25,0, 1);
	color : white;
	padding-left : 30%;
	padding-bottom : 4%;
}

.imgfooter{
	padding-top : 4vh;
	padding-bottom : 5%;
	padding-left : 4vw;
	width : 20%;
}

.flexx{
	display:flex;
}

.imgfooter2{
	width: 60%;
}

p{
	padding-left : 3%;
}

.infos{
	padding-top : 4%;
	padding-left : 3%;
}

a{
	color:white;
	width:30%;
}


@media only screen and (max-width: 700px) {
	.logo1{
		width : 80%;
		margin-left : 15%;
		margin-top : 2%;
		margin-bottom : 2%;
	}
	.links{
		display : none;
	}
	.imagefond{
		height : 80vh;
		background-size: 130%;
		background-repeat : no-repeat;
		background-image : url("images/imagedefond5.jpg");
		//background-color : rgba(215,99,42,1);
		background-color : rgba(0,25,0, 1);
	}
	.logo2{
		width : 70%;
		margin-top : 40vh;
	}
	.paragraphe{
		width : 70%;
	}
	
	body{
		font-size : 10pt;
	}
	
	.apropos{
		width : 90vw;
		font-size : 18pt;
		height : auto;
		padding-left: 8%;
	}
	.apropos2:{
		font-size : 10pt;
	}
	.navbar{
		justify-content: center;
	}
	.apropos3{
		text-align : justify;
		padding-right : 20%;
	}
	.projets{
		width : 90vw;
		height : auto;
		padding-bottom : 2%;
	}
	footer{
		padding-bottom : 6%;
		padding-left:2%;
	}
	.imgfooter{
		padding-top:15%;
		padding-bottom:20%;
		padding-left:3%;
		width : 31%;
	}
}