body {
	background: #000000 url("https://images8.alphacoders.com/737/737758.jpg") fixed center top;
	margin: 0;
	width: 100%;
	font-family: arial;
}
header {
	background-color: #e55039;
	width: 100%;
}
header h1 {
	margin: 0;
	padding: 25px;
	padding-left: 50px;
}
header a {
	display: inline-block;
	margin-right: 10px;
}
header span {
	margin-left: 20px;
}
.header_button {
	height: 40px;
}
#body, footer {
	margin: auto;
	width: 65%;
	min-width: 640px;
	padding: 20px;
}
#body {
	background: #6a89cc;
	padding-bottom: 60px;
}
footer {
	background: #00b894;
	font-size: 1.1em;
	margin-bottom: 100px;
}
#grid {
	width: 100%;
	max-width: 650px;
	margin: auto;
	text-align: center;
}
#grid img {
	background: #b2bec3;
}
#grid a {
	display: inline-block;
	width: 200px;
	padding: 5px;
}
#grid a:hover {
	background: #78e08f;
}
#grid a img {
	width: 200px;
	height: 200px;
}
#body > p {
	font-size: 1.3em;
	padding-left: 90px;
	padding-right: 90px;
}
ul {
	list-style: none;
	font-size: 1.3em;
	max-width: 900px;
	margin: auto;
}
li {
	height: 30px;
	font-family: arial;
	padding: 8px;
}
li:before {
	content: '';
	display: inline-block;
	height: 35px;
	width: 35px;
	margin-right: 20px;
	background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzIwMCcgd2lkdGg9JzIwMCcgIGZpbGw9IiMwMDAwMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNNzguNTM1LDM5LjcyYy0wLjI3LTE0LjUxLTEyLjE1LTI2LjI0LTI2LjcyLTI2LjI0Yy0xMi4yLDAtMjIuNSw4LjIxLTI1LjcsMTkuMzloLTEuODlWMTQuNDhoLTJ2MTguMzkgICBoLTMuNjN2MzUuNzloNGwtMC4zOCw0LjM5bDIyLjA0LDEzLjQ3aDE1LjExbDIyLjA0LTEzLjQ3TDc4LjUzNSwzOS43MnogTTY1LjQ5NSwzMS45MmMtMC4yLDAuMTktMC40NSwwLjI5LTAuNzEsMC4yOSAgIHMtMC41MS0wLjEtMC43MS0wLjI5bC01LjA5LTUuMDljLTAuMzktMC40LTAuMzktMS4wMywwLTEuNDJzMS4wMy0wLjM5LDEuNDIsMGw1LjA5LDUuMDlDNjUuODg1LDMwLjg5LDY1Ljg4NSwzMS41Myw2NS40OTUsMzEuOTJ6ICAgIE01NC42MTUsMjYuODRjMC4zOS0wLjM5LDEuMDItMC4zOSwxLjQxLDBsMy40MywzLjQzYzAuMzksMC4zOSwwLjM5LDEuMDIsMCwxLjQxYy0wLjIsMC4yLTAuNDYsMC4zLTAuNzEsMC4zICAgYy0wLjI2LDAtMC41MS0wLjEtMC43MS0wLjNsLTMuNDItMy40MkM1NC4yMjUsMjcuODcsNTQuMjI1LDI3LjIzLDU0LjYxNSwyNi44NHogTTU5Ljk5NSw4My43OVY1Ni4wM2wxNC43Ni02LjI1di02LjY3aC0yMi45NCAgIGgtMC4wOWgtMjIuOTV2Ni42N2wxNC43Niw2LjI1djI3LjdsLTIuNjgtMS42NGMxLjE4LTcuNjEtMS4wMy0xNS4xOS02LjQ0LTIxLjk4Yy0zLjQyLTQuMjctNy4wNy02Ljk4LTguMzktNy44OWwwLjgtOS4yOCAgIGwwLjE1LTEuNzloNDkuNjdsMC45NiwxMS4xM2MtMS4zOSwwLjk3LTQuOTYsMy42NS04LjMsNy44M2MtNS40LDYuNzctNy42MSwxNC4zNC02LjQ1LDIxLjkzTDU5Ljk5NSw4My43OXoiPjwvcGF0aD48L2c+PC9zdmc+");
	background-size: cover;
	position: relative;
	top: 10px;
}
ul a {
	display: inline-block;
	color: #2d3436;
	text-decoration: none;
	width: 500px;
	padding: 8px;
}
ul a:hover {
	background-color: #6c5ce7;
}
ul a:active {
	background-color: #6c5ce7;
}
@media only screen and (max-device-width: 768px) {
	body {
		font-size: 150%;
	}
	#body, footer {
		min-width: 0px;
		width: 100%;
		margin: 0 0 0 0;
		padding-left: 0;
		padding-right: 0;
	}
	ul a {
		font-size: 150%;
	}
	li:before {
		height: 70px;
		width: 70px;
	}
}

#perso_liens {
	text-align: center;
}
#perso_liens a {
	display: inline-block;
	margin: 12px;
	margin-right: 6px;
	margin-left: 6px;
	background: white;/*#DBDBDB;*/
	height: 70px;
	width: 70px;
	padding: 5px;
}
#perso_liens img {
	height: 70px;
	width: 70px;
}
body h1, body h2, h3, h4, h5, pre {
	padding-left: 90px;
	padding-right: 90px;
}