/* MarkoFiume.com/main.css */
/* HTML root, body, header, main, footer */
* { box-sizing: border-box; }
:root {
	--gap: 8px;
	--bg: linear-gradient(to bottom right, #008000, #008080);
	--font01: Chalet-ParisNineteenEighty;
	--font02: Lato;
}
html {
	width: 100%;
	height: 100%;
	background: var(--bg);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: #ffffff;
	font-family: var(--font02);
	display: flex;
	justify-content: center;
	font-weight: 400;
}
body {
	margin: 0;
	width: min(1280px, 100%);
	min-width: min(800px, 100%);
	min-height: 100%;
	display: flex;
	flex-direction: column;
}
header { order: 1; }
main { order: 2; /*border: 2px solid #ffffff40;*/ }
footer { order: 3; }
header {
	font-family: var(--font01);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}
header a.hwrap {
	display: flex;
}
header img#header, .markofiume {
	max-height: 76px;
	transition: all 200ms ease;
	margin: 8px;
}
nav {
	font-family: var(--font01);
	background-color: #00000020;
	color: #fff;
	backdrop-filter: blur(64px);
	border-radius: 9999px;
	font-size: 2rem;
	padding: 0 1em;
	display: flex;
	flex-direction: row;
}
footer nav { font-size: 1.4rem; }
nav .navlink {
	text-decoration: none;
	height: 100%;
	padding: 0 4px;
	transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
nav .navlink:hover {
	color: #000 !important;
	background-color: #fff !important;
	box-shadow: 0 0 32px #fff !important;
}
main {
	display: flex;
	flex-direction: column;
	flex: 1;
}
main>hr { margin: 0; }
footer {
	padding: var(--gap);
	height: 4rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
footer .markofiume {
	width: unset;
	max-width: unset;
	height: 100%;
}