*{
	padding: 0;
	margin: 0;
}


header{
	display: flex;
	flex-wrap: wrap;
	box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5);
}
 body{
	background-image: url(img/fond.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	height: 1000px;
 }



h1{
    font-size: 35px;
    text-align: center;
	padding-left: 35%;
	margin-bottom: 19px;
	margin-top: 25px;
}

.menu{
    justify-content: space-between;
    margin-top: 32px;
	margin-left: 150px;
	
}

.menu a{
    margin-left: 25px;
	font-size: 20px;
	text-decoration: none;
	color: black;
}

a:hover{
	text-decoration: underline;
}


.html{
	width: 45%;;
	display: flex;
	margin: auto;
	margin-bottom: 3%;

}

.autre{
	width: 45%;
	display: flex;
	margin: auto;
}
.php{
	text-align: center;
	font-size: 25px;
}

.php2{
	text-align: center;
	font-size: 25px;
	margin-bottom: 4%;
}


.autre, .html{
	-webkit-filter: blur(3px);
	filter: blur(3px);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.autre:hover, .html:hover{
	-webkit-filter: blur(0);
	filter: blur(0);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.title{
	padding-top: 100px;
}

footer{
	margin-top: 200px;
	padding-bottom: 25px;
	padding-top: 25px;
	background-color: #C4A684;
	box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5);
}

.logo{
	width: 50px;
	height: 50px;
	margin-top: -30px;
	float: right;
	margin-right: 20px;
 }
	
.logo2{
	width: 50px;
	height: 50px;
	margin-top: -30px;
	margin-right: 40px;
	float: right;
}

.contact{
	font-size: 25px;
	margin-left: 5px;
}

.presentation{
	text-align: center;
	margin-top: 3%;
	
}

@media (max-width: 1300px) {
	.menu{
		text-align: center;
		width: 100%;
		margin-left: 0px;
		margin-top: 0px;

	}
	h1{
		text-align: center;
	}

	
	
}

@media (max-width: 1056px) {
	h1{
		width: 100%;
		padding-left: 0%;
		text-align: center;
	}
	
}

@media(max-width: 810px)  {
	.autre, .html{
		-webkit-filter: blur(0px);
		filter: blur(0px);
		-webkit-transition: .0s ease-in-out;
		transition: .0s ease-in-out;
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transition: .0s ease-in-out;
		transition: .0s ease-in-out;
	}
	.autre:hover, .html:hover {
		-webkit-filter: blur(0);
		filter: blur(0);
		-webkit-transform: scale(1);
		transform: scale(1);
	}


	.html{
		width: 70%;
		display: flex;
		margin: auto;
	}

	h1{
		width: 100%;
		text-align: center;
		padding-left: 0%;
		margin-bottom: 19px;
		margin-top: 25px;
	}
	
	.autre{
		width: 70%;
		display: flex;
		margin: auto;

	}
}

@media (max-width: 428px) {
	h1{
		font-size: 25px;
		padding-left: 0%;
	}

	.presentation{
		margin-top: 15%;
	}

	.html{
		margin-bottom: 15%;	
	}
	

	
}