html {
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
html::-webkit-scrollbar {
	display: none;
}

:root {
	--db: #16186b;
	--bg: #ffffff;
	--dbo: #16186b99;
	--mt: 60px;
	--gr: #77de6e;
	--org: brightness(1);
	--c_tran: color 0.15s linear;
	--o_tran: opacity 0.15s ease-out;
	--u_tran: opacity 0.45s ease-in-out;
	--w_tran: text-decoration-color 0.15s ease-out;
}

body {
	margin: 0;
	background-color: var(--bg) !important;
}

body.dark {
	--bg: #060110;
	--db: #ccc;
	--dbo: #ffffff50;
	--org: brightness(1.93);
	--gr: #2e9daa;
}

.header {
	z-index: 1;
	position: fixed;
	font: italic 500 2.4rem 'Aleo';
	width: 100%;
	height: var(--mt);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.he {
	display: inline-flex;
	height: 100%;
	text-align: center;
	align-items: center;
	color: var(--db);
	transition: var(--c_tran);
	user-select: none;
}

#tang {
	filter: var(--org);
	height: 40px;
	margin: 12px;
	transition: filter 0.2s ease-out;
}

#tang:hover {
	color: blue;
	cursor: pointer;
	transition: filter 0.2s ease-out;
}
#home {
	padding: 0px 10px 0px 0px;
	text-decoration-color: transparent;
	transition: var(--w_tran);
}
#home:hover {
	text-decoration: wavy underline;
	text-decoration-color: var(--gr);
	text-decoration-thickness: 2px;
	cursor: pointer;
}

#plus {
	font-style: normal;
	padding: 0px 10px 0px 10px;
	position: absolute;
	margin-left: 50%;
	transform: translateX(-50%);
	/* background-color: red; */
}

#plus:hover {
	color: var(--gr);
	cursor: pointer;
}

#plus .but {
	transition: transform 0.2s linear;
	width: 46px;
}

#plus.open .but {
	transform-origin: center;
	transform: rotate(45deg);
	transition: transform 0.1s linear;
}

#abt {
	padding: 0px 18px 0px 10px;
	text-decoration-color: transparent;
	transition: var(--c_tran), var(--w_tran);
}

#abt:hover {
	text-decoration: wavy underline;
	text-decoration-color: var(--gr);
	text-decoration-thickness: 2px;
	cursor: pointer;
}

.main {
	position: absolute;
	z-index: -1;
	width: 100%;
	background-image: radial-gradient(var(--dbo) .9px, var(--bg) .9px);
	background-position: top 0px left 50%;
	background-size: 2.1vw 2.1vw;
	overflow: hidden;
	transition: height 1s ease;
	transition-delay: 0.1s;
	height: 100vh;
}



.m_x {
	height: 100vh;
}
.m_z {
	height: 100vh;
}
.m_a {
	height: 170vw;
}
.m_b {
	height: 200vw;
}
.m_c {
	height: 230vw;
}
.m_d {
	height: 250vw;
}
.m_e {
	height: 308vw;
}
.m_f {
	height: 200vw;
}
.m_g {
	height: 182vw;
}
.m_h {
	height: 240vw;
}


.m_k, .m_m, .m_r, .m_t,.m_n {
	height: 100vh;
	display: grid;
	grid-template-columns: repeat(auto-fill, 4.9vw);
	grid-template-rows: repeat(auto-fill, 10.5vh);
	overflow: hidden;
	/* gap: 12px; */
}






#bot {
	position: fixed;
	z-index: 10;
	display: flex;
	margin-top: 100vh;
	transform: translateY(-100%);
	height: var(--mt);
	font: normal 500 2.4rem 'Aleo';
	width: 100%;
	justify-content: space-between;
}

.hi {
	transition: var(--c_tran);
	display: inline-flex;
	text-align: center;
	align-items: center;
	text-decoration: none;
	color: var(--db);
	user-select: none;
}
#up {
	display: inline-flex;
	/* background-color: var(--bg); */
	height: 100%;
	width: var(--mt);
	align-items: end;
	justify-content: center;
	text-decoration: none;
	color: var(--db);
}
#up:hover {
	color: var(--gr);
	cursor: pointer;
}
.arrow {
	font: normal 500 2rem 'Aleo';
	display: flex;
	width: var(--mt);
	align-items: center;
	justify-content: center;
	height: 100%;
}

.arrow:hover {
	color: var(--gr);
	cursor: pointer;
}

.bot_menu {
	height: 100%;
	display: inline-flex;
	width: fit-content;
	justify-content: space-between;
	transition: background-color 0.15s ease-out;
}
.bot_menu.hid {
	opacity: 0;
	pointer-events: none;
}
.bot_menu:not(:has(.bot_popup.hid)) {
	background-color: var(--bg);
	transition: background-color 0.2s ease-out;
}
.bot_pop {
	font: italic 500 1.5rem 'Aleo';
	text-decoration-color: transparent;
	transition: var(--c_tran), var(--w_tran);
}

.bot_pop:hover {
	text-decoration: wavy underline;
	text-decoration-color: var(--gr);
	text-decoration-thickness: 2px;
	cursor: pointer;
}

.bot_popup {
	position: absolute;
	display: flex;
	flex-direction: column;
	bottom: 100%;
	right: 0;
	max-height: 70vh;	/* width: 100%; */
	align-items: end;
	transition: var(--o_tran);
	/* padding: 0 10px; */
}

.bot_popup.hid {
	opacity: 0;
	pointer-events: none;
	transition: var(--o_tran);
}

.hi.hid{
	opacity: 0;
		pointer-events: none;
		transition: var(--o_tran);
}

.p_opt.active {
	text-decoration: wavy underline;
	text-decoration-color: var(--gr);
	text-decoration-thickness: 2px;
}

.p_opt {
	text-decoration-color: transparent;
	transition: var(--w_tran);
	/* padding: 1vh 60px 1vh 12px; */
	padding: 12px 60px 12px 12px;
	background-color: var(--bg);
	margin: -1px 0 0 0;
	font: italic 500 2vh 'Aleo';
	text-align: center;
	color: var(--db);
	width: fit-content;
	user-select: none;
}
.p_opt:hover {
	text-decoration: wavy underline;
	text-decoration-color: var(--gr);
	text-decoration-thickness: 2px;
	cursor: pointer;
}

.drp {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: var(--mt) 0 0 50%;
	transform: translate(-50%);
	position: fixed;
	opacity: 1;
	transition: opacity 0.2s ease;
}
.drp.hidden {
	/* display: none; */
	max-height: 0px;
	opacity: 0;
	pointer-events: none;
	/* transition: opacity .4s ease; */
}

.opt {
	text-decoration-color: transparent;
	transition: var(--w_tran);
	padding: 15px 15px 15px 15px;
	background-color: var(--bg);
	font: italic 500 1.5rem 'Aleo';
	text-align: center;
	color: var(--db);
	width: fit-content;
	user-select: none;
}

.opt:hover {
	text-decoration: wavy underline;
	text-decoration-color: var(--gr);
	text-decoration-thickness: 2px;
	cursor: pointer;
}
#opt_b {
	text-decoration: none;
}
#opt_b:hover {
	font: normal 400 1.45rem 'Lora';
	text-decoration: none;
	/* text-decoration-color: #007f7f; */
	color: #007f7f;
}

.img.bounce{
	margin-top: 0 !important;
}

.img {
	opacity: 0;
	content-visibility: hidden;
	pointer-events: none;
	margin-top: 1vw;
	position: absolute;
	user-select: none;
	transition: var(--u_tran);
	transform-origin: center center 0px;
	transform: translate(-50%, -50%);
	color: var(--db);
}

.img:not(.view) {
	transition: var(--o_tran);
	opacity: 0;
}

.xtra.view{
	position: relative;
	transform: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 8vw;
	/* height: fit-content; */
	
}
.xtra::after{
		content: "";
			background-image: var(--img);
			position: fixed;
			/* border: #007f7f solid 2px; */
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			min-width: 60vw;
			min-height: 80vh;
			/* aspect-ratio: 1; */
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			z-index: 10;
			opacity: 0;
			transition: var(--u_tran);
			background-color: inherit;
}

.xtra:hover::after {
	
	opacity: 1;
	transition: var(--o_tran);
	
} 
.in {
	width: inherit;
}

.view > .in {
	cursor: pointer;
	pointer-events: all;
}
.view:not(.img_x) > .in {
	cursor: initial;
}
.view > .type {
	cursor: pointer;
	pointer-events: all;
}
.view {
	opacity: 1;
	content-visibility: visible;
}

figcaption {
	color: var(--db);
	background-color: var(--bg);
	text-align: center;
	transform-origin: 50% 50%;
	display: inline-block;
	width: max-content;
}

.type {
	text-decoration-color: transparent;
	transition: var(--w_tran);
	font: italic 500 0.8vw 'Aleo';
	background-color: var(--bg);
	padding: 4px;
}

.type:hover {
	text-decoration: wavy underline;
	text-decoration-color: var(--gr);
	text-decoration-thickness: 1px;
	cursor: pointer;
}
.type.off:hover{
	text-decoration: none;
	cursor: initial;
}


.txt {
	font: italic 500 1.1vw 'Aleo';
	display: block;
}

.desc{
	position: absolute;
	z-index: 11;
	font: italic 500 .8rem 'Aleo';
	color: var(--db);
	left: 50%;
	top: 100%;
	text-align: center;
	transform: translate(-50%, -340%);
	background-color: var(--bg);
}

.desc_l{
	color: var(--db);
	text-decoration: dotted underline;
	text-decoration-color: var(--gr);
	text-decoration-thickness: 2px;
	transition: var(--w_tran);
	pointer-events: all;
	cursor: pointer !important;
}
.desc_l:hover{
	text-decoration: wavy underline;
	text-decoration-color: var(--gr);
	text-decoration-thickness: 1px;
}

#inf{
	padding-bottom: calc(var(--mt)/2);
	display: flex;
	flex-direction: column;
}

#inf_a{
	padding-bottom: 12px;
	font-weight: bold;
	
}
#inf_b{
	padding-bottom: 6px;
	text-align-last: justify;
	margin: 0;
	font-weight: 360;
	/* text-decoration: underline dotted 2px; */
}

.view span, .view p{
	/* background-color: red; */
	user-select: text;
	pointer-events: auto;
}

#splash {
	font-size: 2.6vw;
}

@media screen and (max-height: 4300px) {
	.desc{
		background-color: transparent;
	}
}
@media screen and (max-width: 800px) {

	.m_k, .m_m, .m_r, .m_t, .m_n{
		display: flex;
	}
	.xtra.view{
		max-height: none;
	}
	.xtra::after {
			display: none;
		}

	#inf{
		margin: 0 15px;
	}

	#plus:hover {
		color: var(--db);
		transition: none;
	}

	#home {
		text-decoration: wavy underline;
		text-decoration-thickness: 2px;
		text-decoration-color: transparent;
		transition: var(--w_tran);
	}
	#home:hover {
		text-decoration-color: transparent;
	}
	#home:active {
		transition: none;
		text-decoration-color: var(--gr);
	}

	.header {
		transition: background-color 0.7s ease;
	}
	.header:has(#plus.open) {
		background-color: var(--bg);
		transition: background-color 0.2s ease;
	}

	.opt {
		text-decoration: wavy underline;
		text-decoration-color: transparent;
		text-decoration-thickness: 2px;
	}
	.opt:active {
		text-decoration: wavy underline;
		text-decoration-color: var(--gr);
		text-decoration-thickness: 2px;
		cursor: pointer;
		transition: var(--w_tran);
	}

	#bot {
		height: fit-content;
		top: 100%;
		transition: top 1s ease;
		transition: background-color 0.7s ease;
	}

	#up {
		display: none;
	}

	.bot_menu {
		width: 100%;
		height: var(--mt);
		transition: background-color 0.7s ease;
	}

	.bot_pop {
		text-wrap: nowrap;
		font-size: 5vw;
	}

	.bot_pop:hover {
		text-decoration-color: transparent;
		text-decoration-thickness: 1px;
	}
	.bot_pop:active {
		text-decoration: wavy underline;
		text-decoration-color: var(--gr);
		text-decoration-thickness: 1px;
		cursor: pointer;
	}

	.p_opt {
		margin: 0;
		padding: 6px 12px;
		font-size: 1rem;
		text-decoration-thickness: 1px;
	}

	.p_opt:hover {
		text-decoration-thickness: 1px;
		text-decoration-color: transparent;
	}
	.p_opt.active {
		text-decoration-thickness: 1px;
		text-decoration-color: var(--gr);
	}

	.arrow:hover {
		color: var(--db);
		transition: none;
	}
	.arrow:active {
		transition: none;
		color: var(--gr);
		cursor: pointer;
	}

	.bot_popup {
		padding-top: 12px;
		background-color: var(--bg);
		width: 100%;
		align-items: center;
		transition: opacity 0.2s ease-out;

	}
	.bot_popup.hid {
		transition: opacity 0.7s ease;
	}

	#plus {
		position: relative;
		margin: 0;
		transform: none;
	}
	.drp {
		align-items: end;
		margin: var(--mt) 0 0 100%;
		transform: translateX(-100%);
	}
	.drp.hidden {
		transition: opacity 0.7s ease;
	}
	#abt {
		padding: 15px;
	}
	.main {
		background-position: top 1.5vh left 50%;
		background-size: 4vh 4vh;
		flex-direction: column;
		height: fit-content;
		min-height: 100%;
		padding-bottom: calc(var(--mt) * 2);
	}

	#bot {
		margin: 0px 0px 0px 0px;
	}
	.img {
		margin: 0 0 30px 0;
		position: relative;
		left: 0% !important;
		top: 60px !important;
		width: 100% !important;
		transform: none !important;
		rotate: none !important;
	}
	.img:not(.view) {
		transition: height 0.1s linear;
		height: 0;
		margin: 0;
		padding: 0 !important;
	}
	.in{
		border-radius: 0 !important;
	}
	.type{
		font: italic 500 1rem 'Aleo';
	}

	.txt {
		display: inline-block;
		font: italic 500 1.2em 'Aleo';
		background-color: var(--bg);
		padding: 0 12px;
	}

	#splash {
		font-size: 1.2rem;
	}

	.desc {
		z-index: 0;
		display: block;
		width: 100%;
		text-align: center;
	}
	.m_z{
		padding: 0%;
	}

	.list.view{
		margin-top: 50px;
	}
	.desc.img_z.view{
		margin-bottom: 90px;
	}
	
}

/*-----------------------------------------------------------------------------------------------*/