:root {
	--main-bg-color:#D4DEFF;/* fond */
	--focus-color:#324C98;/* mise en valeur */
	--default-color:black;/* texte */
}

html {
	font-family:sans-serif;
	background-color:var(--main-bg-color);
	color:var(--default-color);
}
body {
	margin:25px;
	margin-bottom:0;
}

header {
	margin-top:-25px;
	margin-bottom:-25px;
	padding:25px;
	padding-top:0;
	background-color:var(--main-bg-color);
	display:flex;
	align-items:center;
	flex-wrap: wrap;
	align-content:center;
	column-gap:15px;
	row-gap:10px;
}

header img.pfp {
	border-radius:50px;
	border: 3px solid var(--focus-color);
	height:100px;
}
header a {
	text-decoration:none;
	color:var(--default-color);
	padding:10px;
	display:inline-block;
}
header a:hover {
	color:var(--main-bg-color);
	background-color:var(--focus-color);
}
header a img {
	height:32px;
	margin-bottom:-10px;
}

section, footer {
	padding-right:25px;
	padding-bottom:10px;
	margin-bottom:10px;
	padding-top:0;
	margin-top:10px;
	padding-left:11.25px;
	margin-left:11.25px;
	border-top: 2.5px solid var(--focus-color);
	border-left: 2.5px solid var(--focus-color);
}

footer {
	padding:10px;
	background-color:var(--focus-color);
	border:none;
	color:var(--main-bg-color);
}
footer a {
	color:white;
}

h1, h2, h3 {
	color:var(--focus-color);
}

h2 img, h3 img {
	height:40px;
	margin-right:10px;
	margin-bottom:-15px;
	filter:url(#colorize);
}

a {
	color:var(--focus-color);
}

:target h2, p:target {
	text-decoration: underline;
}

details {
	padding-left: 15px;
	margin-bottom:5px;
}

summary {
	cursor: pointer;
	font-weight: bold;
}

details[open] summary {
	margin-bottom:5px;
}