/* public/css/layout.css */

/*-----------------------------------------------*\
		Header
\*-----------------------------------------------*/
.logo img {
	max-width: none;
	height: 60px;
	width: auto;
}
.main-header{
	background-color: var(--primary-dark);
	font-size: 2.5rem;
	padding: 5px;
	padding-right: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 1;
}

/*-----------------------------------------------*\
		Link
\*-----------------------------------------------*/
.navlink + .navlink{
	margin-left: 15px;
}
.navlink{
	color: var(--secondary);
	padding: 0.5rem 1.2rem;
	border-radius: 0.5rem;
}
.navlink:hover, .navlink.active{
	color: var(--secondary-light);
	background-color: var(--primary);
}

/*-----------------------------------------------*\
Footer
\*-----------------------------------------------*/
.main-footer{
	background-color: var(--primary-dark);
	text-align: center;
	padding: 15px 0;
}

/*-----------------------------------------------*\
		Erreur 404
\*-----------------------------------------------*/
#E-404{
	max-width: 700px;
	margin: 50px auto;
	text-align: center;
	border-radius: 10px;
	border: var(--border3);
}
.E-404-title{
	font-size: 4rem;
	color: #f00;
}
.E-404-text{
	padding: 20px;
	font-size: 2rem;
}

h1{
	font-size: 4rem;
	font-weight: bold;
	text-align: center;
}
.container{
	margin: 0 auto;
	padding: 0 15px 20px;
}
/*			Small		*/
@media screen and (min-width:576px) {
	.container{
		max-width: 540px;
	}
}

/*			Medium		*/
@media screen and (min-width:768px) {
	.container{
		max-width: 720px;
	}
}

/*			Large		*/
@media screen and (min-width:992px) {
	.container{
		max-width: 960px;
	}
}

/*			Extra large		*/
@media screen and (min-width:1200px) {
	.container{
		max-width: 1140px;
	}
}

/*			Extra extra large		*/
@media screen and (min-width:1400px) {
	.container{
		max-width: 1320px;
	}
}