:root {
	--col-background: #270000d8;
	--col-main: wheat;
	--col-main-a075: #f5deb3bf;
	--col-highlight: hsl(37, 80%, 95%);
	--col-highlight-dark: #00000060;

	--col-red: #ff3f3f;
	--col-orange: #ff7e3d;
	--col-yellow: #fff53d;
	--col-green: #8eff3d;

	--underline-thickness: 0.05em;
	--underline-offset: 0.2em;

	--transition-speed-fast:   0.25s;
	--transition-speed-medium: 0.33s;
	--transition-speed-slow:   0.50s;

	--corner-radius: 0.25em;
	--corner-radius-big: 0.33em;
}

@font-face {
	/* Public Pixel font by GGBotNet - https://ggbot.itch.io/public-pixel-font
	Converted to WOFF2 */
	font-family: "PublicPixel";
	src: url("/_fonts/PublicPixel.woff2") format('woff2');
}

@font-face {
	/* Monogram font by Datagoblin - https://datagoblin.itch.io/monogram
	Converted to WOFF2 */
	font-family: "Monogram";
	src: url("/_fonts/monogram-extended.woff2") format('woff2');
}

@font-face {
	/* DotGothic16 font by Fontworks Inc. - https://github.com/fontworks-fonts/DotGothic16
	Alt. link - https://fonts.google.com/specimen/DotGothic16
	Converted to WOFF2 */
	font-family: "DotGothic16";
	font-display: swap;
	src: url("/_fonts/DotGothic16-Regular.woff2") format('woff2');
}

html {
	--screen-size: calc(sqrt(100vh) * sqrt(100vw) / 1440px);
	--font-size-const: 1.0;
	--font-size: calc((25px + 5px * pow(round(to-zero, var(--screen-size) / 0.85px), 2)) * var(--font-size-const));

	font-family: Monogram, 'Courier New', Courier, monospace;
	font-size: var(--font-size);
	color: var(--col-main);
	
	background-color: #300000;
	
	text-shadow: 0 0 0.5em black;

	scroll-behavior: smooth;
	box-sizing: border-box;
}
@media (orientation: portrait) {
	html {
		--font-size: calc((4vmin + 2px) * var(--font-size-const));
	}
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	padding: 0;
}

/* BACKGROUND */

/* Pseudo-elements defaults */
html::before,
html::after,
body::before {
	content: "";
	position: fixed;
	inset: 0;
}

/* Base pattern layer */
html::before {
	z-index: -3;

	background: url("/_img/pattern.png") repeat;
	background-size: 25vw;
}

/* Animated flickering layer */
html::after {
	z-index: -2;

	background: url("/_img/pattern_mirrored.png") repeat;
	background-size: 25vw;

	animation: Bkg 5s infinite linear;
}
@keyframes Bkg {
	0%, 100% { opacity: 0.0; }
	25%, 75% { opacity: 0.5; }
	50%      { opacity: 1.0; }
}

/* Scaling in portrait */
@media (orientation: portrait) {
	html::before,
	html::after {
		background-size: 50vh;
	}
}

/* Gradient at the top */
body::before {
	--col-grad-inner: #360000AB;
	--col-grad-outer: #300000D4;

	z-index: -1;
	
	background: radial-gradient(circle, var(--col-grad-inner), var(--col-grad-outer));
}

/* ---====== GENERAL ======--- */

main {
	margin: calc(1vmax / 1vmin * 4vw);
	margin-top: 1em;
	margin-bottom: 0;
	padding: 1em;
	
	background-color: var(--col-background);

	border: 1px solid;
	border-color: var(--col-main);
	border-radius: var(--corner-radius);
}
@media (orientation: portrait) {
	main {
		margin: 0.5em;
		margin-bottom: 0;
	}
}

h1 {
	margin-block-start: 0.5em;
	margin-block-end: 0.25em;
	padding-left: 2.5%;
}
h1:first-of-type {
	margin-block-start: 0.25em;
}

h2,
h3 {
	margin-block-start: 0.67em;
	margin-block-end: 0.25em;
}

/* Bold font weight letter spacing */
h1,
h2,
h3,
th,
b {
	letter-spacing: 0.075em;
}

p {
	line-height: 1.0;
}

p,
summary {
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
}

ul,
ol {
	padding-inline-start: 1.5em;
	margin-block-start: 0;
	margin-block-end: 0;
}

li {
	line-height: 1.4;
}

u {
	text-decoration: underline;
	text-decoration-color: var(--col-main-a075);
	text-decoration-style: dashed;
	text-decoration-thickness: var(--underline-thickness);
	text-underline-offset: var(--underline-offset);
}

hr {
	height: 1px;
	border: none;
	
	margin: 0.5em 0;
	
	background: linear-gradient(to right, transparent 0%, var(--col-main) 50%, transparent 100%);
}
hr.left {
	background: linear-gradient(to right, transparent 0%, var(--col-main) 3%, transparent 100%);
}
hr.right {
	background: linear-gradient(to left, transparent 0%, var(--col-main) 3%, transparent 100%);
}
hr.ho {
	opacity: 50%;
}

.rat-1,
.rat-2,
.rat-3,
.rat-4 {
	--rating-color: white;
	font-weight: normal;
	letter-spacing: normal;
	text-shadow: 0 0 0.5em var(--rating-color) !important;
	color: var(--rating-color);
}
.rat-1 { --rating-color: var(--col-green); }
.rat-2 { --rating-color: var(--col-yellow); }
.rat-3 { --rating-color: var(--col-orange); }
.rat-4 { --rating-color: var(--col-red); }

.emoji {
	font-size: 67%;
}

summary {
	text-decoration: underline;
	text-decoration-color: var(--col-main-a075);
	text-decoration-style: dotted;
	text-decoration-thickness: var(--underline-thickness);
	text-underline-offset: var(--underline-offset);

	transition: var(--transition-speed-medium);
}
summary:hover {
	color: var(--col-highlight);
	cursor: pointer;
}
summary::marker {
	animation: FloatingTri 4s infinite linear;
}
@keyframes FloatingTri {
	0%, 100% { opacity: 0.5; }
	50%      { opacity: 1.0; }
}

.font-dotgothic,
[lang="ja"] {
	font-family: DotGothic16, 'Courier New', Courier, monospace;
	font-size: 67%;
}

.font-pubpixel {
	font-family: PublicPixel, 'Courier New', Courier, monospace;
	font-size: 50%;
}

/* IMAGE CONTAINERS */

.img-container {
	display: flex;
	justify-content: center;
	align-items: center;

	width: var(--size);
	height: var(--size);
	
	img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}
}

.img-container.land {
	min-width: var(--size);
	height: auto;
}

.img-container.port {
	min-height: var(--size);
	width: auto;
}

/* --- */

/* SFW/NSFW */

/* NSFW blurring */
.nsfw {
	filter: blur(0.5em);
	transition: var(--transition-speed-slow);
}
.nsfw:hover {
	filter: unset;
}
body.nsfw-visible .nsfw {
	filter: unset !important;
}

/* NSFW-only visible */
.nsfw-only {
	display: none;
}
body.nsfw-visible .nsfw-only {
	display: block;
}

/* SFW-only visible */
body.nsfw-visible .sfw-only {
	display: none;
}

/* --- */

/* TABLES */

table {
	margin: 1em 0;
	width: 100%;
	text-align: center;
}
th, td {
	padding: 0.5em;
}
@media (orientation: portrait) {
	table {
		width: 150%;
	}
	.tab-wrapper {
		overflow-x: scroll;
	}
}

/* Borders & Round corners */
table {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--corner-radius);
	overflow: hidden;
}
table, th, td {
	border: 1px solid var(--col-main-a075);
}
th, td {
	border-left: none;
}
tr:first-child th,
tr:first-child td {
	border-top: none;
}
tr:last-child th,
tr:last-child td {
	border-bottom: none;
}
th:first-child,
td:first-child {
	border-left: none;
}
th:last-child,
td:last-child {
	border-right: none;
}

/* Alternating rows coloring */
tr {
	background-color: var(--col-highlight-dark);
}
tr:nth-of-type(2n) {
	background-color: transparent;
}

/* --- */

/* Tooltips */
.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted var(--col-main);
	text-shadow: none;
	cursor: help;
}
.tooltiptext {
	--width: 10em;
	
	font-size: 1rem;
	text-align: center;

	position: absolute;
	bottom: 125%;
	left: 50%;
	z-index: 1;
	
	width: var(--width);

	margin-left: calc(var(--width) / -2);
	padding: 0.2em 0;
	
	background-color: #000000bf;
	color: var(--col-main);
	text-shadow: none;

	border: 1px solid var(--col-main);
	border-radius: var(--corner-radius);
	
	visibility: hidden;
}
.tooltip:hover .tooltiptext {
	visibility: visible;
}
.tooltiptext::after {
	content: "";

	position: absolute;
	top: 100%;
	left: 50%;

	margin-left: -0.25em;
	border-width: 0.25em;
	border-style: solid;
	border-color: var(--col-main) transparent transparent transparent;
}
@media (orientation: portrait) {
	.tooltiptext {
		--width: 6em;
	}
}

/* --- */

.info-panel {
	padding: 1em;
	background-color: var(--col-highlight-dark);
	border: 1px dotted var(--col-main-a075);
	border-radius: var(--corner-radius-big);
}

.info-panel h1:first-child,
.info-panel h2:first-child,
.info-panel h3:first-child {
	margin-block-start: 0;
}

/* LINKS & COPY-BUTTONS */

/* General styling */
a,
.copy-button {
	color: var(--col-main);

	text-decoration-thickness: var(--underline-thickness);
	text-underline-offset: var(--underline-offset);

	transition: var(--transition-speed-slow);
}
a:hover,
.copy-button:hover {
	color: var(--col-highlight);
}

/* Outer links */
a.out::before {
	font-family: PublicPixel, 'Courier New', Courier, monospace;
	font-size: 33%;
	content: '🔗';
	padding-right: 0.33em;
	opacity: 75%;
}

/* Inner (in-page) links */
a.in {
	text-decoration-style: dotted;
}

/* Copy-buttons */
.copy-button {
	text-decoration: underline;
	text-decoration-style: dotted;
}
.copy-button:hover {
	cursor: copy;
}
.copy-button::before {
	font-family: PublicPixel, 'Courier New', Courier, monospace;
	font-size: 33%;
	content: '❏';
	padding-right: 0.33em;
	opacity: 75%;
}

/* "Copied" note */
.copied {
	color: orange;
}
.copied::after {
	font-family: PublicPixel, 'Courier New', Courier, monospace;
	font-size: 33%;
	content: ' [copied]';
}

/* --- */

/* ---======$$ HEADER $$======--- */

#header-include {
	position: sticky;
	top: 0;
	z-index: 100;
}

header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	padding: 0.25em;
	
	background-color: var(--col-background);

	border-bottom: 1px solid var(--col-main);
}

/* Navbar icon */
.navbar-icon {
	height: 1.5em;

	padding: 0.2em;
	margin: 0.2em;
}
@media (orientation: portrait) {
	.navbar-icon {
		height: 2em;
	}
}
.navbar-icon img {
	width: auto;
	height: 100%;
}

/* NAVBAR */

.navbar {
	display: flex;
	align-items: center;
}
.navbar-bar  {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	height: 100%;
	margin: 0;
	padding: 0;

	list-style-type: none;
}

/* Navbar items */
.nav-item {
	margin: 0.25em;
	padding: 0.33em 0;
	line-height: 1.0;
}
.nav-item a {
	margin: 0.25em;
	padding: 0.33em 0.25em;
}
.has-dropdown a {
	margin-left: 0;
}
.has-dropdown::before {
	padding: 0.2em;
	content: '≡';
}

/* Dropdown menues */
.dropdown {
	display: flex;
	flex-direction: column;
	position: absolute;
	z-index: 2;

	margin-top: 0.33em;
	padding: 0.1em;

	background: var(--col-background);

	border: 1px solid var(--col-main-a075);
	border-radius: var(--corner-radius);

	list-style-type: none;

	opacity: 0;
	visibility: hidden;
	
	transition: opacity var(--transition-speed-fast) ease-out;
}

.has-dropdown:hover .dropdown {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/* Dropdown menu items */
.dropdown-item {
	margin: 0.2em;
}
.dropdown-item a {
	padding: 0.2em 0.5em;
	margin: 0;

	text-decoration-color: transparent;
}
.dropdown-item a:hover {
	text-decoration-color: var(--col-main);
}

/* Highlighted items (navbar & dropdown) */
.active-page {
	background-color: var(--col-highlight-dark);
	
	border: 1px dotted var(--col-main);	
	border-radius: var(--corner-radius);
}

/* --- */

/* SWITCH/TOGGLE */

.toggles-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
}
@media (orientation: portrait) {
	.toggles-container {
		flex-direction: column;
	}
}

.toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	
	margin: 0.25em;
}

.toggle-label {
	margin: 0.25em;
}

/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	
	width: 2.3em;
	height: 1.1em;
}

/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.slider {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	background-color: #4A9DC9; /* Toggle OFF background color */

	border-radius: 1em;

	cursor: pointer;
	
	transition: var(--transition-speed-slow);
}
.slider::before {
	content: "";
	position: absolute;
	height: 0.9em;
	width: 0.9em;
	left: 0.1em;
	bottom: 0.1em;
	
	background-color: var(--col-main); /* Slider color */

	border-radius: 50%;

	transition: var(--transition-speed-medium);
}
.slider:hover::before {
	background-color: var(--col-highlight);
}
input:checked + .slider {
	background-color: #CC262E; /* Toggle ON background color */
}
input:checked + .slider::before {
	transform: translateX(1.2em);
}

/* --- */

/* ---======$$ FOOTER $$======--- */

footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	margin: 0.25em;
}

footer div {
	text-align: center;
	margin: 0.25em;
}

/* ---======$$ BONE ZONE ENTRY/404 $$======--- */


/* ---======$$ HOME $$======--- */



.page-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
}
@media (orientation: portrait) {
	.page-split {
		grid-template-columns: 1fr;
		gap: 0;
	}
}


.post {
	--pic-size: 4em;
	display: grid;
	grid-template-columns: var(--pic-size) auto;
	gap: 0.67em;
	align-items: center;

	padding: 0.33em;
	margin: 0.5em 0;

	border: 1px dashed var(--col-main-a075);
	border-radius: var(--corner-radius);

	text-decoration: none;
}
a.post {
	border-style: solid;

	&:hover {
		background-color: var(--col-highlight-dark);
		border: 1px solid var(--col-highlight);
		box-shadow: 0 0 0.33em var(--col-highlight);	
	}
}

.post .pic {
	display: flex;
	justify-content: center;
	align-items: center;

	width: var(--pic-size);
	height: var(--pic-size);

	border: 1px dotted var(--col-main-a075);
	border-radius: var(--corner-radius);

	img {
		object-fit: contain;
		max-width: 100%;
		max-height: 100%;
		border-radius: var(--corner-radius);
	}
}

.post p:first-child {
	margin-block-start: 0;
}

.post .date {
	font-size: 0.8rem;
}

.post .summary {
	font-size: 0.8rem;
	margin-block-end: 0;
}

.split-line {
	display: none;

	margin-top: 1.5em;
}
@media (orientation: portrait) {
	.split-line {
		display: block;
	}
}

.tag-button {
	display: inline-block;
	user-select: none;

	margin: 0.25em;
	padding: 0.25em 0.5em;

	background-color: var(--col-highlight-dark);
	
	border: 1px dashed var(--col-main-a075);
	border-radius: var(--corner-radius);

	transition: var(--transition-speed-medium);

	&:hover {
		cursor: pointer;
		border-color: var(--col-highlight);

		filter: brightness(1.33);
	}

	&::after {
			font-family: PublicPixel;
			font-size: 50%;
			content: '‧';
		}

	&.include {
		box-shadow: 0 0 0.25em var(--col-main);
		border-style: solid;
		border-color: var(--col-main);

		&:hover {
			box-shadow: 0 0 0.25em var(--col-highlight);
		}

		&::after {
			font-family: PublicPixel;
			font-size: 50%;
			content: '✓';
			color: var(--col-green);
		}
	}

	&.exclude {
		border-style: dotted;
		opacity: 75%;

		&::after {
			font-family: PublicPixel;
			font-size: 50%;
			content: '❌';
			color: var(--col-red);
		}
	}
}