:root {
	--col-background: #270000d8;
	--col-main: wheat;
	--col-main-a075: #f5deb3bf;
	--col-highlight: white;
	--col-highlight-dark: #00000040;

	--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-long:   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  */
	font-family: "PublicPixel";
	src: url("/_fonts/PublicPixel.ttf") format('truetype');
}

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

@font-face {
	/* DotGothic16 font by Fontworks Inc. - https://github.com/fontworks-fonts/DotGothic16 | https://fonts.google.com/specimen/DotGothic16  */
	font-family: "DotGothic16";
	src: url("/_fonts/DotGothic16-Regular.ttf") format('truetype');
}

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

	font-family: Monogram, 'Courier New', Courier, monospace;
	font-size: 25px;
	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);
	}
}

*,
*::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 6s 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;
		padding: 1em;
	}
}

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,
ul,
ol {
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
}

ul,
ol {
	padding-inline-start: 1.5em;
}

ul ul {
	margin-block-start: 0;
	margin-block-end: 0;
}

li {
	padding: 0.25em 0;
}

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%;
}

.emoji {
	font-size: 67%;
}

summary {
	margin: 0.33em 0;
	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 {
	--size: 10em;

	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-long);
}
.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);
}
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);
}

/* 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-long);
}
a:hover,
.copy-button:hover {
	color: var(--col-highlight);
}

/* Outer links */
a.out::before,
a.contact-card .card-label::before {
	font-family: PublicPixel, 'Courier New', Courier, monospace;
	font-size: 33%;
	content: '🔗 ';
	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: pointer;
}
.copy-button::before,
.copy-button .card-label::before {
	font-family: PublicPixel, 'Courier New', Courier, monospace;
	font-size: 33%;
	content: '❏ ';
	opacity: 75%;
}
.contact-card.copy-button::before {
	display: none;
}

/* "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;
}
.nav-item a {
	margin: 0.2em;
	padding: 0.2em;
}
.nav-item a::before {
	display: none;
}
.has-dropdown a {
	margin-left: 0;
}
.has-dropdown::before {
	padding: 0 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 dotted var(--col-main);

	list-style-type: none;

	opacity: 0;
	visibility: hidden;
	
	transition: opacity var(--transition-speed-fast) ease-out;
}
.has-dropdown:focus-within .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);	
}

/* --- */

/* 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-long);
}
.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 {
	margin: 0.25em;

	text-align: center;
}

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

main.bone-zone {
	display: flex;
	justify-content: center;
	align-items: center;
	
	height: 100vh;
	margin: 0;

	background: none;
	border: none;
}

.bone-zone .message {
	text-align: center;

	padding: 0.75em 1.0em;
	
	background-color: var(--col-background);
	
	border: 1px solid;
	border-color: var(--col-main);
	border-radius: var(--corner-radius);
}

.bone-zone h1 {
	text-transform: uppercase;
	margin-block-start: 0;
}

#shmexy-bones {
	display: flex;
	justify-content: center;
}

#shmexy-bones .img-container {
	--size: 16em;
}

.bone-zone .toggles-container {
	margin: 0.5em 0;
}

.bone-zone .button-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	
	height: 3.5em;
}
.bone-zone a {
	padding: 0.67em 1.33em;
	
	background-color: var(--col-background);
	
	font-family: PublicPixel, 'Courier New', Courier, monospace;
	text-transform: uppercase;
	text-decoration: none;

	box-shadow: 0 0 0.5em var(--col-main);
	background-color: var(--col-highlight-dark);
	border: 1px solid var(--col-main);
	border-radius: var(--corner-radius);
	
	transition: var(--transition-speed-medium);
}
.bone-zone a:hover {
	font-size: 1.05em;

	box-shadow: 0 0 0.75em var(--col-highlight);
	border: 1px solid var(--col-highlight);
}

#peach {
	padding: 0.25em;
}

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

/* Hit counter & Feed button container */
.home-bar {
	display: flex;
	align-items: center;
	float: right;
}
@media (orientation: portrait) {
	.home-bar {
		display: grid;
		grid-template-columns: 3fr 1fr;
		gap: 1.5em;
		justify-content: center;
		justify-items: center;
		float: unset;
	}
}

/* Hits counter*/
#counter-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;

	margin: 0.25em 0;
	padding: 0.25em;

	background: black;

	border: 1px solid var(--col-main);
	border-radius: var(--corner-radius);
}
#counter-wrapper span {
	padding-left: 0.5em;
}
#counter {
	transform: scale(0.75);
	width: calc(140px * 0.75); 
	height: calc(24px * 0.75);

	border: none; 
	overflow: hidden;
}

/* Feed button */
.rss {
	height: 1.33em;
	margin-left: 1em;
	padding: 0.1em;

	border: 1px solid transparent;

	transition: var(--transition-speed-medium);
}
.rss img {
	height: 100%;
	width: auto;
}
.rss:hover {
	box-shadow: 0 0 0.25em var(--col-highlight);
	background-color: var(--col-highlight-dark);
	border-color: var(--col-main-a075);

	transform: scale(1.1);
}
html[lang="en"] .rss.ru {
	display: none;
}
html[lang="ru"] .rss.en {
	display: none;
}
@media (orientation: portrait) {
	.rss {
		margin-left: 0;
	}
}

#welcome-pic {
	--size: 10em;
	margin: 0.5em;
}

.home-split {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;

	column-rule: 1px solid var(--col-main);
}
@media (orientation: portrait) {
	.home-split {
		flex-wrap: wrap;
	}
}

.home-split h2 {
	margin-block-start: 0.33em;
}

.news-feed {
	width: 50%;
	margin-right: 1em;
}
@media (orientation: portrait) {
	.news-feed {
		width: 100%;
		margin-right: 0;
	}
}

.post {
	display: grid;
	grid-template-columns: 1fr 5fr;
	gap: 1em;
	align-items: center;

	padding: 0.25em;
	margin: 0.5em 0;

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

	text-decoration: none;
}
a.post {
	border-style: solid;
}
a.post:hover {
	background-color: var(--col-highlight-dark);
	border: 1px solid var(--col-highlight);
	box-shadow: 0 0 0.33em var(--col-highlight);
}

.post .img-container {
	--size: 4em;
}
.post .img-container img {
	border: 1px dotted var(--col-main-a075);
	border-radius: var(--corner-radius);
}


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

#split-line {
	display: none;

	margin: 2em 0 1em;
}
@media (orientation: portrait) {
	#split-line {
		display: block;
	}
}

.guestbook-wrapper {
	width: 50%;
}
@media (orientation: portrait) {
	.guestbook-wrapper {
		width: 100%;
	}
}
#guestbook {
	width: 100%;
	height: 42em;

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

	transform: scale(min(calc(100vw / 768px), 1.0));
}
@media (orientation: portrait) {
	#guestbook {
		transform: scale(1.0);
	}
}

/* ---======$$ ABOUT $$======--- */

#page-intro {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
}
@media (orientation: portrait) {
	#page-intro {
		flex-direction: column;
	}
}

#about-portrait {
	--size: 8em;
	margin: 1em;
}
#about-portrait img {
	box-shadow: 0 0 0.75em var(--col-main);
	border: 1px solid var(--col-main);
	border-radius: 50%;
}

/* Is that a JoJo reference? */
.menacing {
	--speed: 10s;

	font-family: DotGothic16, 'Courier New', Courier, monospace;

	display: flex;
	justify-content: center;
	gap: 6em;
	
	overflow: hidden;
	white-space: nowrap;

	font-weight: bold;
	color: blueviolet;

	mask-image: linear-gradient(
		to right,
		hsl(0 0% 0% / 0.0),
		hsl(0 0% 0% / 1.0) 10%,
		hsl(0 0% 0% / 1.0) 90%,
		hsl(0 0% 0% / 0.0)
	);
}
.menacing span {
	display: inline-block;
	min-width: 6em;
	text-align: center;
	animation: marquee var(--speed) linear infinite;
}
@keyframes marquee {
  0%   { transform: translateX(0);  }
  100% { transform: translateX(calc(-1.0 * (6em + 6em))); }
}

/* ---======$$ ART $$======--- */

/* GALLERY */

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
	gap: 1.5em;

	align-items: center;
	text-align: center;

	margin: 1em 0;
}

.gallery-item {
	display: flex;
	flex-direction: column;
	align-items: center;

	margin: 0.33em 0;
	padding: 1em;

	border: 1px dashed var(--col-main-a075);
	border-radius: var(--corner-radius-big);
}
.gallery-item .img-container {
	--size: 12em;

	filter: drop-shadow(0 0 0.25em var(--col-main));
	
	transition: var(--transition-speed-medium);
}
.gallery-item .img-container:hover {
	filter: drop-shadow(0 0 0.25em var(--col-highlight));

	transform: scale(1.03);
}
.gallery-item .img-container img {
	border-radius: var(--corner-radius);
}
.gallery-item a,
.gallery-item .no-link {
	display: flex;
	flex-direction: column;
	align-items: center;

	text-underline-offset: 0.33em;
	padding-bottom: 0.33em;
	margin-bottom: 0.25em;
}
.gallery-item a:last-child {
	display: inline;
}

.pics-number::before {
	font-family: PublicPixel, 'Courier New', Courier, monospace;
	font-size: 50%;
	content: '⁅☁⁆　 　';
	letter-spacing: -0.7em;
}

/* --- */

.image-panel {
	display: grid;
	grid-template-columns: auto 65%;
	gap: 0.5em;
	align-items: center;
}
@media (orientation: portrait) {
	.image-panel {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
}

/* PICTURE VIEWER */

.picture-viewer {
	display: flex;
	flex-direction: column;

	background-color: var(--col-background);
	border: 1px dotted var(--col-main-a075);
	padding: 0.5em;
	border-radius: var(--corner-radius);
}
.viewer-zone {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.thumbnails-bar {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

/* Navigation buttons */
.viewer-nav {
	width: 3em;
	height: 6em;
	
	margin: 0.5em;

	border: 1px solid transparent;
	border-radius: var(--corner-radius);
	opacity: 0.5;

	transition: var(--transition-speed-medium);
}
@media (orientation: portrait) {
	.viewer-nav {
		width: 2em;
	}
}
.viewer-nav:hover {
	background-color: var(--col-highlight-dark);
	border-color: var(--col-main);
	opacity: 1.0;
	cursor: pointer;
}
.viewer-nav.prev::before {
	position: relative;
	left: 33%;
	top: 25%;
	font-size: 3em;
	content: '◀';
}
.viewer-nav.next::before {
	position: relative;
	left: 33%;
	top: 25%;
	font-size: 3em;
	content: '▶';
}
.thumbnails-bar .viewer-nav {
	font-size: 50%;
}

/* The current image */
.viewer-zone .img-container.current {
	--size: calc(1vmax / 1vmin * 15vw);

	border: 1px dotted transparent;
	
	transition: var(--transition-speed-medium);
}
@media (orientation: portrait) {
	.viewer-zone .img-container.current {
		--size: 50vw;
	}
}
.viewer-zone .img-container.current:hover {
	background-color: var(--col-highlight-dark);
	border-color: var(--col-main-a075);
	cursor: pointer;
}

/* Thumbnains */
.thumbnails-bar .img-container {
	--size: 8vw;

	padding: 0.25em;
	margin: 0.25em;

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

	transition: var(--transition-speed-fast);
}
@media (orientation: portrait) {
	.thumbnails-bar .img-container {
		--size: 12vw;
	}
}
.thumbnails-bar .img-container.active {
	background-color: var(--col-highlight-dark);
	border: 1px solid var(--col-main);
	box-shadow: 0 0 0.5em var(--col-main);
}
.thumbnails-bar .img-container:hover {
	background-color: var(--col-highlight-dark);
	border-color: var(--col-highlight);
	cursor: pointer;
}
.thumbnails-bar .img-container.active:hover {
	box-shadow: 0 0 0.5em var(--col-highlight);
}

/* --- */

.image-modal {
	display: flex;
	
	position: fixed;
	inset: 0;
	z-index: 1000;

	align-items: center;
	justify-content: center;

	background: black;
	
	visibility: hidden;
	opacity: 0;
	transition: var(--transition-speed-fast);
}
.image-modal.active {
	opacity: 1;
	visibility: visible;
}

.modal-content {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	overflow: hidden;
}
#modal-image {
	display: block;
	object-fit: contain;
	max-width: 90vw;
	max-height: 90vh;
}

.modal-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	
	position: absolute;
	top: 50%;
	transform: translateY(-50%);

	font-size: 200%;

	width: 1.5em;
	height: 1.5em;
	
	background-color: rgba(255,255,255,0.15);
	border-radius: 50%;
	color: white;
	
	cursor: pointer;
	user-select: none;

	transition: var(--transition-speed-fast);
}
.modal-nav:hover {
	background-color: rgba(255,255,255,0.3);
}
.modal-prev { left: 2%; }
.modal-next { right: 2%; }

.modal-close {
	display: flex;
	justify-content: center;
	align-items: center;

	font-size: 150%;
	font-family: PublicPixel, 'Courier New', Courier, monospace;

	position: absolute;
	top: 0.5em;
	right: 0.5em;
	z-index: 10;

	padding: 0.15em 0.15em 0.25em 0.25em;

	background-color: var(--col-red);
	color: white;
	border-radius: var(--corner-radius);
	opacity: 0.5;
	
	cursor: pointer;

	transition: var(--transition-speed-fast);
}
.modal-close:hover {
	opacity: 1;
}

/* ---======$$ STORIES $$======--- */

/* Stories table layout */
.tab-series {
	width: 15%;
}
.tab-story {
	width: 35%;
}
.tab-date {
	width: 15%;
}
.tab-lang {
	width: 10%;
}
.tab-rating {
	width: 10%;
}
.tab-links {
	width: 15%;
}

/* ---======$$ MY LINKS/CONTACT CARDS $$======--- */

.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
	gap: 1.5em;

	margin: 1em 0;
}

.contact-card {
	margin: 0.33em 0;
	padding: 1.0em;

	text-align: center;
	text-decoration: none;

	background-color: var(--col-background);
	box-shadow: 0 0 0.5em var(--col-main);
	border: 1px solid var(--col-main);
	border-radius: var(--corner-radius-big);

	transition: var(--transition-speed-fast);
}
.contact-card:hover {
	transform: scale(1.05);
	
	background-color: var(--col-highlight-dark);
	box-shadow: 0 0 0.75em var(--col-highlight);
	border: 1px solid var(--col-highlight);
}

img.card-icon {
	height: 3em;
	width: auto;

	margin: 0 auto;
	padding: 0.25em;
}
img.dark {
	background: white;
	border-radius: var(--corner-radius);
}

.card-label {
	margin: 0.25em;

	font-weight: bold;
	letter-spacing: 0.075em;
}

/* --======$$ BUTTONS WALL $$======-- */

.buttons-grid {
	--column-width: 1em;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(88px + var(--column-width)), 1fr));
	justify-items: center;
	align-items: start;

	margin: 1em 0 2.5em;
}
.buttons-grid.no-button {
	--column-width: 4em;
}
@media (orientation: portrait) {
	.buttons-grid.no-button {
		--column-width: 2em;
	}
}

.site-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;

	a {
		line-height: 0;
	
		margin: 0.33em 0;
		padding: 0.1em;
		background-color: black;

		box-shadow: 0 0 0.33em var(--col-main);
		border: 1px solid var(--col-main);
		border-radius: var(--corner-radius);

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

		&:hover {
			transform: scale(1.2);

			box-shadow: 0 0 0.5em var(--col-highlight);
			border: 1px solid var(--col-highlight);
		}
	}

	div {
		line-height: 1.1;
		font-size: 0.8rem;
	}
	
	.no-button {
		line-height: 0.8;
		padding: 0.5em;
		text-decoration: none;
		font-size: 0.8rem;

		&:hover {
			transform: scale(1.1);
		}
	}
}

.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-fast);

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

		transform: scale(1.1);
	}

	&::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);
		}
	}
}