body {
	background: #04070f linear-gradient(#04070f, #0a1222 28%, #17213b 47%, #1c2740 60%, #04070f) no-repeat fixed;
}
.side_shade {
	display: none;
}

.cloud_sea_scene {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	background: #04070f;
}
.cloud_sea_viewport_probe {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 100vh;
	height: 100lvh;
	visibility: hidden;
}
.cloud_sea_layer,
.cloud_sea_clouds {
	position: absolute;
	left: 0;
	top: 0;
}
.cloud_sea_star_window {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	overflow: hidden;
}
.cloud_sea_stars {
	position: absolute;
	top: 0;
	animation: cloud_sea_star_rise 240s linear infinite;
	will-change: transform;
}
.cloud_sea_grass {
	position: absolute;
	inset: 0;
}
.cloud_sea_grass_strip {
	position: absolute;
	transform-origin: 50% 100%;
	animation: cloud_sea_grass_sway 7s ease-in-out infinite;
	will-change: transform;
}
@keyframes cloud_sea_grass_sway {
	0%, 100% { transform: skewX(0deg); }
	18% { transform: skewX(-2.2deg); }
	32% { transform: skewX(-0.8deg); }
	48% { transform: skewX(-1.6deg); }
	70% { transform: skewX(-0.3deg); }
}
@keyframes cloud_sea_star_rise {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(var(--star_tile), calc(var(--star_tile) * -2), 0); }
}
@keyframes hueRotate {
	0% { filter: hue-rotate(0deg); }
	100% { filter: hue-rotate(360deg); }
}
@keyframes hueRotateShadow {
	from { filter: hue-rotate(0deg); }
	to { filter: hue-rotate(360deg); }
}
@keyframes glass_rim_hue {
	from { filter: drop-shadow(0 0 4px rgb(40 106 255)) hue-rotate(0deg); }
	to { filter: drop-shadow(0 0 4px rgb(40 106 255)) hue-rotate(360deg); }
}

#main_show_area {
	width: min(860px, 92%);
}
#header_area {
	height: auto;
	margin-bottom: 0;
	text-align: left;
}
#header_area h1 {
	margin: 18px 0 6px;
}
.site_logo {
	animation: hueRotate 10s linear infinite;
	will-change: filter;
}
#menu_div {
	position: relative;
	isolation: isolate;
	width: 100%;
	text-align: center;
	animation: hueRotate 10s linear infinite;
	will-change: filter;
}
#menu_div::before,
#menu_div::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
#menu_div::before {
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 222, 186, 0.15), rgba(255, 232, 205, 0.7) 52%, rgba(255, 222, 186, 0.15));
}
#menu_div::after {
	top: 0;
	bottom: 0;
	z-index: -1;
	background: linear-gradient(rgba(3, 5, 12, 0.55), rgba(3, 5, 12, 0.2) 75%, rgba(3, 5, 12, 0));
}
.menu_css,
.menu_css:visited {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: 76px;
	height: 30px;
	margin: 10px 0;
	padding: 0 6px;
	border-radius: 0;
	box-shadow: none;
	font-family: Calligraffitti, cursive;
	font-size: 12pt;
	line-height: 30px;
	text-align: center;
	color: rgba(176, 212, 255, 0.92);
	text-shadow: 0 0 8px rgba(120, 170, 255, 0.45), 0 1px 1px rgba(0, 0, 0, 0.7);
	transition: color 0.4s, text-shadow 0.4s;
}
.menu_css + .menu_css::before {
	content: "";
	position: absolute;
	left: -2px;
	top: 50%;
	width: 3px;
	height: 3px;
	margin-top: -1px;
	border-radius: 50%;
	background: rgba(220, 228, 255, 0.3);
}
.menu_css::after {
	content: "";
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: 1px;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 240, 215, 0), rgba(255, 240, 215, 0.95), rgba(255, 240, 215, 0));
	opacity: 0;
	transform: scaleX(0.3);
	transition: opacity 0.4s, transform 0.4s;
}
.menu_css:hover,
.menu_css:focus-visible {
	color: #fff;
	outline: none;
	text-shadow: 0 0 10px rgba(255, 228, 196, 0.85), 0 0 2px #fff;
}
.menu_css:hover::after,
.menu_css:focus-visible::after {
	opacity: 1;
	transform: scaleX(1);
}

main {
	margin-top: 24px;
}
.site_block {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	margin-top: 26px;
	padding: 4px 6px 12px;
	background-color: rgba(4, 8, 14, 0.62);
	border: 1px solid rgb(204 204 204 / 0.22);
	border-radius: 13px;
}
.site_block::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 13px;
	box-shadow: 0 0 15px rgb(40 106 255 / 0.55), inset 0 0 30px rgb(40 106 255 / 0.12);
	animation: hueRotateShadow 10s linear infinite;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
}
.site_block::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 13px;
	pointer-events: none;
	background:
		linear-gradient(90deg, transparent, rgb(150 190 255), #fff, rgb(150 190 255), transparent) top / 80% 1px no-repeat,
		linear-gradient(90deg, transparent, rgb(40 106 255 / 0.8), transparent) bottom / 40% 1px no-repeat;
	animation: glass_rim_hue 10s linear infinite;
}
.site_block h2 {
	color: rgba(214, 236, 255, 0.95);
	text-shadow: 0 0 14px rgba(0, 202, 224, 0.5), 0 1px 2px rgba(0, 0, 0, 0.8);
}
.site_block p,
.site_block li {
	color: rgba(222, 228, 240, 0.88);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.site_block ul {
	margin: 0;
	padding: 0 6px 0 28px;
}
.site_block li {
	padding: 0 14px 0 0;
	line-height: 1.75;
	font-size: 0.95em;
}
.site_block li::marker {
	color: rgba(176, 212, 255, 0.55);
}
footer {
	padding-top: 30px;
}
.site_credit {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(80, 121, 163, 0.6);
}

@media screen and (max-width: 810px) {
	#menu_div {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.menu_css {
		width: 20%;
	}
	.menu_css + .menu_css::before {
		content: none;
	}
	.site_block p {
		padding: 0 12px;
	}
}
@media screen and (max-width: 500px) {
	.site_logo {
		width: 100%;
		height: auto;
		margin: 10px 0;
	}
}