@charset "UTF-8";

:root {
	font-size: 14pt;
	
	--avatar-size: 6em;
	--avatar-max-size: 300px;
	--li-gap: 0.5em;
	--p-gap: 1em;
	
	--main-font: "Noto Sans", Roboto, "Noto Sans Symbols", "Noto Sans Symbols 2", "Noto Sans Symbols2", sans-serif;
	--code-font: "Noto Sans Mono", "Noto Mono", monospace;
	
	--link: mediumblue;
	--visited: var(--link);
	--active: var(--link);
	
	--accent: var(--brand-purple);
}

body {
	padding: 0;
	font-family: var(--main-font);
	
	-webkit-hyphens: auto;
	hyphens: auto;
}

main {
	margin: 0 auto;
	padding: 0.5em 0.4em;
	max-width: 1800px;
}

.main-container {
	width: 90%;
	margin: 0 auto;
	
	display: grid;
	grid-template-columns: 20% 20% 25% 35%;
	grid-template-areas: "heading heading heading heading"
						 "intro   intro   links   links"
						 "about   about   about   gotd"
						 "sponsor sponsor sponsor sponsor"
						 "social  social  social  social"
						 "footer  footer  footer  footer";
}

h1 {
	text-align: center;
	font-size: 2.5em;
	margin-bottom: 0.5em;
	
	grid-area: heading;
}

h2 {
	font-size: 1.6em;
	margin-bottom: 0.2em;
}

section, .pseudo-section {
	padding: 0.25em 1em;
	margin-bottom: var(--p-gap);
}

p:not(:last-child) {
	margin-bottom: var(--p-gap);
}

#about p:first-of-type {
	font-style: italic;
}

.text-heavy p {
	text-align: justify;
	line-height: 1.4;
}

ul {
	list-style-position: inside;
	padding: 0 1em;
}

ul:not(:last-child) {
	margin-bottom: var(--p-gap);
}

ul ul {
	margin-top: var(--li-gap);
	margin-bottom: 0;
	padding-right: 0;
}

li, li ul {
	break-inside: avoid;
}

li {
	line-height: 1.2;
}

li:not(:last-child) {
	margin-bottom: var(--li-gap);
}

#links > ul {
	column-count: 2;
}

.avatar {
	width: var(--avatar-size);
	height: var(--avatar-size);
	max-width: var(--avatar-max-size);
	max-height: var(--avatar-max-size);
	
	float: left;
	
	color: var(--bg);
	background-color: var(--text);
	border: 0.1em solid var(--text);
	border-radius: 20% 0;
	margin: 0.34em 0.75em 0 0.05em;
}

.aligner {
	display: flex;
	
	align-items: center;
	justify-content: center;
}

.tech-mark {
	-webkit-hyphens: manual;
	hyphens: manual;
	text-shadow: 0 0 0.1em var(--outline), 0 0 0.5em var(--shadow);
}

.html5 {
	--shadow: #F16529;
	--outline: #E44D26;
}

.css3 {
	--shadow: #2965F1;
	--outline: #264DE4;
}

.star-switch {
	cursor: pointer;
	transition: color 0.15s ease 0s;
	white-space: nowrap;
	
	&::before, &::after {
		content: "★";
		display: inline-block;
		color: var(--accent);
		text-shadow: none;
	}
	
	[data-star-spin="true"] & {
		color: var(--accent);
		
		&::before, &::after {
			animation: spinny 1s linear 0s infinite normal backwards running;
		}
	}
}

@keyframes spinny {
	from {
		transform: rotateY(0deg);
	}
	
	to {
		transform: rotateY(360deg);
	}
}

button {
	font-family: inherit;
	font-size: 0.9em;
	color: var(--text);
	background-color: var(--bg);
	border: 2px solid var(--text);
	border-radius: 0.25em;
	padding: 0.2em 0.4em;
	
	&:hover {
		border-color: var(--accent);
	}
	
	&:active {
		border-color: var(--brand-red);
	}
}

.e-status {
	font-family: var(--code-font);
	font-size: 0.9em;
	
	& .red {
		color: red;
	}

	& .blue {
		color: blue;
	}

	& .white {
		color: white;
	}
}

/* ========== Grid Layout ========== */

#intro {
	grid-area: intro;
}

#links {
	grid-area: links;
}

#social {
	grid-area: social;
}

#about {
	grid-area: about;
}

#gotd {
	grid-area: gotd;
}

#sponsor {
	grid-area: sponsor;
}

/* ========== Fake Banner Ad ============ */

.fake-banner-ad {
	aspect-ratio: 6 / 1;
	max-width: 90%;
	max-height: 5em;
	margin: 0 auto 0.2em;
	background-color: var(--brand-green);
	background-image: linear-gradient(176deg, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
	overflow: hidden;
	position: relative;
	container-type: size;
	font-family: "Comic Sans MS", "Comic Neue", cursive, fantasy;
	color: var(--main-light);
}

.fake-banner-ad > * {
	position: absolute;
}

.fishy {
	top: -15%;
	left: 5%;
	height: 130%;
	transform: rotate(-15deg);
	filter: drop-shadow(0px 0px 1px black);
}

.tagline {
	font-size: 30cqh;
	text-shadow: 1px 1px 0px var(--brand-purple);
	
	&:nth-of-type(1) {
		top: 3%;
		left: 40%;
	}
	
	&:nth-of-type(2) {
		bottom: 20%;
		right: 9%;
	}
}

#sponsor figcaption {
	text-align: center;
	font-size: 0.5em;
}

/* ========== Footer ============ */

footer {
	font-size: 0.8em;
	padding-top: 0.75em;
	margin: 1em 0 0.8em;
	
	border: 0px solid var(--text);
	border-top-width: 0.2em;
	border-image: var(--queer-pattern) 100% 1 0 stretch;
	
	grid-area: footer;
	
	--queer-pattern: linear-gradient(90deg, var(--1) 0%, var(--1) 10%, var(--2) 30%, var(--3) 50%, var(--4) 70%, var(--5) 90%, var(--5) 100%);
	--1: var(--aro-green);
	--2: var(--aro-light-green);
	--3: var(--aro-white);
	--4: var(--aro-grey);
	--5: var(--aro-black);
	
	--pad: 0.5em;
	
	& p {
		padding: 0 var(--pad);
		line-height: 1.3;
		
		--p-gap: 0.5em;
		
		&.credit::before {
			content: "❖ ";
			color: var(--brand-green);
		}
	}
	
	& hr {
		width: calc(100% - 2 * var(--pad) - 0.2em);
		height: 0.1em;
		background: linear-gradient(90deg, transparent 0%, var(--text) 25%, var(--text) 75%, transparent 100%);
		margin: 1em auto;
	}
}

/* ========== Random Quote ========== */

figure.quote {
	margin: 0 auto;
	max-width: calc(var(--base-max-width) - (var(--pad) * 6));
	font-size: 1.1em;
	
	--base-max-width: 80%;
	
	& blockquote {
		text-align: center;
		font-style: italic;
		font-size: 1.1em;
		white-space: pre-wrap;
		
		& p {
			quotes: "»" "«" "›" "‹";
			
			&::before {
				content: open-quote;
			}
			
			&::after {
				content: close-quote;
			}
			
			&:lang(ja) {
				quotes: "「" "」" "『" "』";
				font-style: normal;
			}
			
			& :is(i:not([class]), cite) {
				font-style: normal;
			}
			
			& em:not([class]) {
				text-decoration: underline;
				font-style: inherit;
			}
			
			& a {
				color: inherit !important;
				hyphens: manual;
			}
			
			&:has(.image-macro-caption) {
				quotes: none;
			}
			
			&:has(.comic-caption) {
				quotes: "“" "”" "‘" "’";
				font-style: normal;
				font-family: Caveat, "Comic Sans MS", "Comic Neue", fantasy, cursive;
				font-size: 1.2em;
			}
			
			& .good-shit {
				& i:not([class]) {
					font-style: normal;
				}
				
				& em:not([class]) {
					text-decoration: none;
					font-style: normal;
				}
				
				& a:link {
					text-decoration: underline;
				}
			}
		}
	}
	
	& figcaption {
		display: none;
		text-align: start;
		margin-block-start: 0.75em;
		padding-inline-start: 50%;
		
		&::before {
			content: "—\00a0";
		}
		
		&[data-visible="true"] {
			display: block;
		}
		
		&:has(.unknown) {
			color: #808080;
		}
	}
}

.emoji, .emoticon, .tone-indicator, .hashtag {
	hyphens: manual;
}

.emoji {
	font-family: emoji;
}

.emoticon, .tone-indicator {
	white-space: pre;
}

.spaced {
	letter-spacing: 0.4em;
}

.image-macro-caption {
	text-transform: uppercase;
	font-family: Impact, Antonio, Anton, Haettenschweiler, sans-serif;
	font-style: normal;
	font-size: 3em;
	color: white;
	/*text-shadow: 0.05em 0px 0px black, -0.05em 0px 0px black, 0px 0.05em 0px black, 0px -0.05em 0px black, 0.05em 0.05em 0px black, 0.05em -0.05em 0px black, -0.05em 0.05em 0px black, -0.05em -0.05em 0px black;*/
	-webkit-text-stroke: 0.05em black;
	text-stroke: 0.05em black;
}

.blue-pen {
	color: #3C425D;
}

.black-pen {
	color: #5A5252;
}

.wplace-red {
	color: #ed1b24;
}

.wplace-dark-teal {
	color: #0c816e;
}

.yaoi, .yuri {
	background-clip: text;
	color: transparent;
	
	@media (prefers-color-scheme: light) {
		--gay-white: #d2d2d2;
		--lesbian-white: #d2d2d2;
		--gay-dark-deal: #1a7960;
		--gay-teal: #8aceac;
	}
}

.yaoi {
	background-image: linear-gradient(to bottom, var(--gay-dark-teal), var(--gay-dark-teal), var(--gay-teal), var(--gay-white), var(--gay-blue), var(--gay-dark-blue), var(--gay-dark-blue));
}

.yuri {
	background-image: linear-gradient(to bottom, var(--lesbian-dark-pink), var(--lesbian-dark-pink), var(--lesbian-pink), var(--lesbian-white), var(--lesbian-orange), var(--lesbian-dark-orange), var(--lesbian-dark-orange));
}

/* ========== “Powered by” Badge ========== */

.powered-by {
	display: inline-grid;
	grid-template-areas: "power_logo power_text_top"
						 "power_logo power_text_bottom";
	grid-template-columns: max-content 1fr;
	background-color: white;
	background-image: linear-gradient(to bottom, white 0%, #ECECEC 100%);
	border: 0.1em solid #8A8A8A;
	border-radius: 0.3em;
	padding: 0.1em 0.5em 0.1em 0.2em;
}

.power-logo {
	grid-area: power_logo;
	font-family: emoji;
	font-size: 1.75em;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.1em;
	
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-image: conic-gradient(#FEA95F, #FEBC58, #FDC057, #FDBF57, #FBB36A, #FA8658, #FA5E54, #DE5468, #BF668F, #A7538F, #9E5497, #AA66A0, #B95687, #DA5770, #FE5958, #FE8B68, #FEA95F);
}

.power-text {
	font-family: Arial, sans-serif;
	font-size: 0.65em;
	display: flex;
	white-space: nowrap;
	padding-left: 0.3em;
	color: black;
	
	&.top {
		grid-area: power_text_top;
		align-items: end;
	}
	
	&.bottom {
		grid-area: power_text_bottom;
		align-items: start;
		font-weight: bold;
	}
}

[draggable="true"] {
	user-select: none;
}

/* ========== Social Media Links ========== */

#social > ul {
	color: var(--accent);
	columns: 4;
	padding: 0 3em;
	list-style-type: none;
}

#social ul ul ::marker {
	color: var(--text);
}

.alt-accounts li {
	list-style-type: "➥ ";
}

#social a {
	color: inherit;
}

#social li:has(> a > s) {
	filter: grayscale(100%);
	opacity: 0.8;
}

#social li:has(> a > s)::after {
	content: "🪦";
	font-family: emoji;
	font-size: 0.75em;
}

#social li:has(> a > s.binned)::after {
	content: "🗑️";
}

.icon {
	width: 1em;
	height: 1em;
	position: relative;
	top: 0.13em;
	
	&.too-light {
		filter: invert(100%);
	}
}

#social .icon {
	user-select: none;
}

.circular {
	border-radius: 100%;
}

.rounded {
	border-radius: 0.15em;
}

.pop-up {
	cursor: pointer;
}

.pop-up:hover {
	text-decoration: underline;
}

/* ========== Flag Header ========== */

header {
	font-size: 4em;
	height: 1em;
}

header span {
	display: block;
}

.personal-flag {
	width: 100%;
	height: 100%;
	background-color: var(--brand-purple);
	
	--crescent-size: 0.6666666666em;
	--crescent-void-size: 0.6em;
	
	& .ellipse {
		border-radius: 100%;
	}
	
	& .crescent {
		background-color: black;
		width: var(--crescent-size);
		height: var(--crescent-size);
		
		position: relative;
	}
	
	& .crescent-void {
		background-color: var(--brand-yellow);
		height: var(--crescent-void-size);
		width: var(--crescent-void-size);
		
		position: absolute;
		top: 0;
		left: 0.2em;
		bottom: 0;
		margin: auto;
	}
	
	& .stripe {
		background-color: var(--brand-yellow);
		width: 100%;
		height: 0.8em;
	}
}

/* ========== Gender of the Day ========== */

#gotd {
	text-align: center;
}

#gender-container {
	padding: 0.5em 0 0;
}

#gender-box {
	width: var(--box-size);
	height: var(--box-size);
	border: 0.2em var(--accent) solid;
	border-radius: 20%;
	overflow: hidden;
	
	--box-size: 6.5em;
}

#gender-output {
	font-size: calc(var(--box-size) * 0.6);
}

noscript {
	color: var(--brand-red);
	font-family: var(--main-font);
}

/* ========== Font Stuff ========== */

@font-face {
	font-family: "Noto Emoji";
	src: local("Noto Emoji"), local("Noto Emoji Regular");
}

@font-face {
	font-family: Unifont;
	src: local(Unifont);
}

@font-face {
	font-family: "Unifont Upper";
	src: local("Unifont Upper");
}

/* ========= Dark Mode ======== */

@media (prefers-color-scheme: dark) {
	:root {
		--link: skyblue;
		--accent: var(--brand-yellow);
	}
	
	footer {
		--1: var(--trans-blue);
		--2: var(--trans-pink);
		--3: var(--trans-white);
		--4: var(--trans-pink);
		--5: var(--trans-blue);
	}
	
	.icon.too-light {
		filter: none;
	}
	
	.blue-pen {
		color: #7E8ABF;
	}

	.black-pen {
		color: #A89E9E;
	}
}

/* ========== Responsive ========== */

@media (max-width: 1200px) {
	#social > ul {
		columns: 3;
		padding: 0 2.5em;
	}
	
	.main-container {
		width: 95%;
		grid-template-columns: 20% 20% 25% 35%;
	}
}

@media (max-width: 1000px) {
	#social > ul {
		columns: 2;
		padding: 0 2em;
	}
	
	#links > ul {
		column-count: 1;
	}
	
	.main-container {
		width: 97.5%;
		grid-template-columns: 25% 25% 15% 35%;
	}
	
	section, .pseudo-section {
		padding: 0.25em 0.75em;
	}
}

@media (max-width: 800px) {
	#social > ul {
		columns: 1;
		padding: 0 1em;
	}
	
	.main-container {
		width: 100%;
		grid-template-columns: auto;
		grid-template-areas: "heading"
							 "intro"
							 "about"
							 "links"
							 "gotd"
							 "sponsor"
							 "social"
							 "footer";
	}
	
	#gotd {
		text-align: left;
		justify-content: flex-start;
	}
	
	#gender-container {
		justify-content: flex-start;
		padding-left: 3.1em;
	}
	
	section, .pseudo-section {
		padding: 0.25em 0.5em;
	}
	
	figure.quote {
		--base-max-width: 85%;
	}
}

@media (max-width: 600px) {
	:root {
		font-size: 13pt;
	}
	
	figure.quote {
		--base-max-width: 90%;
	}
}

@media (max-width: 500px) {
	:root {
		--avatar-size: 5em;
	}
}

@media (max-width: 450px) {
	:root {
		font-size: 12.5pt;
	}
	
	figure.quote {
		--base-max-width: 95%;
	}
}