:root {
	--moe-shade-min3: #020003;
	--moe-shade-min2: #18002b;
	--moe-shade-min1: #2e0052;
	--moe: #440079;
	--moe-shade-max1: #5a00a0;
	--moe-shade-max2: #7000c7;
	--moe-shade-max3: #8600ef;

	--moe-tint1: #9103ff;
	--moe-tint2: #a22bff;
	--moe-tint3: #b352ff;
	--moe-tint4: #c479ff;
	--moe-tint5: #d5a0ff;
	--moe-tint6: #e7c7ff;
	--moe-tint7: #f8efff;

	--all: all 0.3s ease;
	
	--kakki-o1 :#ff983d;
	--kakki-o2 :#ffb347;
	--kakki-o3 :#ffd480;
	--kakki-g1 :#a3d978;
	--kakki-g2 :#6cbf5a;
	--kakki-g3 :#49982a;
	--kakki-g4 :#2f7f33;
	--kakki-g5 :#1c5f20;
	--kakki-x1 :#f2e8cf;
	--kakki-x2 :#d9ca9b;
}

/* Base Styles */
* {
	font-family: "Space Mono", monospace;
	transition: all 0.3s ease;
}

a {
	text-decoration:none;
	color: inherit;
}

/* Global Utility Classes */
.jpn {
	font-family: "M PLUS Rounded 1c", sans-serif !important;
}

.font0 { font-size: 14pt; }
.font1 { font-size: 24pt; }
.font2 { font-size: 32pt; }

.boxs1 {
	border-radius: 0pt !important;
	box-shadow: 4px 4px 0px -2px var(--moe);
	-webkit-box-shadow: 4px 4px 0px -2px var(--moe);
	-moz-box-shadow: 4px 4px 0px -2px var(--moe);
}
.boxs1:hover {
	background-color: var(--moe-shade-min1);
	color: white;
}
.boxs2 {
	transition: var(--all);
	border-radius: 0pt !important;
	box-shadow: 4px 4px 0px 0px var(--moe);
	-webkit-box-shadow: 4px 4px 0px 0px var(--moe);
	-moz-box-shadow: 4px 4px 0px 0px var(--moe);
}

h6.note {
    padding: 0pt !important;
	font-weight: normal !important;
    margin-top: 0 !important;
}

/* General Page Layout */
body {
	background-color: var(--moe-tint7);
	max-width: 100%;
	flex-wrap: wrap;
	overflow-x: hidden;
	overflow-y: scroll;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	color: var(--moe);
	padding: 0;
	margin: 0;
}

body::before {
    content: "";
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    height: 100%;
}

div#main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.container {
	width: 90%;
    margin-bottom: 3rem;
}



/* ################################ */
/* Styles for Unassigned Pages (Index, etc) */
/* ################################ */

/* Index Page Specific */
.bodymainindex {
	overflow-x:hidden;
	overflow-y:hidden;
}

#logo {
	position: fixed;
	margin: 0 auto;
	z-index: -1;
}
#logo img {
	width: 100px;
	opacity: 0.8;
}
#fansub {
    font-size: 24pt;
    color: white;
}
@media only screen and (max-width: 600px) {
    #fansub { font-size: 14vw; }
}

/* Password Form */
#passwordForm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* General Member Grid (e.g., for generation list page) */
.member-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}
.member-data {
	width: 105px;
	text-align: center;
	border: 5px solid white;
	background-color: white;
	border-radius: 2px;
	overflow: hidden;
	padding-bottom: 5pt;
	transition: all 0.3s ease;
}
.member-data:hover {
	transform: scale(1.3);
	z-index:99;
}
.member-data img {
	width: 105px;
	height: 140px;
	object-fit: cover;
}
.member-data .member-name {
	font-size: 0.9em;
	margin-top: 4px;
	color: black;
}