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

/*COLOR PALETTE
 * Jaune clair #FFFFE8
 * Rose #ffc3b4
 * Rose clair #fde3dd
 * Vert foncé #196060
 * Bleu #2c839e
 * Bleu foncé #152944
 * Bleu clair #86b9c9
 * */

* { margin: 0; 
	padding: 0; }

body {
	background-color: #FFFFE8;
	font-size: 16px;
	font-family: Verdana, sans-serif;
	}


/* Header Blog title*/
.header {
	background-color: #2c839e;
	text-align: center;
	padding: 5%;
	}
	
.header h1 {
	font-size: 4rem;
	color: #ffc3b4;
	}

.header h2 {
	font-size: 2rem;
	color: white;
	}



/* 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: #ffc3b4;
	}
	
	/*Les liens dans le menu*/
.menu a{
	/*Ils flottent à gauche et sont des block pour que le padding ou marge du haut fonctionne bien? (pas inline)*/
	float: left;
	display: block;
	padding: 1.5rem;
	color: #196060;
	text-decoration: none; /*Enlever le trait sous les liens*/
	}

.menu a:hover {
	background-color: #fde3dd;
	}
	
/*L'espace central*/

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

	/*La colonne de gauche de l'espace central*/
	.leftcolonne{
		float: right;
		width: 70%;
		}


			/*cadre contenant les posts*/
		.cadre {
			/*De l'espace autour*/
			margin: 0 auto 3rem auto; /*3rem du parent au dessus et en dessous, et centré sur les cotés*/
			padding: 2rem;
			background-color: white;
			border: 0.2rem solid #ffc3b4;
			border-radius: 8px;
			max-width: 700px; /*Un cadre ne peut pas faire plus de 700px de large*/
			}

			/*contenu dans les posts*/
			.cadre h3, h2 {
				color: #196060;
				}

			.date {
				font-style: italic;
				color: #2c839e;
				text-align: right;
				margin-top:1rem;
				}

			.cadre p {
				color: #152944;
				}

			.dessin {
				/*background-color: #fde3dd;*/
				margin: 2rem auto;
				}

				.dessin img{
					display: block; /*Les images sont des blocks : les unes en dessous des autres*/
					margin: 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*/
					}
		
	/*La colonne de droite de l'espace central*/	
	.rightcolonne{
		float:right;
		width:30%;
		padding-left: 3rem;
		box-sizing: border-box;
		}
		
	/*Responsive layout : Si l'écran fait moins de 800px, mettre la colonne de droite au dessus de la colonne de gauche*/
	@media screen and (max-width: 1000px) {
	.rightcolonne, .leftcolonne{
		width: 100%;
		padding: 0;
		}
	}
	
	
/*La bande du bas*/
footer {
	background-color: #2c839e;
	/*overflow: hidden;*/
	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;
		}