:root {
  --font-color: black;
  --back-color: whitesmoke;
  --name-color :  #050505;
  --header-back-color: lightgrey;
  --nav-back-color: lightgrey;
  --nav-back-color-hover: #444444;
  --nav-size:14%;
  --photo-width:10%;
  --center-back-color:whitesmoke;
  --center-size:76%;
  --center-padding-top:2em;
  --center-padding-left:3em;
}

body{
    color: var(--font-color);
	margin:auto;
	max-width: 80em;
    background-color: var(--back-color);	
}

header{
	width:98%;
	background-color: var(--header-back-color);
	border: 1px solid #444444;
	margin-bottom: 1em;
}

#zone_photo{
	background-color:inherit;
	width: var(--nav-size);
	padding: 0.5em 1em 0.5em 1em;
	display: inline-block;
	
}
#photo{
	width:70%;
}

#zone_identity{
	background-color:inherit;
	width: var(--center-size);
	margin-top:1em;
	text-align:center;
	vertical-align:top;
	display: inline-block;
}

#name{
	background-color:inherit;
	color: var(--name-color);
}


nav {
	background-color: var(--nav-back-color);
	border: 1px solid #444444;
    display: inline-block;
	vertical-align: top;
	width: var(--nav-size);
}

nav ul {
    list-style-type: none;
    padding: 0;
	margin:0;

}
			
nav ul li {
    text-decoration: none;
	display: block;
	padding:1em 1em 1em 1em;
}

/* Change the link color on hover */
nav ul li:hover {
    background-color: var(--nav-back-color-hover);
    color: whitesmoke;
}

#content {
	background-color: var(--center-back-color);
	padding-top:var(--center-padding-top);
	padding-bottom:var(--center-padding-top);
	padding-left:var(--center-padding-left);
	padding-right:var(--center-padding-left);
	display: inline-block;
	width: var(--center-size);
}

.bloc{
	display:inline-block;
	margin-right:4em;
	vertical-align:top;
}

.year{
	width:100%;
	margin-top: 1em;
	border-bottom: 1px solid darkgrey;
	font-weight: bold;
}

.publi{
	margin-top:1em;
	margin-bottom:2em;
}

.title{
	font-weight: bold;
}