body, html{
	margin:0;
	padding:0;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap');

body{
	font-family: 'Montserrat', sans-serif;
	background-color:rgb(89,120,130);
	color:#494e5f;
}

/*=========================================================================Fond Blanc (corps de ma partie principal)=========================================================================*/

body > section{
	background-color:white;
	width:50%;
	margin:auto;
	margin-top:0;
}

@media screen and (max-width: 1250px){
	body > section {
		background-color: white;
		width: 100%;
		margin: auto;
		margin-top: 0;
	}
}
/*=========================================================================Header (En tête du corps principal)===============================================================================*/

header{
	display:flex;
	background-color:rgb(199,211,216);
	margin-top:0;
	align-items:center;
	padding-bottom:10px;
	padding-top:5px;
}

header > article:nth-child(1){
	width:58%;
	padding-left:2%;
}
header h1{
	margin:0;
	font-size:40px;
	color:black;
	font-weight:bold;
}

header h2{
	margin-top:0;
	margin-bottom:0;
	font-size:26px;
}

header article:nth-of-type(2) h2{
	color:black;
}

header > article:nth-child(2){
	display:flex;
	width:40%;
	padding-top:1%;
	flex-direction: column;
	align-items:center;
}

header > article:nth-child(2) img {
	width:98px;
	margin-bottom:10px;
	animation-name:logo;
	animation-duration: .5s;
	animation-delay:.5s;
	animation-direction:alternate;
	animation-iteration-count: infinite;
}

@keyframes logo{
	0%{
		transform:translateY(8px);
		
	}
	100%{
		transform:translateY(-8px);
		
	}
}

/*========================================================Nav (Navigation positionné toujours dans l' Entête du corps principal)===============================================================*/

section nav {
	display:flex;
	width:100%;
	height:60px;
	justify-content:center;
	background-color:rgb(183,183,183);	
	position:sticky;
	top:0;
	z-index:4;
}

section nav ul{
	display:flex;
	list-style-type:none;
	width:95%;
	justify-content:space-between;
	align-items:center;
}

section nav li:nth-of-type(1){
	display:flex;
	width:27%;
	flex-direction:column;
	align-items:center;
}

section nav li:nth-of-type(2){
	display:flex;
	width:46%;
	flex-direction:column;
	align-items:center;
	text-align:center;
}

section nav li:nth-of-type(3){
	display:flex;
	width:27%;
	flex-direction:column;
	align-items:center;
}

section nav h3{
	margin-top:0;
	margin-bottom:0;
	font-size:20px;
	color: #494e5f;
}

nav a {
	text-decoration: none;
}

@media screen and (max-width: 630px){
	section nav h3{
		margin-top:0;
		margin-bottom:0;
		font-size:16px;
	}
}

/*============================================================== Présentaion =====================================================================*/
#Presentation{
	display:flex;
	flex-wrap:wrap;
}

#Presentation h2{
	display:flex;
	width:100%;
	font-size:50px;
	align-items:center;
	justify-content:center;
	margin-bottom:2%;
	margin-top:4%;
	height:30px;
	animation-name:Presentation;
	animation-duration: 2s;
	animation-delay:0s;
	animation-timing-function:ease-in-out;
	animation-iteration-count: 1;
}

@keyframes Presentation{
	0%{
		transform:translateX(300px);
		opacity:0;
	}
	100%{
		transform:translateX(0px);
		opacity:1;
	}
}

hr{
	width:60%;
	margin-left:auto;
}

#Presentation article {
	padding: 0px 20px;
}

#Presentation p{
	font-size:19px;
}

/*============================================================== Technologies =====================================================================*/
#Techno{
	display:flex;
	flex-wrap:wrap;
}

#Techno h2{
	display:flex;
	width:100%;
	font-size:50px;
	align-items:center;
	justify-content:center;
	margin-bottom:2%;
	margin-top:4%;
	height:30px;
	animation-name:Techno;
	animation-duration: 2s;
	animation-delay:0s;
	animation-timing-function:ease-in-out;
	animation-iteration-count: 1;
}

@keyframes Techno{
	0%{
		transform:translateX(-300px);
		opacity:0;
	}
	100%{
		transform:translateX(0px);
		opacity:1;
	}
}

#Techno > article{
	display:flex;
	width:100%;
	margin-top:2%;
	margin-bottom:2%;
	padding-left:2%;
	padding-right:2%;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:flex-start;
}

#Techno > article > article {
	display:flex;
	width:22%;
	height:120px;
	padding-top:1%;
	padding-bottom:1%;
	flex-direction:column;
	align-items:center;	
	border:1px solid #494e5f;
	margin-bottom:2%;
	box-shadow: 10px 10px 10px rgba(0,0,0,.15);
	border-radius: 30px;
}

#Techno > article img {
	height:100px;
}

#Techno > article p {
	margin:0;
}

/*============================================================== Les screens =====================================================================*/

#images{
	display:flex;
	flex-wrap:wrap;
}

#images h2{
	display:flex;
	width:100%;
	font-size:50px;
	align-items:center;
	justify-content:center;
	margin-bottom:2%;
	margin-top:4%;
	height:30px;
	animation-name:images;
	animation-duration: 2s;
	animation-delay:0s;
	animation-timing-function:ease-in-out;
	animation-iteration-count: 1;
}

@keyframes images{
	0%{
		transform:translateX(300px);
		opacity:0;
	}
	100%{
		transform:translateX(0px);
		opacity:1;
	}
}

#images > article {
	width:80%;
	display:flex;
	flex-wrap:wrap;
	margin:auto;
}

#images > article > img {
	width:100%;
	margin-bottom:15px;
}

@media screen and (max-width: 560px){
	#images h2{
		font-size:10vw;
	}
	
	#Techno h2{
		font-size:8vw;
	}
	
	#Techno > article > article {
		height:auto;
	}
	
	#Techno > article img {
		height:70px;
	}
	
	#Presentation h2{
		font-size:8vw;
	}
}