* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif;}
a {text-decoration: none; outline: none;}
img {width: 100px;}
input, button {outline: 0;}

h1, h2, h3 {font-family: 'Cookie', cursive; font-weight: normal;}

/* Notes 
  - Bleu foncé / Space Cadet : #242852 // rgb(36,40,82)
  - Violet / Russian Violet : #2B1E42 // rgb(40,30,66)
  - Violet / Dark Purple : #311432 // rgb(49,20,50)
  - Violet foncé / Dark Purple : #2C041C // rgb(44,4,28)


  - Violet clair / Purple Mountain Majesty : #9E7BB5 // rgb(158,123,181)
*/

body {
	width: 100%;
	display: flex; flex-flow: column wrap; align-items: center;
}

/***********************************************/
/*****************      HOME      **************/
/***********************************************/
header {
	width: 100%;
	box-shadow: 0px 2px 5px black;
}
header #header_top {
	height: 40px; width: 100%; padding: 0 10%;
	display: flex; justify-content: space-between; align-items: center;
	background-color: rgb(49,20,50);
}
header #header_top img {
	height: 100px; background-color: #fff; padding: 5px;
	align-self: flex-start;
}
header #header_top p {
	color: #fff;
}
header #header_bottom {
	height: 60px; width: 100%; padding: 0 10%;
	display: flex; flex-direction: row-reverse; align-items: center;
}
header #header_bottom a {
	padding: 5px 10px; background-color: rgb(36,40,82); border: 2px solid rgb(36,40,82);
	display: flex; justify-content: center; align-items: center;
	color: #fff;
	transition: .3s linear;
}
header #header_bottom a:hover {
	background-color: rgb(255,255,255); border: 2px solid rgb(36,40,82);
	color: rgb(36,40,82);
}

/***********************************************/
/*****************      HOME      **************/
/***********************************************/
.home main section h1 {
	display: flex; flex-flow: column wrap; justify-content: center; align-items: center;
	margin: 50px 0;
	font-size: 24px; color: rgb(40,30,66);
}
.home main section h1 span {font-family: 'Cookie', cursive;}
.home main section h1 span:first-child {
	position: relative;
	margin-bottom: 50px;
	font-size: 36px;
}
.home main section h1 span:first-child::after {
	content: "";
	position: absolute; bottom: -25px; left: calc(50% - 50px);
	height: 2px; width: 100px; background-color: rgb(40,30,66); border-radius: 50%;
}
.home main section p {
	text-align: center;
}



/***********************************************/
/**************      RESPONSIVE      ***********/
/***********************************************/
@media (min-width: 400px) {}
@media (min-width: 568px) {}
@media (min-width: 667px) {
	.home main section h1 {font-size: 48px;}
	.home main section h1 span:first-child {font-size: 75px;}
}
@media (min-width: 768px) {}
@media (min-width: 1024px) {}
@media (min-width: 1300px) {}