/* MarkoFiume.com/components.css */
/* HTML semantic elements, flex elements, headings, dividers, images, tables etc. as well as site-specific components */

a { color: inherit; } a:visited { color: inherit; }
.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 {
	margin: 0;
	font-size: 3rem;
	font-weight: initial;
	font-family: var(--font01);
}
hr {
	border: 0;
	background: linear-gradient(to right, #fff0, #ffff, #fff0);
	height: 1px;
	width: 100%;
}
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;
}
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); }