/*Feuille de style pour mon site de dessins*/

/*COLOR PALETTE
 * Brun #d29772
 * Brun foncé #675447
 * Brun clair #eacbb1
 * Rouge #f65e10
 * Gris #9f978b
 * Gris clair #c9c4be
 * Crème #ffecd7
*/

/*
 * J'initialise des choses : on mesure les boites avec le padding et the border
 * et on initialise les marges et le padding à 0*/
* { box-sizing: border-box;
	margin: 0; 
	padding: 0; }
	
body {
	background-color: #ffecd7;
	font-size: 100%;
	font-family: Verdana, sans-serif;
	}


/*RESPONSIVE WEB DESIGN : Always desing for mobile fisrt*/
/*For mobiles : toutes les classes "col-" prennent toute la largeur de l'écran*/
[class*="col-"] {
	width: 100%;
	}
[class*="col1-"] {
	width: 100%;
	}

/*For tablets/half a desktop screen (taille minimum de 768px)*/
/*Construction de la grille : 12 colonnes*/
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

/*For desktop*/
@media only screen and (min-width: 1200px) {
.col1-1 {width: 8.33%}
.col1-2 {width: 16.66%;}
.col1-3 {width: 25%;}
.col1-4 {width: 33.33%;}
.col1-4.5 {width: 37.49%;}
.col1-5 {width: 41.66%;}
.col1-6 {width: 50%;}
.col1-7 {width: 58.33%;}
.col1-8 {width: 66.66%;}
.col1-9 {width: 75%;}
.col1-10 {width: 83.33%;}
.col1-11 {width: 91.66%;}
.col1-12 {width: 100%;}
}

/*Toutes ces colonnes flottent à droite et on un padding de 2 rem*/
[class*="col-"] {
  float: right;
  padding: 2rem;
}


/* Header Blog title*/
.header {
	padding: 10%;
	background-image: url('../images/Mystic2-big.jpg');
	background-size: cover;
	text-align: right;
	}

/* Jutilise ici du vw pour que la taille soit relative à 1% width du viewport 
 * (la taille de la fenêtre du navigateur)*/
.header h1 {
	font-size: 7vw;
	color: white;
	}

.header h2 {
	font-size: 3vw;
	color: #9f978b;
	}



/* Le menu */
	/*Bande qui contient le menu*/
.menu {
	/*
	* Parce que le contenu du menu flotte, il n'a pas de hauteur, donc ce conteneur n'apparaitrait pas
	*overflow: hidden; déclenche la création d'une boite
	*On ne veut pas non plus fixer de hauteur au contenant ou contenu, 
	*car ça nous empêcherait de changer la taille de la police ou autres éléments dans le futur
	*Là, le contenant s'adapte à la taille de ce qu'il doit contenir
	*/
	overflow: hidden;
	background-color: #d29772;
	}
	
	/*Les liens dans le menu*/
.menu a{
	/*Ils sont des block pour que le padding ou marge du haut fonctionne bien? (pas inline)
	 *ils ne flottent pas pour s'empiler sur portable*/
	display: block;
	padding: 1rem;
	color: white;
	text-decoration: none; /*Enlever le trait sous les liens*/
	}

.menu a:hover {
	background-color: #989898;
	}

	/*sur ordi (min 768px) les boutons du menu flottent à gauche pour pouvoir s'aligner horizontalement*/
@media only screen and (min-width: 768px) {
.menu a{
	padding:1rem 2rem;
	float: left;
	}
}

/*L'espace central*/
/*Ce qu'il y a après le main, est espacé avec un espace, 
 * est un block et ne flotte pas à coté des deux colonnes -clear-*/
.main::after{
	content:"";
	display: block;
	clear: both;
	}

			/*cadre contenant les posts*/
		.cadre {
			/*De l'espace autour*/
			margin: 0 auto 3rem auto; /*3rem en dessous, et centré sur les cotés*/
			padding: 0rem;
			background-color: white;
			border-radius: 4px;
			max-width: 700px; /*Un cadre ne peut pas faire plus de 700px de large*/
			}
		
		
			/*contenu dans les posts*/
			.cadre h3, h2 {
				color: #675447;
				padding:1rem;
				}

			.date {
				font-style: italic;
				color: #9f978b;
				text-align: right;
				padding:1rem;
				}

			.cadre p {
				color: #675447;
				padding:1rem;
				}

			.dessin {
				background-color: white;
				margin: 0rem auto;
				}

				.dessin img{
					display: block; /*Les images sont des blocks : les unes en dessous des autres*/
					margin: 0rem auto 1rem auto; /*Elles sont centrées et s'il y en a plusieurs, s'écartent de 1rem*/
					max-width: 100%; /*La largeur d'une image ne peut pas être plus grande que sa largeur d'origine, ni plus grande que la largeur de son parent :ici la class dessin*/
					}
					
			.cadre a {
				text-decoration: none;
				color: #675447;
				}
			.cadre a:hover {
				color: #d29772;
				}
			.cadre a:active {
				color: #9f978b;
				}
			
			.cadre ul {
				padding: 1rem;
				list-style-position:inside;
			}
			
			.lastdessin {
				background-color: #c9c4be;
				margin: 0rem auto;
				}
			
				.lastdessin img {
					height: 20rem;
					width: 100%;
					object-fit: cover;
				}
				
				.lastdessin img:hover {
					filter: blur(2px);
				}
	
/*La bande du bas*/
footer {
	background-color: #9f978b;
	position: fixed;
	bottom: 0;
	right: 0;
	}

	footer a {
		float: right;
		display: block;
		padding: 0.5rem;
		color: white;
		text-decoration : none;
		}
		
	footer a:hover {
		background-color: #86b9c9;
		}