*{
    box-sizing:border-box;
}

body{
  display:flex;
  min-height:100vh;
  flex-direction:column;
  margin:0;
  padding:0;
  font-family:'Shippori Mincho B1', serif;
  font-size:18px;
  line-height:1.5;
  color:#010101;
  background:#fff;
}

.tete,
.reseaux{
  background:#fff;
  color:#010101;
}

h1{
	font-family:'Syne Mono', monospace;
	font-size: 60px;
}

h5{
	text-align: center;
	font-size: 14px;
}


/*styles pour le site de maison deux*/

h2 {
	text-align: center;	
	text-decoration: black line-through;
	color: #f0f;
	}

p {
	text-align: center;

}

h4{
	font-style: italic;
}

#logo:hover {
	opacity: 1;
	color: #0cf;
		 	}


#principal img:hover {
  -webkit-transform: scaleX(-2);
  transform: scaleX(-2);
}

#logo img:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}



/*ici finit le style de la page maison deux*/

.nav,
.footer-nav,
.portada{
  max-width:1200px;
  margin:0 auto;
}

.portada{
  flex:1;
  padding:5px;
 
}

.couv {
	max-width:100%;
  	height:auto;
  	display:block;
}

.flex{
  display:flex;
}

.footer-nav.flex{
  justify-content:center;  
}

.flex-item{
  padding:12px;
}

.flex-item.home{
  margin:0 auto 0 0;
  font-size:1em;
  border-bottom:5px solid #fb4d46;
}

.flex-item.home a{
  border:none;
}	 


a{
  color:#010101;
  text-decoration:none;
  display:block;
  border-bottom:5px solid #00bfb3
}

a:hover{
  border-bottom:5px solid #fb4d46;
  transition:border-color 400ms ease-out;
}

p{
  max-width:35em;
}



/*une autre possibilité de mise en page. C'était ma première tentative 
avant de trouver une meilleure possibilité qui s'adaptait mieux à mes besoins
 body {
	margin: 0;
}


h1 {

	font-family:'Syne Mono', monospace;
	/*@keyframes duration | timing-function | delay | name */
	
	}

/*.portada {

		position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

	
	}


	/*tout cela pour que mon image remplisse toute la page comme background*/