/* MarkoFiume.com/main.css */
/* HTML root, body, header, main, footer */
* { box-sizing: border-box; }
:root {
	--gap: 8px;
	--bg: linear-gradient(to bottom right, #00A000, #00A0A0);
	--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 {
	font-family: var(--font02);
	color: white;
	background: none;
	margin: 0;
	width: min(1280px, 100%);
	min-width: min(800px, 100%);
	min-height: 100%;
	display: flex;
	flex-direction: column;
}
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 {
	height: 120px;
	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;
}
nav a {
	text-decoration: none;
	height: 100%;
	padding: 0 4px;
	transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
nav a: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%;
}
/* MarkoFiume.com/components.css */
/* HTML semantic elements, flex elements, headings, dividers, images, tables etc. as well as site-specific components */

a { color: inherit; text-decoration: underline; } a:visited { color: inherit; }
a:hover { color: #00FF80; }
.flexbox-x, .flexbox-y { display: flex; }
.flexbox-x { flex-direction: row; }
.flexbox-y { flex-direction: column; }
.flex { flex: 1; }
.noflex { flex: unset; }
.cont { padding: var(--gap) 0 0 var(--gap); }
.ent, main>hr { margin: 0 var(--gap) var(--gap) 0; }
.centered, .jc-centered { justify-content: center; }
.centered, .ai-centered { align-items: center; }
.centered, .ta-centered { text-align: center; }
h1, h2 {
	margin: 0;
	font-size: 3rem;
	font-weight: initial;
	font-family: var(--font01);
}
section {
	background-color: #00000040;
	border-radius: 1em;
	padding: 1ch;
}
hr {
	border: 0;
	background: linear-gradient(to right, #fff0, #ffff, #fff0);
	height: 1px;
	width: 100%;
}
.vdiv {
	border: 0;
	height: 100%;
	background: linear-gradient(to bottom, #fff0, #ffff, #fff0);
	width: 1px;
}
table { background-color: #00000020; border-radius: 4px; border-collapse: separate; }
table thead tr th, table tbody tr td { padding: 0.4em; text-align: center; }
table thead {	background-color: #00000020; border-radius: 4px 4px 0 0; }
table tbody tr { transition: background-color 200ms ease, color 200ms ease, filter 200ms ease; }
table tbody tr td { border-radius: 8px; }
table tbody tr:hover { background-color: #fff; color: #000; filter: drop-shadow(0 0 8px white); }
span.r { color: #ff4040; }
span.g { color: #40ff40; }
span.b { color: #4040ff; }
span.y { color: #ffff40; }
span.m { color: #ff40ff; }
span.c { color: #40ffff; }
input, textarea {
	background: #ffffff20;
	color: #ffffffff;
	border: 1px solid #ffffff40;
	font-family: inherit;
	font-size: inherit;
}
img:not(.nodeco):not(#header):not(.x88x31), iframe:not(.nodeco) {
	border-radius: 16px;
	border: 8px solid #ffffff20;
	filter: drop-shadow(0 0 16px #ffffff80);
	transition: border-color 200ms ease, filter 200ms ease;
	display: block;
}
img:not(.nodeco):not(#header):not(.x88x31):hover, img:not(.nodeco):not(#header):not(.x88x31):focus, img:not(.nodeco):not(#header):not(.x88x31):target {
	border-color: #ffffffff;
	filter: drop-shadow(0 0 16px #ffffffff);
}
figure {
	margin: 0;
}
.x88x31 {
	min-width: 88px;
	max-width: 88px;
	min-height: 31px;
	max-height: 31px;
}
a:has(.x88x31) {
	display: flex;
	background-color: #fff;
	color: #000
}
#gallery, .gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-content: center;
	gap: var(--gap);
}
#gallery img, .gallery img { width: 100%; }
.markofiume { margin: unset }
.pagetitle { width: 100%; text-align: center; transition: filter 200ms ease; line-height: 1; }
.pagetitle:hover { filter: drop-shadow(0 0 8px #fff); }
.blogpost img {
	margin: 0 auto;
	max-width: 400px;
}