/* Page-specific styles for index.html */

/* Header Section */
#header {
	padding: 10vw;
	clip-path: url("#clip-heading");
	background-image: url("../img/bg/home-header.png");
	background-size: cover;
	background-position: center bottom;
	background-attachment: fixed;

}

#motto {
	font-family: "Heading", sans-serif;
	font-size: 3vw;
	text-shadow: 3px 6px #000, 0px -1px #000, 0px 1px #000, -1px 0px #000, 1px 0px #000, -1px -1px #000, 1px 1px #000, -1px 1px #000, 1px -1px #000;
	color: #FFF;
}

#header-lain {
	position: absolute;
	right: 6vw;
	top: 3vw;
	height: 25vw;
}

/* Companies Section */
#companies {
	text-align: center;
}

.company {
	display: inline-block;
	width: 8em;
	height: 4em;
	background-color: #000;
	background-size: 8em 8em;
	background-position: 0% 0%;
	background-repeat: no-repeat;
}

.company:hover {
	background-position: 0% 100%;
}

#company_kahgy { background-image: url("../img/companies/kahgy.png"); }
#company_risen { background-image: url("../img/companies/risen.png"); }
#company_tsuki { background-image: url("../img/companies/tsuki.png"); }
#company_synapse { background-image: url("../img/companies/synapse.png"); }
#company_endymion { background-image: url("../img/companies/endymion.png"); }

/* Intro Animation Styles */
#intro {
	position: fixed;
	z-index: 2000000000;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #000;
	display: none;
	transition: 1s 2.644s background-color ease-in;
}

#intro.playing {
	background-color: #FFF;
}

#intro.destroyed {
	transition: 1s opacity;
	opacity: 0;
	pointer-events: none;
}

#intro_logo {
	width: 10vw;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	filter: brightness(0);
	opacity: 1;
	transition: 0.5s filter, 3.644s top, 1s 2.644s opacity ease-in;
}

#intro.playing #intro_logo {
	filter: brightness(1);
	top: calc(50% + 1vw);
	opacity: 0;
}

#intro_flare-back {
	width: 15vw;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	mix-blend-mode: lighten;
	transition: 3.644s opacity, 3.644s width, 3.644s top;
}

#intro.playing #intro_flare-back {
	opacity: 1;
	width: 20vw;
	top: calc(50% - 1vw);
}

#intro_flare-top {
	width: 0vw;
	position: fixed;
	left: 50%;
	top: calc(50% - 4.5vw);
	transform: translate(-50%, -50%);
	opacity: 0;
	mix-blend-mode: lighten;
	transition: 3.644s opacity, 3.644s width, 3.644s top;
}

#intro.playing #intro_flare-top {
	opacity: 1;
	width: 10vw;
	top: calc(50% - 3.5vw);
}

#intro_flare-mini_holder {
	position: fixed;
	width: 12vw;
	height: 12vw;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	mix-blend-mode: lighten;
	transition: 3.644s transform linear, 3.644s top;
}

#intro.playing #intro_flare-mini_holder {
	top: calc(50% + 1vw);
	transform: translate(-50%, -50%) rotate(-180deg);
}

#intro_flare-mini {
	position: absolute;
	width: 5vw;
	opacity: 0;
	left: 50%;
	top: 0;
	transform: translate(-50%, 0) rotate(0deg);
	mix-blend-mode: lighten;
	transition: 3.644s transform linear, 0.5s 1s opacity;
}

#intro.playing #intro_flare-mini {
	transform: translate(-50%, 0) rotate(180deg);
	opacity: 0.4;
}

#intro.playing #intro_flare-mini.hidden {
	opacity: 0;
	transition: 3.644s transform linear, 1s opacity;
}

#intro_welcome {
	width: 100%;
	position: fixed;
	top: calc(50% + 7vw);
	font-family: "Heading", sans-serif;
	font-size: 2em;
	color: #FFF;
	opacity: 0;
	text-shadow: 0px 0px 0px #FFF;
	text-align: center;
	transition: 3.644s top, 2s 1s opacity, 2s 1s text-shadow;
}

#intro.playing #intro_welcome {
	top: calc(50% + 8vw);
	opacity: 1;
	text-shadow: 0px 0px 4px #FFF;
}

#intro_motto {
	font-family: "Heading", sans-serif;
	font-size: 3vw;
	color: #000;
	position: fixed;
	left: 10vw;
	top: 10vw;
}

#shiro {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 60;
	background-color: #FFF;
	opacity: 0;
	pointer-events: none;
}

#shiro.fireaway {
	animation: 3s fadeInShiro linear forwards;
}

@keyframes fadeInShiro {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* Loading Box Styles */
#loading-box {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 1000000000;
	transition: opacity 0.2s;
}

#loading-box.finished {
	opacity: 0;
	pointer-events: none;
}

#loading-box-text {
	position: fixed;
	right: 72px;
	bottom: 28px;
	text-align: right;
	color: #FFF;
	font-family: "Tiny", sans-serif;
	font-size: 22px;
	pointer-events: none;
	transition: bottom 0.2s ease-in;
}

#loading-box-text::selection {
	background: none;
	color: #FFF;
}

#loading-box-text::-moz-selection {
	background: none;
	color: #FFF;
}

#loading-box.finished #loading-box-text {
	bottom: -36px;
}

#loading-box-icon {
	position: fixed;
	width: 50px;
	height: 50px;
	right: 14px;
	bottom: 14px;
	pointer-events: none;
	transition: bottom 0.2s ease-in;
}

#loading-box.finished #loading-box-icon {
	bottom: -50px;
}

#loading-box-icon-tsuki {
	position: absolute;
	width: 50px;
	pointer-events: none;
}

#loading-box-icon-spin {
	position: absolute;
	width: 50px;
	left: 1px;
	pointer-events: none;
	animation: LoaderSpin 2s infinite linear;
}

@keyframes LoaderSpin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* NoScript override for loading box */
html.noscript #loading-box {
	display: none !important;
}

/* Sitemap Styles */
.sitemap-header {
	display: block;
	font-size: 1.2em;
	font-family: "Heading", sans-serif;
	margin-top: 0.5em;
}

.sitemap-header img {
	margin-right: 4px;
}

.sitemap-header div {
	margin-right: 4px;
	display: inline-block;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	position: relative;
	top: -1px;
}

#sitemap_tsuki {
	background-image: url("../img/companies/icon/tsuki.png");
}

#sitemap_risen {
	background-image: url("../img/companies/icon/risen.png");
}

#sitemap_synapse {
	background-image: url("../img/companies/icon/synapse.png");
}

#sitemap_endymion {
	background-image: url("../img/companies/icon/endymion.png");
}

#sitemap_kahgy {
	background-image: url("../img/companies/icon/kahgy.png");
}

.sitemap-item {
	display: block;
	margin-left: 22px;
}

.sitemap-deep {
	margin-left: 40px;
}

.sitemap-item.disabled, .sitemap-header.disabled {
	color: #000;
	text-shadow: -1px -1px #888, 0px -1px #888, 1px -1px #888, 1px 0px #888, 1px 1px #888, 0px 1px #888, -1px 1px #888, -1px 0px #888;
}

#sitemap a:hover {
	filter: brightness(1000%);
}

/* ATH Sitemap Styles */
.sitemap-ath-header {
	display: block;
	font-size: 1.2em;
	font-family: "Heading", sans-serif;
	margin-top: 0.5em;
}

.sitemap-ath-header img {
	margin-right: 4px;
}

.sitemap-ath-header div {
	margin-right: 4px;
	display: inline-block;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	position: relative;
	top: -1px;
}

#sitemap_ath {
	background-image: url("../img/companies/icon/ath.png");
}

.sitemap-ath-item {
	display: block;
	margin-left: 22px;
}

.sitemap-ath-deep {
	margin-left: 40px;
}

.sitemap-ath-item.disabled, .sitemap-ath-header.disabled {
	color: #000;
	text-shadow: -1px -1px #888, 0px -1px #888, 1px -1px #888, 1px 0px #888, 1px 1px #888, 0px 1px #888, -1px 1px #888, -1px 0px #888;
}

#sitemap-ath a:hover {
	filter: brightness(1000%);
}



/* Header Styles */
header {
	filter: drop-shadow(-1px 0px #FFF) drop-shadow(0px 1px #FFF) drop-shadow(1px 0px #FFF);
	z-index: 1000000;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	transition: 0.5s top;
}

header.hidden {
	top: -10em;
}

header.anim-fast {
	top: -10em;
	transition: none;
}

header.anim-slow {
	transition: 1s top;
}

#header-announcement {
	background-color: #000;
	background-image: url("../img/bg/announcement.png");
	background-position: top;
	background-size: cover;
	box-shadow: inset 0px -16px 16px #000;
	width: 100%;
	text-align: center;
	font-family: "Heading", sans-serif;
	letter-spacing: -0.2em;
	font-size: 2em;
	color: #AFF;
	text-shadow: 0px 0px 16px #AFF;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	overflow: hidden;
	max-height: 2em;
	transition: 0.3s max-height, 0.3s padding-top, 0.3s padding-bottom;
	position: relative;
}

#header-announcement.danger {
	background-color: #200;
	background-image: url("../img/bg/announcement-danger.png");
	background-position: top;
	background-size: cover;
	box-shadow: inset 0px -16px 16px #220400;
	width: 100%;
	text-align: center;
	font-family: "Heading", sans-serif;
	letter-spacing: -0.2em;
	font-size: 2em;
	color: #FA8;
	text-shadow: 0px 0px 16px #FA8;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	overflow: hidden;
	max-height: 2em;
	transition: 0.3s max-height, 0.3s padding-top, 0.3s padding-bottom;
	position: relative;
}

#close-announcement {
	position: absolute;
	top: 0.3em;
	right: 0.6em;
}

.announcement-hidden #header-announcement {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
}

#header-inner {
	background-color: #000;
	width: 100%;
	height: 2em;
	overflow: hidden;
	transition: 0.3s height;
}

.danger #header-inner {
	background-color: #220400;
}

.no-marquee #header-inner {
	height: 0;
}

#header-knobs {
	width: 100%;
}

.header-knob {
	display: inline-block;
	float: left;
	margin-left: 1em;
}

.header-knob.right-hand {
	margin-left: 0;
	float: right;
}

#header-knobs_tsuki {
	clip-path: url("#clip-knob_tsuki");
	background-color: #000;
	background-image: url("../img/header-knobs_tsuki.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-origin: content-box;
	width: 6vw;
	height: 2.5vw;
	padding: 0.25vw;
	padding-right: 0.7vw;
	margin-left: 0;
	min-width: 6em;
	min-height: 2.5em;
}

.danger #header-knobs_tsuki {
	background-color: #220400;
}

.header-knob-text {
	clip-path: url("#clip-knob-text");
	background-color: #000;
	color: #FFF;
	font-family: "Tiny", sans-serif;
	height: 0.8em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin-right: 1em;
}

.danger .header-knob-text {
	background-color: #220400;
}

#header-marquee {
	color: #FFF;
	width: calc(100% - 1.25em);
	display: inline-block;
	padding: 0.4em;
	font-family: "Heading", sans-serif;
	font-size: 1.2em;
	letter-spacing: -4px;
	overflow: hidden;
	white-space: nowrap;
}

#header-marquee_inner {
	display: inline-block;
	animation: HeaderMarqueeIntro 3s linear, HeaderMarqueeAnim 30s 3s linear infinite;
	margin: 0;
	padding: 0;
}

@keyframes HeaderMarqueeIntro {
	0% { opacity: 0; transform: translateX(3.333%); }
	100% { opacity: 1; transform: translateX(0%); }
}

@keyframes HeaderMarqueeAnim {
	0% { transform: translateX(0%); }
	100% { transform: translateX(calc(-33.333% - 0.3em)); }
}

.header-marquee-element {
	position: relative;
	top: -0.9em;
}

.header-marquee-element::after {
	content: "";
	display: inline-block;
	background-color: #FFF;
	width: 1px;
	height: 1.75em;
	position: relative;
	top: 0.4em;
	margin-left: 1.3em;
	margin-right: 0.5em;
	transform: skewX(-15deg);
}

#header-knobs_maintenance {
	color: #FF0;
	background: linear-gradient(to bottom, #000 0%, #F00 100%);
	padding-left: 1em;
	padding-right: 1em;
}

.danger #header-knobs_maintenance {
	background: linear-gradient(to bottom, #220400 0%, #F00 100%);
}

#header-status {
	--uc: var(--negative-color);
	color: var(--uc);
	width: 21vw;
	margin-right: calc(-21vw - 0.8em);
	display: inline-block;
	padding: 0.4em;
	font-family: "Heading", sans-serif;
	font-size: 1.2em;
	letter-spacing: -2px;
	position: relative;
	top: -1.45em;
	background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 16%,rgba(0,0,0,0) 33%);
	z-index: 1;
	text-shadow: 0px 0px 4px var(--uc);
}

.danger #header-status {
	background: linear-gradient(to right, #220400 0%,#220400 16%,rgba(0,0,0,0) 33%);
}

.hs_rep-unset {
	--uc: #FF4E00 !important;
}

.hs_warn {
	--uc: var(--main-color) !important;
}

.hs_ok {
	--uc: var(--positive-color) !important;
}

#header-status span {
	font-size: 0.8em;
	position: relative;
	top: -1px;
	margin-right: 0.4em;
	opacity: 0.5;
	color: #000 !important;
	text-shadow: 	-1px -1px var(--uc),
					 0px -1px var(--uc),
					 1px -1px var(--uc),
					 1px  0px var(--uc),
					 1px  1px var(--uc),
					 0px  1px var(--uc),
					-1px  1px var(--uc),
					-1px  0px var(--uc);
}

.hs_rep-unset span {
	color: #FF4E00 !important;
}

.hs_warn span {
	color: var(--main-color) !important;
}

.hs_ok span {
	color: var(--positive-color) !important;
}

/* Noscript Styles */
.noscript #loading-box {
	display: none !important;
}

/* Footer Styles */
body {
	display: flex;
	flex-direction: column;
}

footer {
	filter: drop-shadow(0px -1px #FFF);
	z-index: 99999;
	background-color: #000;
	width: calc(100% - 3em);
	padding: 1.5em;
	margin-bottom: 0;
	color: #FFF;
	margin-top: auto;
	opacity: 0.1;
	transition: 2s opacity ease-out;
}

footer.scrolled, footer:hover {
	opacity: 1;
	transition: 0.3s opacity ease-in;
}

footer::before {
	content: "";
	background-color: #000;
	clip-path: url("#clip-footing");
	display: block;
	height: 2.5vw;
	margin-bottom: -2.5vw;
	position: relative;
	top: calc(-2.5vw - 1.5em + 1px);
	left: -1.5em;
	width: calc(100% + 3em);
}

.footer-block {
	display: inline-block;
	vertical-align: middle;
	margin: 0.5em;
}

.footer-block_left {
	text-align: left;
}

.footer-block_right {
	text-align: right;
}

#footer-logo {
	height: 4em;
}

/* News Section Styles */
.latest-news-heading {
	position: relative;
	top: -0.7em;
}

.more-news-heading {
	margin-top: 0;
	margin-bottom: -2em;
}

/* Kahgy Page Specific Styles */
.kahgy-page #header-small {
	padding: 4vw;
	clip-path: url("#clip-heading-small");
	background-image: url("../img/bg/kahgy-header.png");
	background-size: cover;
	background-position: center bottom;
	background-attachment: fixed;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	min-height: 120px; /* Ensure minimum visibility */
}

.kahgy-page #header-shadow {
	filter: drop-shadow(0px 1px var(--company_kahgy));
}

.kahgy-page #sitemap {
	--section-color: var(--company_kahgy);
}

.kahgy-page #sitemap_tsuki {
	background-image: url("../img/companies/icon/kahgy/tsuki.png") !important;
}
.kahgy-page #sitemap_risen {
	background-image: url("../img/companies/icon/kahgy/risen.png") !important;
}
.kahgy-page #sitemap_synapse {
	background-image: url("../img/companies/icon/kahgy/synapse.png") !important;
}
.kahgy-page #sitemap_endymion {
	background-image: url("../img/companies/icon/kahgy/endymion.png") !important;
}
.kahgy-page #sitemap_kahgy {
	background-image: url("../img/companies/icon/kahgy/kahgy.png") !important;
}

/* Synapse Page Specific Styles */
.synapse-page #header-small {
	padding: 4vw;
	clip-path: url("#clip-heading-small");
	background-image: url("../img/bg/synapse-header.png");
	background-size: cover;
	background-position: center bottom;
	background-attachment: fixed;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	min-height: 120px; /* Ensure minimum visibility */
}

.synapse-page #header-shadow {
	filter: drop-shadow(0px 1px var(--company_synapse));
}

.synapse-page #sitemap {
	--section-color: var(--company_synapse);
}

.synapse-page #sitemap_tsuki {
	background-image: url("../img/companies/icon/synapse/tsuki.png") !important;
}
.synapse-page #sitemap_risen {
	background-image: url("../img/companies/icon/synapse/risen.png") !important;
}
.synapse-page #sitemap_synapse {
	background-image: url("../img/companies/icon/synapse/synapse.png") !important;
}
.synapse-page #sitemap_endymion {
	background-image: url("../img/companies/icon/synapse/endymion.png") !important;
}
.synapse-page #sitemap_kahgy {
	background-image: url("../img/companies/icon/synapse/kahgy.png") !important;
}

.synapse-page h5 {
	font-family: "Heading", sans-serif;
	font-size: 1.2em;
	margin-top: 0.5em;
}

.synapse-page h5+p {
	margin-left: 1em;
}

/* Register Page Specific Styles */
.register-page body {
	background-image: url("../img/bg/register.jpg");
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
	max-height: 100vh;
	max-width: 100vw;
	perspective: 800px;
}

.register-page html {
	overflow: hidden;
	max-height: 100vh;
	max-width: 100vw;
}

.register-page .no-anim #static {
	display: none;
}

.register-page #static {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 50;
	background-image: url("../img/static.gif");
	background-repeat: repeat;
	opacity: 0.03;
	pointer-events: none;
	animation: 3s StaticLoop linear alternate infinite;
}

@keyframes StaticLoop {
	0%   { opacity: 0.03; }
	100% { opacity: 0.1; }
}

.register-page #kuro {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background-color: #000;
	opacity: 0;
	pointer-events: none;
	transition: 1s opacity;
}

.register-page #shiro {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 150;
	background-color: #FFF;
	opacity: 0;
	pointer-events: none;
}

.register-page #shiro.fireaway {
	animation: 4s LightLad linear forwards;
}

@keyframes LightLad {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

.register-page #twinkling_stars {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: #000 url(../img/stars.png) repeat top center;
	z-index: 0;
	mix-blend-mode: lighten;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	pointer-events: none;
	transition: 0.5s opacity;
}

.register-page #twinkling_stars::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	background:transparent url(../img/twinkling.png) repeat top center;
	z-index:1;
	animation: 200s move-twink-back linear infinite;
	mix-blend-mode: darken;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	pointer-events: none;
	transition: 0.5s opacity;
}

.register-page #twinkling_stars.hidden {
	opacity: 0;
}

.register-page .shake-no {
	filter: hue-rotate(80deg) saturate(130%);
	transform: translateX(0px) translateY(0px);
	animation: shakeNo 0.2s linear infinite;
}

@keyframes shakeNo {
	0%   { transform: translateX(calc(-50% + -1px)) translateY(calc(-50% -  3px)); }
	10%  { transform: translateX(calc(-50% +  0px)) translateY(calc(-50% - -1px)); }
	20%  { transform: translateX(calc(-50% +  2px)) translateY(calc(-50% - -2px)); }
	30%  { transform: translateX(calc(-50% + -2px)) translateY(calc(-50% -  2px)); }
	40%  { transform: translateX(calc(-50% +  0px)) translateY(calc(-50% - -3px)); }
	50%  { transform: translateX(calc(-50% +  3px)) translateY(calc(-50% -  1px)); }
	60%  { transform: translateX(calc(-50% + -2px)) translateY(calc(-50% -  0px)); }
	70%  { transform: translateX(calc(-50% +  1px)) translateY(calc(-50% -  3px)); }
	80%  { transform: translateX(calc(-50% + -2px)) translateY(calc(-50% - -2px)); }
	90%  { transform: translateX(calc(-50% +  0px)) translateY(calc(-50% -  1px)); }
	100% { transform: translateX(calc(-50% + -2px)) translateY(calc(-50% -  0px)); }
}

.register-page #controls {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);
	padding: 0.5em;
	transition: 0.5s bottom;
}

.register-page #controls.hidden {
	bottom: -2.5em;
}

.register-page #controls a {
	display: inline-block;
	font-family: "Heading", sans-serif;
	font-size: 1.5em;
	color: #FFF;
	text-shadow: 0px 2px rgba(255, 255, 255, 0.6), 0px 2px 8px rgba(255, 255, 255, 0.8);
	transition: 0.3s text-shadow, 0.3s opacity;
}

.register-page #controls a:hover {
	text-shadow: 0px 2px rgba(255, 255, 255, 0.8), 0px 2px 12px rgba(255, 255, 255, 1);
}

.register-page #controls a.disabled {
	text-shadow: none;
	opacity: 0.6;
}

.register-page #controls a.finalize {
	color: #CCF;
	text-shadow: 0px 2px rgba(210, 210, 255, 0.8), 0px 2px 12px rgba(210, 210, 255, 1), 0px 2px 12px rgba(210, 210, 255, 1), 0px 2px 64px rgba(210, 210, 255, 1);
}

.register-page #left {
	float: left;
}
.register-page #left::before {
	content: "◀";
}
.register-page #right {
	float: right;
	margin-right: 0.7em;
}
.register-page #right::after {
	content: "▶";
}

.register-page .page {
	position: fixed;
	height: calc(80vmin - 4em);
	width: calc(96vmin - 4em);
	background-color: #E5D9F1;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
	left: calc(50%);
	top: 50%;
	transform: translate(-50%, -50%);
	color: #4E3466;
	font-family: "MS Mincho", serif;
	padding: 2em;
	transition: 0.3s filter, 0.3s transform, 0.3s top, 0.5s left;
}

.register-page .page.dark {
	background-color: #30253B;
	color: #DBC3F2;
}

.register-page .page.notready {
	top: -50% !important;
}

.register-page .page {
	transform: translate(-160%, -50%) rotate(-2deg);
	pointer-events: none;
}

.register-page .page.current {
	transform: translate(-50%, -50%);
	pointer-events: all;
}

.register-page .page.current ~ .page {
	filter: brightness(70%);
	transform: translate(-50%, -50%);
}

.register-page .page h1 {
	font-size: 5vmin;
	margin: 1vmin;
	font-weight: 900;
}

.register-page .page h2 {
	font-size: 5vmin;
	margin: 1vmin;
	font-weight: 900;
	margin-left: 0;
	padding-bottom: 0.2vmin;
	border-bottom: 4px solid;
}

.register-page .page .message {
	border: 3px double;
	width: 70%;
	text-align: left;
	padding: 1vmin;
	font-size: 2.5vmin;
	margin-left: calc(15% - 1vmin);
	box-shadow: 2px 2px;
}

.register-page .page p {
	font-size: 2vmin;
}

.register-page .page p+p {
	margin-top: 2vmin;
}

.register-page .page hr {
	background: none;
	border-bottom: 1px solid #4E3466;
	width: 40%;
	margin-left: 30%;
	margin-top: 3vmin;
	margin-bottom: 2vmin;
}

.register-page .page.dark hr {
	border-bottom: 1px solid #DBC3F2;
}

.register-page .page b {
	font-weight: 900;
}

.register-page .page i {
	font-style: italic;
}

.register-page .page input:not(#captcha) {
	width: 100%;
	background-color: #4E3466;
	border: 3px double #E5D9F1;
	color: #E5D9F1;
	font-size: 4vmin;
	margin-top: 1vmin;
	font-family: "MS Gothic", sans-serif;
}

.register-page li {
	font-size: 2vmin;
}

.register-page li::before {
	content: "» ";
}

.register-page .clicky-box {
	font-size: 1.9vmin;
	margin-left: 2.2vmin;
	position: relative;
}

.register-page .clicky-box::before {
	content: "☐ ";
	position: absolute;
	left: -2.2vmin;
	font-size: 2vmin;
}

.register-page .clicky-box.checked::before {
	content: "☒ ";
	font-size: 2vmin;
}

.register-page .action-required {
	color: #E5D9F1;
	background-color: #4E3466;
	margin-left: -2em;
	margin-right: -2em;
	margin-top: 2vmin;
	margin-bottom: 2vmin;
	padding-left: 2em;
	padding-right: 2em;
	padding-top: 1vmin;
	padding-bottom: 1vmin;
	border-top: 1vmin double #E5D9F1;
	border-bottom: 1vmin double #E5D9F1;
}

.register-page #file {
	opacity: 0;
	position: fixed;
	z-index: 10000000000;
	left: 0px;
	top: 0px;
	padding: 0;
	margin: 0;
	width: 20px;
	height: 20px;
}

.register-page #filelabel {
	display: block;
    font-size: 2vmin;
    padding: 5vmin;
    text-align: center;
    border: 5px dashed;
    margin-top: 1vmin;
    transition: 0.3s color;
    position: relative;
}

.register-page #filelabel:hover {
    color: #FFF;
}

.register-page #fileimage {
	width: 30vmin;
	height: 30vmin;
	object-fit: contain;
	position: absolute;
	right: 2vmin;
	top: 30vmin;
	transform: rotate(-3deg);
	filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.6));
	pointer-events: none;
}

.register-page #fileimage.hidden {
	display: none;
}

.register-page .example {
	padding: 1vmin;
	color: #4E3466;
	background-color: #E5D9F1;
	border: 3px double #4E3466;
	font-size: 2vmin;
	width: calc(100% - 2vmin);
}

.register-page #pledge {
	resize: none;
	padding: 1vmin;
	width: calc(100% - 2vmin);
	height: 19vmin;
	background-color: #4E3466;
	border: 3px double #E5D9F1;
	color: #E5D9F1;
	font-size: 2vmin;
	margin-top: 1vmin;
	font-family: "MS Gothic", sans-serif;
}

.register-page.finalizing .page {
	left: 50% !important;
	transform: translate(-50%, -38%) rotate3d(1, 0, 0, 60deg) scale(0.7) !important;
	transition: 1s transform, 0.5s left;
}

.register-page.finalized .page {
	transform: translate(-50%, -38%) rotate3d(1, 0, 0, 60deg) scale(0.7) translate3d(0, -900em, 0) !important;
	transition: 6s transform linear;
}

.register-page.finalizing #static {
	top: -100%;
	transition: 1s 1s top;
}

.register-page.finalizing::after {
	top: calc(100% + 32px) !important;
	transition: 1s 1s top;
}

.register-page #moon {
	position: fixed;
	left: 0;
	top: 100%;
	width: 100%;
	height: 100%;
	background-image: url("../img/bg/moon.png");
	background-size: cover;
	background-position: center top;
	transition: 1s 0.6s background-position, 1s top;
}

.register-page.finalizing #moon {
	top: 0;
	background-position: center 50%;
}

.register-page #send {
	position: fixed;
	display: inline-block;
	background-color: #A00;
	left: 50%;
	transform: translateX(-50%) rotate3d(1, 0, 0, 60deg);
	padding: 0.8em;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
	bottom: 1em;
	font-size: 3em;
	font-family: "Heading", sans-serif;
	color: #FAA;
	z-index: 100;
	box-shadow: 0px 2px 0px -0.5px #800, 0px 4px 0px -1px #800, 0px 6px 0px -1.5px #800, 0px 8px 0px -2px #800, 0px 10px 0px -2.5px #800, 0px 12px 0px -3px #800, 0px 0px 8px #F00, 0px 12px 8px #600;
	transition: 0.6s transform cubic-bezier(.21,.99,.5,1.18), 0.3s background-color;
}

.register-page #send:hover {
	background-color: #F00;
}

.register-page #send.hidden {
	transform: translateX(-50%) rotate3d(1, 0, 0, 60deg) translate3d(0, 5em, 0);
}

.register-page #cancel {
	position: fixed;
	display: inline-block;
	left: 50%;
	background-color: rgba(0, 0, 0, 0.4);
	transform: translateX(-50%) rotate3d(1, 0, 0, 60deg);
	padding: 0.8em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	bottom: 0.4em;
	font-size: 1.2em;
	font-family: "Heading", sans-serif;
	color: #FFF;
	z-index: 100;
	box-shadow: 0px 2px 0px -0.5px rgba(255, 255, 255, 0.6), 0px 4px 0px -1px rgba(255, 255, 255, 0.6), 0px 6px 0px -1.5px rgba(255, 255, 255, 0.6), 0px 0px 8px #FFF, 0px 6px 8px #FFF;
	transition: 0.6s transform cubic-bezier(.21,.99,.5,1.18);
}

.register-page #cancel.hidden {
	transform: translateX(-50%) rotate3d(1, 0, 0, 60deg) translate3d(0, 5em, 0);
}

.register-page #ays {
	position: fixed;
	top: 30%;
	width: 90%;
	text-align: center;
	margin-left: 5%;
	color: #FFF;
	font-family: "Heading", sans-serif;
	z-index: 100;
	text-shadow: -1px -1px #000, 0px -1px #000, 1px -1px #000, 1px 0px #000, 1px 1px #000, 0px 1px #000, -1px 1px #000, -1px 0px #000;
	font-size: 2em;
	transition: 1s opacity;
}

.register-page #ays.hidden {
	opacity: 0;
	pointer-events: none;
}

.register-page .careted {
	background-color: #4E346620;
	text-shadow: 0px 0px 6px #4E3466;
	transition: 0.5s background-color, 0.5s text-shadow;
}

.register-page .careted::after {
	content: "";
	display: inline-block;
	background-color: #4E3466;
	box-shadow: 0px 0px 6px #4E3466;
	width: 2px;
	height: 1em;
	margin-right: -2px;
	vertical-align: bottom;
	transition: 0.5s background-color, 0.5s box-shadow;
}

.register-page .careted.bad {
	background-color: #FF000060;
	text-shadow: 0px 0px 6px #FF0000;
}

.register-page .careted.bad::after {
	background-color: #FF0000;
	box-shadow: 0px 0px 6px #FF0000;
}

.register-page header {
	transition: 1s opacity, 1s top !important;
}

/* Global Preferences Menu Styles */
#preferences-wrapper {
	background-color: rgba(0, 0, 0, 0.8);
	transition: 0.3s background-color;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 5000000;
}

#preferences-wrapper.hidden {
	background-color: rgba(0, 0, 0, 0);
	pointer-events: none;
}

#preferences {
	position: absolute;
	width: 50em;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	padding: 1em;
	background-color: #000;
	border: 1px solid var(--inverse-color);
	color: var(--inverse-color);
	transition: 0.3s top, 0.3s transform, 0.3s opacity;
}

#preferences-wrapper.hidden #preferences {
	top: 100%;
	opacity: 0;
	transform: translate(-50%, 0) rotate(2deg);
}

#preflist {
	max-height: 60vh;
	overflow-y: auto;
}

#preferences h1 {
	font-family: "Heading", sans-serif;
	font-size: 2em;
	border-bottom: 1px solid var(--inverse-color);
	padding-bottom: 0.25em;
}

#preferences-close {
	color: #000;
	background-color: var(--inverse-color);
	font-family: "Heading", sans-serif;
	text-align: center;
	padding: 0.5em;
	margin-top: 1em;
	transition: 0.3s background-color;
}

#preferences-close:hover {
	background-color: var(--main-color);
}

.preference {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 1em 0;
	padding: 0.5em 0;
	border-bottom: 1px solid var(--inverse-color);
}

.preference:last-of-type {
	border-bottom: none;
}

.explanation {
	flex: 1;
}

.explanation h2 {
	font-family: "Heading", sans-serif;
	font-size: 1.2em;
	margin: 0 0 0.25em 0;
}

.explanation p {
	margin: 0;
	font-size: 0.9em;
	opacity: 0.8;
}

.switch {
	display: flex;
	border: 1px solid var(--inverse-color);
}

.switch-option {
	padding: 0.5em 1em;
	background-color: #000;
	color: var(--inverse-color);
	border-right: 1px solid var(--inverse-color);
	cursor: pointer;
	transition: 0.3s background-color;
}

.switch-option:last-child {
	border-right: none;
}

.switch-option:hover {
	background-color: var(--main-color);
}

.switch-option.active {
	background-color: var(--inverse-color);
	color: #000;
}

.slider {
	width: 200px;
	height: 20px;
	background: var(--inverse-color);
	outline: none;
	opacity: 0.7;
	transition: opacity 0.2s;
}

.slider:hover {
	opacity: 1;
}

.slider::-webkit-slider-thumb {
	appearance: none;
	width: 20px;
	height: 20px;
	background: var(--main-color);
	cursor: pointer;
}

.slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background: var(--main-color);
	cursor: pointer;
	border: none;
}

.preferences-link {
	display: block;
	color: var(--inverse-color);
	text-align: center;
	padding: 0.5em;
	margin: 1em 0;
	border: 1px solid var(--inverse-color);
	transition: 0.3s background-color;
}

.preferences-link:hover {
	background-color: var(--main-color);
}

/* Responsive preferences menu for mobile */
@media (max-width: 768px) {

	
	/* Adjust content positioning for increased header padding */
	#motto {
		font-size: 4vw; /* Slightly larger on tablets */
	}

	
	.kahgy-page #header-small,
	.synapse-page #header-small {
		padding: 6vw; /* Increase from 4vw to 6vw */
		min-height: 100px; /* Ensure minimum height */
	}
	
	#preferences {
		width: 95vw;
		max-width: 95vw;
		padding: 0.8em;
		font-size: 0.9em;
	}
	
	#preferences h1 {
		font-size: 1.5em;
	}
	
	.preference {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 1em;
	}
	
	.preference .explanation {
		margin-bottom: 0.5em;
	}
	
	.preference h2 {
		font-size: 1.1em;
	}
	
	.switch {
		display: flex;
		justify-content: space-around;
		width: 100%;
		padding: 0.3em;
	}
	
	.switch-option {
		padding: 0.5em 0.8em;
		min-width: 2em;
		text-align: center;
		flex: 1;
	}
	
	#preferences-close {
		padding: 0.8em 1.5em;
		font-size: 1.1em;
	}
	
	.slider {
		width: 100%;
	}
}

@media (max-width: 480px) {
	/* Make header background images even more prominent on mobile phones */

	
	/* Adjust content positioning for much larger header padding */
	#motto {
		font-size: 5vw; /* Larger text on mobile */
	}
	
	
	.kahgy-page #header-small,
	.synapse-page #header-small {
		padding: 10vw; /* Increase significantly for phones */
		min-height: 120px; /* Ensure larger minimum height */
	}
	
	#preferences {
		width: 98vw;
		padding: 0.5em;
		font-size: 0.85em;
	}
	
	#preferences h1 {
		font-size: 1.3em;
	}
	
	.preference h2 {
		font-size: 1em;
	}
	
	.switch-option {
		padding: 0.4em 0.6em;
	}
}