html body {
	size:12px;
	background-color:#FFF7F1;
	font-family:calibri;
	opacity: 85%;
	height:100%;
	position:relative;
}

body li a {
	text-decoration: none;
}

body p {
	size:10;
	color:black;
}
}
header {
	height:100%;
	width:100%;
}


nav{
	text-transform: uppercase;
	vertical-align:top;
	display:inline-block;
	height:100%;
	width: 100%;
}

nav ul{
	display:flex;
	justify-content:space-evenly;
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	list-style-type: none;
	background-color:#DEAB1B;
}

nav ul li{
	display:inline-block;
	margin:0;
	height:auto
	width:150px;
	text-align:center;
}

nav ul li a{
	display:block;
	height:100%;
	width:100%;
	line-height:40px;
	color:#FFF;
	text-decoration: none;
}

nav ul li:hover{
	display: flex;
	flex-grow: 0.5;
	background-color:#f3d47d;
	color:white;
}

#me {
	width:200px;
	max-width:100%;
	height:auto;
	float:left;
	position:relative;
	margin-left: 10px;

}

#loading{
	width:40%;
	margin-top:70px;
	margin-left: 250px;
	vertical-align: middle;
	position:absolute;	
}

body h1,h2 {
	color:turquoise;
	size:12px;
}


section{
	position:absolute;
	font-size:30px;
	text-align: center;
	margin-left: 20px;
	margin-right:20px;

}

#date{
	float:left;
}

#education{
	text-align: center;
}

#sl{
	display:flex;
	justify-content: space-evenly;

}
#sl ul {
	text-decoration: none;
	list-style-type: none;

}

#software img{
	width:50px;
}

#software ul{
	list-style-type: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#now{
	margin-top:50px;
}

#c_education_title{
	width:1000px;
	display:inline-block;
	vertical-align: middle;
}

#c_education_title{
	margin-top:100px;
}

footer {
  background-image: url(header_image_transparent.png);
  background-repeat: no-repeat;
  background-size: cover;
  position:fixed; /*J'ai rencontré des difficultés pour placer le footer.
  Je sais qu'il faut normalement mettre "position:absolute;" ou utiliser flexbox, pour qu'il reste en bas, mais ça ne fonctionait pas.
  Il restait en milieu de page et gênait le contenu de la page.
  J'ai donc opté pour un footer "flottant", en baissant l'opacité de l'image via un logiciel photo pour ne pas gêner la lecture, tout en conservant la lisibilité du texte du footer.
  j'ai malheureusement dû l'enlever sur la page du formulaire pour ne pas gêner son fonctionnement.*/
  bottom:0;
  width:100%;
  height:60px;
  font-weight: bold;
}
footer ul{
	display:flex;
	justify-content:space-evenly;
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	list-style-type: none;
	color:black;
}
footer ul li a{
text-decoration: none;
}
footer ul li a:visited{
text-decoration: none;
}

footer ul li a:hover{
text-decoration: underline;
}

video,iframe{
	display:inline-block;
}

.video-responsive {
 overflow:hidden;
 padding-bottom:56.25%; 
 position:relative;
 height:0;
}
.video-responsive iframe {
 left:0;
 top:0;
 height:100%;
 width:100%;
 position:absolute;
}

#html{
	size:2px;
}

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit],input[type=reset] {
	display:flex;
	flex-direction: row;
	align-content: flex-end;
  width: 25%;
  background-color: #DEAB1B;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  }

  input[type=submit]:hover,input[type=reset]:hover {
  background-color: #f3d47d;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}


.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img, iframe {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}


@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}


@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}