/* - - - MAIN LAYOUT - - - */


* {
	margin: 0px;
	padding: 0px;
	border-width: 0px;
	outline: 0px solid red;
}
body {
	display: flex; 
	flex-direction: column; 
	min-height: 100vh; 
	color: darkslategrey;
	background-color: oldlace;
	font-family: 'Bitter', serif;
	font-size: 16px;
	line-height: 22px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
header {
	flex: 0 0 auto;
	width: 100%;
	height: 80px;
	display: flex; 
	flex-direction: row; 
}
main {
	flex: 1 0 auto;
	background-color: rgba(255, 255, 255, 0.75);
	width: 100%;
}
article {
	max-width: 720px;
	padding: 40px 20px;
	margin: auto;
}
footer {
	flex: 0 0 auto;
	width: 100%;
	padding: 20px 0px;
}

/* - - - HEADER - - - */

header div.logo {
	width: 40px;
	height: 40px;
	margin: 20px;
	margin-right: 10px;
}
header div.logo a {
	display: block;
	width: 40px;
	height: 40px;
	background-color: crimson;
}
header div.logo a {
	transition: 0.2s;
}
header div.logo a:hover {
	border-radius: 50%;
}
header div.sitename {
	height: 20px;
	margin: 30px 0px;
	flex: 1 0 auto;
}
header div.burger {
	width: 40px;
	height: 40px;
	margin: 20px;
	margin-left: 10px;
}
header div.close {
	width: 40px;
	height: 40px;
	position: absolute;
	right: 0px;
	top: 0px;
}
header div.burger a, header div.close a {
	display: block;
	width: 40px;
	height: 40px;
	background-color: crimson;
}

/* - - - HEADER NAV - - - */

header nav#menu {
    width: 240px;
    position: absolute; 
    z-index: 1; 
    top: 20px; 
    right: 20px;
    background-color: seashell; 
    padding: 60px 0px 40px 0px;
	display: none;
	box-shadow: -3px 3px 0px 0px rgba(0,0,0,0.1);
}
header nav#menu ul {
	margin: 0px;
}
header nav#menu ul li {
	list-style: none;
	margin: 18px 27px;
	font-size: 14px;
	line-height: 20px;	
}
header nav#menu ul li a {
	text-decoration: none;
}
header nav#menu ul li a:hover {
	text-decoration: underline;
}

/* - - - FOOTER - - - */

footer p {
	text-align: center;
	font-size: 14px;
	line-height: 20px;
}
footer p a {
	text-decoration: none;
}
footer p a:hover {
	text-decoration: underline;
}

/* - - - FOOTER STYLES - - - */

.center { text-align: center; }

a.button, a:visited.button {
	display: block;
	margin:0px;
	padding:10px 20px;
	background-color: crimson;
	color: white;
	width: 160px;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	transition: 0.5s;
}

a.button:hover {
	background-color: darkslategrey;
}

img.error404img {
	width:100%; 
	max-width:360px; 
	margin:auto; 
	border-bottom:1px solid #ccc;
}

img.w100 {
	width: 100%;
}

/* - - - - - - - - - - - - */