/* Fonts */
@font-face { font-family: "Libre Baskerville"; src: url("../fonts/Libre-Baskerville.woff2") format("woff2"); }
@font-face {
	font-family: "Libre Baskerville"; src: url("../fonts/Libre-Baskerville-Italic.woff2") format("woff2");
	font-style: italic; font-feature-settings: "ss01" 1;
}

@font-face { font-family: "Alegreya"; src: url("../fonts/Alegreya.woff2") format("woff2"); }
@font-face {
	font-family: "Alegreya"; src: url("../fonts/Alegreya-Italic.woff2") format("woff2");
	font-style: italic;
}
.alegreya { font: 1.2em/1.5 "Alegreya"; }

@font-face { font-family: "Jost"; src: url("../fonts/Jost.woff2") format("woff2"); }
@font-face {
	font-family: "Jost"; src: url("../fonts/Jost-Italic.woff2") format("woff2");
	font-style: italic; font-feature-settings: "ss01" 1;
}
.jost { font: 1.14em/1.6 "Jost"; }

@font-face { font-family: "Noto Sans Mono"; src: url("../fonts/Noto-Sans-Mono.woff2") format("woff2"); }
.mono { font: 1em/1.6 "Noto Sans Mono"; }
.mono-big { font: 1.06em/1 "Noto Sans Mono"; }

@font-face { font-family: "Noto Serif JP"; src: url("../fonts/Noto-Serif-JP.woff2") format("woff2"); }
:lang(ja) { font: 16px "Noto Serif JP"; }
.jp-big { font: 500 16px "Noto Serif JP"; }
.jp-en { font: 500 1.03em/1.7 "Noto Serif JP"; }
.jp-hw { font: 425 1.03em/1.7 "Noto Serif JP"; font-feature-settings: "hwid" 1; }
.jp-fw { font: 450 1.03em/1.7 "Noto Serif JP"; font-feature-settings: "fwid" 1; }

@font-face { font-family: "EB Garamond Initials 1"; src: url("../fonts/EB-Garamond-Initials_F1.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond Initials 2"; src: url("../fonts/EB-Garamond-Initials_F2.woff2") format("woff2"); }

/* Body */
html {
	box-sizing: border-box;
	--background: #004d00;
	--text: #ebebeb;
	--link: #c2ffff;
	--link-visited: #eeeefc;
}

::selection { background-color: #523db8; }

body {
	min-height: 100vh;
	display: flex; flex-direction: column;
	font: 14px/1.7 "Libre Baskerville", serif;
	color: var(--text);
	background-color: var(--background);
	margin: 0;
}

header {
	max-width: 82vw;
	font: 4.4px/1.2 "Noto Sans Mono", monospace;
	text-align: center;
	color: white; text-shadow: 2px 2px #5c3df5;
	overflow-x: auto; scrollbar-color: green var(--background);
	margin: 10px auto;
}	

nav {
	background-color: green;
	padding: 2px 0;
	overflow-x: auto;
	& ul {
		display: flex;
		min-width: max-content;
		justify-content: space-evenly;
		list-style: none;
		line-height: 1.5;
		gap: 20px;
		padding: 0;
		margin: 0 5vw;
	}
}

.layout { max-width: 82vw; margin: 5px auto; }

.layout-sidebar { display: grid; grid-template-columns: 1fr 29vw; }
.sidebar {
	height: 500px;
	display: grid;
  gap: 20px;
	margin: 15px 20px;
	scrollbar-color: green var(--background);
	& section {
		flex: 1;
		border: 2px solid mediumseagreen; border-radius: 15px;
		padding: 3px 12px 2px 15px;
		overflow: auto; overflow-wrap: normal;
	}
	& ul { padding: 0 30px; margin: 5px 0; }
	& li { margin: 8px 0; }
}

.layout-book {
	display: grid;
	gap: 25px;
	margin: 14px 0 20px;
	& img { max-width: 250px; margin: 10px auto; }
	& section { margin: 0 15px; }
}
.book {
	display: grid; grid-template-columns: 270px 1fr;
	border: 2px solid mediumseagreen; border-radius: 15px;
	padding: 10px;
}

.layout-box {
	display: grid; grid-template: 250px / 1fr 1fr;
	gap: 35px 25px;
	margin: 14px 0 20px;
}
.box {
	height: 250px;
	border: 2px solid mediumseagreen; border-radius: 15px;
	overflow-y: auto; scrollbar-color: green var(--background);
	padding: 2px 20px 5px;
	& h2 { margin-bottom: -2px; }
	& p { margin: 10px 0; }
}

main { margin: 0 20px 15px; }

footer {
	background-color: green;
	text-align: center;
	overflow-x: auto;
	margin-top: auto;
	& p { margin: 3px 5vw; min-width: max-content; }
}

.center { display: flex; justify-content: center; }

/* Elements */
h1, h2, h3, h4 {
	line-height: 1.6;
	font-weight: 600;
	font-feature-settings: "dlig" 1;
}
h1 { font-size: 25px; margin: 10px 0; }
h2 { margin: 8px 0; }
h3 { margin: 6px 0; }
h4 { margin: 4px 0; }

a:link { color: #c2ffff; }
a:visited { color: #eeeefc; }
a:hover { color: white; }
a[href^="http"]:not(:has(img))::after {
	content: " ⭧";
	font-size: 0.7em;
	position: relative;
	top: -0.45em;
}

img { max-width: 100%; }

ul, ol { margin: 8px 11px; }
li { margin: 6px 0; }
::marker { font: 1.06em "Noto Sans Mono"; }

blockquote {
	font: 1.2em/1.5 "Alegreya";
	background-color: black;
	border-radius: 10px;
	padding: 12px 20px 10px;
}

details {
	display: table;
	font: 16px/1.3 "Jost";
	background-color: black;
	border-radius: 10px;
	padding: 7px 20px;
	margin: 5px 0 25px;
	& ::marker { font-size: 0.96em; }
}

table { margin: 5px 0; }
th, td { padding: 2px 8px; }
th {
	text-align: left;
	font-weight: 400;
	background-color: black;
	border-radius: 5px;
}
td { padding-left: 10px; }

hr {
	border: none;
	height: 1.5px; 
	background-color: mediumseagreen;
}

:target { position: relative; display: inline-block; }
:target::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: mediumseagreen;
  animation: underline 3s linear forwards;
}
@keyframes underline {
	0% { left: 0; width: 0; }
	50% { left: 0; width: 100%; }
	100% { left: 100%; width: 0; }
}

.margin-more-right { margin-right: 4px; }

.date {
	display: inline-block;
	font: condensed 1em "Noto Sans Mono", monospace;
	background-color: black;
	border-radius: 5px;
	padding: 0 5px 1.2px;
	margin: 0 4px 1px 0;
}
.date-long {
	font: 16px/1.5 "Jost";
	color: lightgray;
	text-align: center;
	margin: auto 0 20px;
}

.infobox {
	float: right;
	width: 300px;
	font-size: 0.95em;
	background-color: var(--background);
	border: 2px solid mediumseagreen; border-radius: 15px;
	padding: 10px 12px 8px;
	margin: 15px 20px 10px 30px;
}
.media-img {
	width: 250px;
	text-align: center;
	margin: 4px 0;
	& figcaption { font-style: italic; color: lightgray; }
}

.inline { display: inline-block; }

.warning {
	font: 500 20px "Jost";
	color: #ffdb1a;
	margin: 10px 0;
}

/* Text Effects */
b { font-weight: 600; }
strong { font-weight: 700; }
em { font-weight: 600; }

.small { font: 350 14px/1.5 "Jost"; }

pre { font-family: "Noto Sans Mono", monospace; }
pre.code {
	display: table;
	tab-size: 2;
	background-color: black;
	border-radius: 10px;
	padding: 10px 20px;
	margin: 1em auto;
}
span.code {
	display: inline-block;
	font: 1em "Noto Sans Mono", monospace;
	background-color: black;
	border-radius: 5px;
	padding: 0 5px 1.2px;
}

.medium { font-weight: 500; }
.medium-links a { font-weight: 500; }

.title-alt {
	font-size: 1.05em;
	text-align: center;
	color: lightgray;
	font-weight: 400;
}
.title-alt span:lang(ja) { font-size: 1.1em; font-weight: 600; }

.smallcaps { font: small-caps 18px/1 "Alegreya"; }
.smallcaps-big { font: small-caps 19.5px/1 "Alegreya"; }

.dropcap::first-letter {
	font-family: "Alegreya";
	initial-letter: 2.1;
	-webkit-initial-letter: 2.1;
  padding-right: 0.5em;
	margin-top: -0.04em;
}
.dropcap-fancy::first-letter {
	font: 5em/1 "EB Garamond Initials 1";
	float: left;
	margin-right: 0.11em;
}
.dropcap-fancy::before {
	font: 5em/1 "EB Garamond Initials 2";
	float: left;
	content: attr(data-letter);
	color: #8175bd;
	margin-right: -5em;
}

.indent { text-indent: 44px; }

.text-center { text-align: center; }
.text-right { display: block; text-align: right; }

[class^="gradient-"] {
	background-size: 200%;
	background-clip: text; -webkit-background-clip: text;
	font-weight: 600;
	color: transparent; -webkit-text-fill-color: transparent;
}
[class^="gradient-"]::selection { color: var(--text); }
h2 a[class^="gradient-"] { font-weight: 700; }

.gradient-rainbow {
	background-image: linear-gradient(to right, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff, #ffadad);
	&:hover { animation: gradient-flow 3s linear infinite; }
}
.gradient-gold {
	background-image: linear-gradient(to right, #ffd52e, #ffdc5a, #ffe27e, #ffe99f, #fff0bf, #fff8df, #fff0bf, #ffe99f, #ffe27e, #ffdc5a, #ffd52e, #ffdc5a, #ffe27e, #ffe99f, #fff0bf, #fff8df, #fff0bf, #ffe99f, #ffe27e, #ffdc5a, #ffd52e);
	&:hover { animation: gradient-flow 2.5s linear infinite; }
}
.gradient-pearl {
	background-image: linear-gradient(to right, #d1d1d3, #e1dbd6, #e2e2e4, #f9f6f2, #fefefe, #f9f6f2, #e2e2e4, #e1dbd6, #d1d1d3, #e1dbd6, #e2e2e4, #f9f6f2, #fefefe, #f9f6f2, #e2e2e4, #e1dbd6, #d1d1d3); 
	&:hover { animation: gradient-flow 2.5s linear infinite; }
}

@keyframes gradient-flow {
	from { background-position: 100%; }
	to { background-position: 0%; }
}

/* Mobile */
@media (max-width: 768px) {
	header { font-size: 3.8px; }
	
	nav { margin: 0 0 10px; }
	
	[class^="layout"] { max-width: 98vw; margin: 0 auto;}

	.layout-sidebar {
		display: flex; flex-direction: column;
		margin: 0 auto 10px;
		& main { margin-bottom: 0px; }
	}
	
	.layout-book { margin: 18px auto 25px; }
	.layout-book, .book { display: flex; flex-direction: column; }
	.book img {
		max-width: 76vw;
		height: auto;
		margin: 10px auto;
	}
	.book section { margin: 0 15px;}
	
	.layout-box {
		display: flex; flex-direction: column;
		gap: 25px;
		margin: 18px 0 25px;
	}
	
	blockquote { margin: 1em 12px; }
	
	.infobox {
		float: none;
		width: 285px;
		padding: auto 15px;
		margin: 15px auto 10px;
	}
	
	.indent { text-indent: 34px; }
}