/* General */

@font-face {
	font-family: "Roboto Slab";
	src: url("../polices/RobotoSlab-Light.ttf");
}

body{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	max-width: 100vw;
	margin: 0;
	padding: 0;
	background-color: #4d6e85;
	font-family: "Roboto Slab";
}

#corps{
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Image */

#nom{
	width: 100%;
	margin: 0 auto 0 auto;
}

/* Liens */

#container-liens{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto 0 auto;
	width: 50%;
}

.lien{
	padding: 5px 5px 5px 5px;
	font-weight: 400;
	font-size: 25px;
	text-align: center;
	user-select: none;
	text-decoration: none;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	flex-grow: 1;
	width: 15%;
	color: #e8f2fa;
	background-color: #456176;
}

.lien:hover{
	color: #a2aab1;
}


/* Contact */

#contact{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
	text-align: center;
}

#contact div{
	margin-top: 8px
}

#contact a{
	color: #e8f2fa;
	text-decoration: none;
	text-underline-offset: 2px;
}

#contact a:hover{
	color: #a2aab1;
}

/* Bouton */

#container-bouton-site{
	text-align: center;
	margin-top: 50px;
}

.bouton{
	font-weight: 400;
	text-align: center;
	user-select: none;
	text-decoration: none;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	padding: 10px;
	border-radius: 5px;
}

#bouton-site{
	background-color: #85aabb;
	border: 1px solid #526b79;
	color: #e8f2fa;
}

#bouton-site:hover{
	background-color: #728f9c;
	border-color: #4f6775;
}

/* Responsive */

@media screen and (min-width: 1700px) {
	#nom{
		width: 60% !important;
	}
	#container-liens{
		width: 55% !important;
	}
}

@media screen and (min-width: 1300px) and (max-width: 1699px) {
	#nom{
		width: 80% !important;
	}
	#container-liens{
		width: 70% !important;
	}
}

@media screen and (min-width: 1000px) and (max-width: 1299px) {
	#nom{
		width: 95% !important;
	}
	#container-liens{
		width: 95% !important;
	}
}

@media screen and (max-width: 999px) {
	#nom{
		width: 100% !important;
	}
	#container-liens{
		margin-top: 15px !important;
		width: 90% !important;
		flex-direction: column;
	}
	.lien{
		font-size: 18px !important;
		width: auto;
	}
}