* { box-sizing: border-box; }
:root {
	--gap: 8px;
	--bg: linear-gradient(to bottom right, #008000, #008080);
	--font01: Chalet-ParisNineteenEighty;
	--font02: Lato;
}
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 { 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);
}
.x88x31 {
	min-width: 88px;
	max-width: 88px;
	min-height: 31px;
	max-height: 31px;
}
a:has(.x88x31) {
	display: flex;
	background-color: #fff;
	color: #000
}
html {
	width: 100vw;
	height: 100vh;
	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(1024px, 100%);
	min-height: 100%;
	display: flex;
	flex-direction: column;
}
header { order: 1; }
main { order: 2; }
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 {
	max-height: 76px;
	transition: all 200ms ease;
	margin: 8px;
}
header img#header:hover, header a.hwrap img#header:focus { filter: drop-shadow(0 0 8px #fff); }
header nav {
	display: flex;
	flex-direction: row;
	width: fit-content;
	font-size: 32px;
	backdrop-filter: blur(64px);
	background-color: #ffffff40;
	border-radius: 8px;
	margin: 4px;
}
header nav .navlink {
	text-decoration: none;
	transition: filter 200ms ease, background-color 200ms ease, color 200ms ease, text-shadow 200ms ease;
	padding: 4px;
	line-height: 1;
}

header nav .navlink:first-child { border-radius: 8px 0 0 8px; }
header nav .navlink:last-child { border-radius: 0 8px 8px 0; }
header nav .navlink:only-child { border-radius: 8px; }
header nav .navlink:hover, header nav .navlink:focus {
	filter: drop-shadow(0 0 16px #ffffff) !important;
	background-color: #ffffff !important;
	color: #000000 !important;
	text-shadow: none !important;
}
/*header nav .navlink:active { transform: scale(0.6); }*/
html#page-home #link-home,
html#page-about #link-about,
html#page-blog #link-blog,
html#page-tweets #link-tweets,
html#page-guestbook #link-guestbook,
html#page-changelog #link-changelog
{
	background-color: #ffffff40;
	color: #ffffffff;
	text-shadow: 0 0 4px #ffffffff;
}
main {
	display: flex;
	flex-direction: column;
}
.pagetitle { width: 100%; text-align: center; transition: filter 200ms ease; line-height: 1; }
.pagetitle:hover { filter: drop-shadow(0 0 8px #fff); }
.window {
	filter: drop-shadow(0 0 16px #ffffff20);
	font-weight: light;
	backdrop-filter: blur(64px);
	background: #00000020;
	border-radius: 4px;
	transition: all 200ms ease;
}
.window > .title {
	line-height: 1;
	border-radius: 4px 4px 0 0;
	background: #ffffff40;
	padding: 0.2em;
	transition: all 200ms ease;
	font-weight: 300;
}
.window:hover, .window:focus, .window:target { filter: drop-shadow(0 0 16px #ffffffff); }
.window:hover>.title, .window:focus>.title, .window:target>.title { background: #ffffff; color: #000000; }
.window h1 {  transition: text-shadow 200ms ease; }
.window:hover h1, .window:focus h1, .window:target h1 { text-shadow: 0 0 16px #fff; }
.window > .user-content {
	padding: 0.4em;
	min-height: 2em;
}