@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&family=Monofett&family=Sometype+Mono:ital,wght@0,400..700;1,400..700&family=VT323&display=swap');

:root {
	--navigator-width: 20em;
	--navigator-padding: 1em;
	--navigator-offset: 0em;
}

@media (width<70em) {
	#navigator {
		font-size: 200% !important;
	}
	
	#content {
		font-size: 200%;
	}
}

html.theme-fireplace, .theme-selector.theme-fireplace {
	--bg: #100000;
	--bgl: #401000;
	--bgd: #000;
	
	--text: #fff;
	--text-hl: #ff4f00;
	--text-hld: #7f4f00;
	--text-hll: #ffdd7f;
}

html.theme-moonlight, .theme-selector.theme-moonlight {
	--bg: #100020;
	--bgl: #200040;
	--bgd: #000;
	
	--text: #fff;
	--text-hl: #cc7fff;
	--text-hld: #4f007f;
	--text-hll: #ff7;
}

html.theme-summertime, .theme-selector.theme-summertime {
	--bg: #C3EDEA;
	--bgl: #F8F3EB;
	--bgd: #F40552;
	
	--text: #002244;
	--text-hl: #F40552;
	--text-hld: #F40552;
	--text-hll: #FC7E2F;
}

::selection {
	background-color: var(--text-hll);
	color: var(--bg);
}

html {
	scrollbar-width: thin;
	scrollbar-color: var(--text-hl) var(--bg);
}

body {
	background-color: var(--bg);
	color: var(--text);
	font-family: "Sometype Mono", serif;
	font-size: 12pt;
	margin: 0;
	
	width: 100%;
	height: 100%;
}

body a {
	color: var(--text-hl);
}

body a:hover {
	color: var(--text-hll);
}

h1, h2, h3, h4, h5 {
	color: var(--text-hl);
	font-weight: normal;
	margin: 0;
}

h1 {
	font-family: "Doto", serif;
	font-size: 250%;
}

h2 {
	font-family: "VT323", serif;
	font-size: 250%;
}

 h3 {
	font-family: "VT323", serif;
	font-size: 175%;
}

h4 {
	font-family: "Monofett", serif;
	font-size: 175%;
}

h5 {
	font-family: "Sometype Mono", serif;
	font-weight: bold;
	font-size: 100%;
	color: var(--text);
}

hr {
	border: none;
	border-bottom: 1px solid var(--text-hl);
}

ul {
	margin-top: 0;
}

p:has(+ ul) {
	margin-bottom: 0.2em;
}

strong, em, b, i {
	color: var(--text-hll);
}

#main {
	display: flex;
	flex-direction: row;
	
	position: absolute;
	height: -webkit-fill-available;
	height: -moz-available;
	height: fill-available;
}

#navigator {
	position: fixed;
	width: var(--navigator-width);
	translate: var(--navigator-offset);
	height: 100%;
	border-right: 1px solid var(--text-hl);
	padding: var(--navigator-padding);
	user-select: none;
	
	z-index: 10;
	font-size: 12pt;
	
	scrollbar-width: thin;
}

:root:has(#navigator.hidden) {
	--navigator-offset: calc(0em - var(--navigator-width) - var(--navigator-padding) - var(--navigator-padding) - 1px);
}

#heart-logo {
	--shift: 0;
	background-color: currentColor;
	background-position: left var(--shift) top 0;
	background-size: 0.52em;
	mask-image: url("g/heart_mask.png");
	mask-size: contain;
    mask-repeat: no-repeat;
	display: inline-block;
	width: 0.9em;
    height: 0.52em;
	
	transition: background-position 1s, scale 0.2s;
}

#navigator.hidden #heart-logo {
	position: absolute;
    right: 0;
    translate: calc(100% + 0.5em);
    top: 1em;
	scale: 1.3;
	mask-image: url("g/heart_mask_L.png");
}

#footer {
	text-align: center;
	margin-top: 1em;
}

#content {
	position: fixed;
	width: calc(100vw - var(--navigator-width) - var(--navigator-padding) - var(--navigator-padding) - var(--navigator-offset) - 2em);
	min-height: calc(100vh - 2em);
	max-height: calc(100vh - 2em);
	left: calc(var(--navigator-width) + var(--navigator-padding) + var(--navigator-padding) + var(--navigator-offset) + 1px);
	padding: 1em;
	overflow: auto;
	
	scrollbar-width: thin;
}

#navigator.hidden ~ #content {
	margin-left: 4em;
	width: calc(100vw - var(--navigator-width) - var(--navigator-padding) - var(--navigator-padding) - var(--navigator-offset) - 6em);
}

#content a {
	text-decoration: wavy;
    text-decoration-line: underline;
    text-decoration-color: var(--text-hl);
    text-decoration-thickness: 0.5px;
}

#content p {
	margin-top: 0;
}

#content p:empty {display: none;}

#pages {
	display: flex;
	flex-direction: column;
	
	margin-bottom: 15em;
}

#pages a.updates-content {
	text-decoration: wavy;
    text-decoration-line: underline;
    text-decoration-color: var(--text-hl);
    text-decoration-thickness: 0.5px;
}

.page-entry:has(.subpages) > a::after {
	content: " [\2026]";
}

.subpages {margin-left: 1em;}

.subpages > .page-entry > a::before {
	content: "\21b3";
	display: inline-flex;
    margin-right: 0.5em;
}

.subpages > .page-entry > a:not(.current-page) {
	color: var(--text-hld);
}

.subpages > .page-entry > a:not(.current-page):hover {
	color: var(--text-hl);
}

#pages a.current-page {
	color: var(--text-hll);
}

.subpages-hidden:not(:has(.current-page)) {display: none;}

.smol {
	font-size: 67%;
}

.tiny {
	font-size: 50%;
}

.grey {
	opacity: 40%;
}

#theme-widget {
	position: fixed;
    bottom: 1em;
    width: var(--navigator-width);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
	
	font-size: 100%;
}

#theme-selector-container {
	display: flex;
    flex-direction: row;
    width: 67%;
    margin-top: 0.5em;
    justify-content: space-evenly;
}

.theme-selector {
	display: flex;
    align-items: center;
    justify-content: center;
	
	color: var(--text);
	font-weight: bold;
	width: 1.5em;
	height: 1.5em;
	
	outline: 0.2em solid var(--bgl);
	background: linear-gradient(135deg, var(--bg) 35%, var(--text-hld) 35%, var(--text-hld) 65%, var(--text-hll) 65%, var(--text-hll) 100%);
	border-radius: 999px;
	
	transition: transform 0.3s;
	user-select: none;
}

.theme-selector:hover {
	transform: scale(1.5);
}

.info {
	font-style: italic;
	font-size: 75%;
}

.info::before {
	content: "^ ";
}

#error-logo {
	position: absolute;
    top: 15vh;
	left: -8vw;
    font-size: 80vh;
    opacity: 0.3;
    z-index: -10;
    line-height: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

code {
	padding: 0 0.2em;
	background-color: var(--bgl);
	color: var(--text);
	border-radius: 0.3em;
}

img, video {
	max-width: 40%;
}

.right {
	min-width: min-content;
	max-width: 45%;
	width: 30%;
	margin-left: 1em;
	float: right;
}

.left {
	min-width: min-content;
	max-width: 45%;
	width: 30%;
	margin-right: 1em;
	float: left;
}

.right img, .left img, .right video, .left video {
	max-height: -webkit-fill-available;
	max-height: -moz-available;
	max-height: fill-available;
	max-width: 100%;
}

.cat {
	overflow: hidden;
}

.popout {
	display: none;
}

.popout.visible {
	display: inline-block;
	position: absolute;
}

.popout img, .popout video {
	max-width: 100%;
}

iframe.lazyload {
	width: 100%;
	max-width: 45%;
	aspect-ratio: 16/9;
}

.left iframe, .right iframe {
	max-width: 100%;
}

.social-listing {
	position: absolute;
	left: 12.5%;
	width: 75%;
	min-width: 40vh;
	column-count: 2;
	column-gap: 2em;
}

@container contentcontainer (max-width: 800px) {
	.social-listing {
		column-count: 1;
		width: 50%;
		left: 25%;
	}
}

.social-listing a {
	display: flex;
	text-decoration: none !important;
	color: currentColor;
}

.social {
	--socialcolor: #ff7f00;
	--corner-cut: 4vh;
	display: inline-block;
	width: 100%;
	margin: 1em;

	background-color: var(--bgl);
	padding: 1px;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corner-cut)), calc(100% - var(--corner-cut)) 100%, 0 100%);
}

.social-cont {
	background-color: var(--bg);
	color: var(--socialcolor);
	
	display: inline-block;
	position: relative;
	
	width: -webkit-fill-available;
	width: -moz-available;
	width: fill-available;
	min-height: 6vh;
	
	border-left: 6px solid var(--bgl);
	
	overflow: hidden;
	padding: 1vh;
	
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corner-cut)), calc(100% - var(--corner-cut)) 100%, 0 100%);
}

.social:hover {
	background-color: var(--socialcolor);
}

.social-cont:hover {
	background-color: var(--bgl);
	border-left: 6px solid var(--socialcolor);
}

.social-icon {
	display: block;
	float: left;
	height: 6vh;
	margin-right: 1vh;
}

.social-name {
	font-size: 4vh;
	line-height: 4vh;
}

.social-desc {
	font-size: 2vh;
	line-height: 2vh;
}

.social-desc::before {
	content: "> ";
}

.ehehe {
	position: fixed;
    bottom: 0;
    right: 0;
    opacity: 0.1;
    height: 28em;
    width: 40em;
    background-color: var(--text-hll);
    mask-image: url(g/rae.png);
    mask-size: cover;
	z-index: -10;
	pointer-events: none;
}

h3 p {display: inline;}

/**********************************************************************************************/

.inline-block {display: inline-block;}

.width-auto {width: auto;}
.width-fit {width: fit-content;}
.width-fill {width: -webkit-fill-available; width: -moz-available; width: fill-available;}
.width-100 {width: 100%;}
.width-50 {width: 50%;}
.width-40 {width: 40%;}
.width-30 {width: 30%;}
.width-20 {width: 20%;}
.width-15 {width: 15%;}

.height-auto {height: auto;}
.height-fit {height: fit-content;}
.height-fill {height: -webkit-fill-available; height: -moz-available; height: fill-available;}
.height-100 {height: 100%;}

.flex-1 {
	display: flex;
    flex: 1;
}

.flex-evenly {
	display: flex;
	justify-content: space-evenly;
}

.flex-center {
	display: flex;
    align-items: center;
}

.flex-row {flex-direction: row;}
.flex-col {flex-direction: column;}

.center-3 {
	left: 50%;
    position: relative;
    transform: translateX(-50%);
}

.centered, .ta-center {text-align: center;}
.ta-left {text-align: left;}
.ta-right {text-align: right;}

.faux-v-center {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.column-embed {
	text-align: center;
}

.column-span-all {
	column-span: all;
}

.fs-12 {
	font-size: 12pt;
}

/**************************************************************************************************/

.zoomable {
	cursor: zoom-in;
}

#zoomable-viewer {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.33);
	backdrop-filter: blur(8px);
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	z-index: 100;
}

#zoomable-viewer #zoomed-image {
	position: relative;
	transform-origin: center center;
}

#zoomable-viewer #zoomed-alt {
	display: block;
	margin-top: 2em;
	padding: 6px;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border-radius: 999px;
}