/* Debug: style for checking overflowing items */
/* * {
	outline: 1px solid red !important;
}*/

@font-face {
	font-family: "Segoe UI";
	src: url("./fonts/segoe-ui.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "Linux Libertine";
	src: url("./fonts/linux-libertine-semibold.otf") format("opentype");
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Serif";
	src: url("./fonts/ibm-plex-serif-regular.ttf") format("truetype");
	font-display: swap;
}

/* Rosé Pine Color Palette from https://github.com/rose-pine/rose-pine-palette */
:root {
	--rp-base: #191724;
	--rp-surface: #1f1d2e;
	--rp-overlay: #26233a;
	--rp-muted: #6e6a86;
	--rp-subtle: #908caa;
	--rp-text: #e0def4;
	--rp-love: #eb6f92;
	--rp-gold: #f6c177;
	--rp-rose: #ebbcba;
	--rp-pine: #31748f;
	--rp-foam: #9ccfd8;
	--rp-iris: #c4a7e7;
	--rp-highlight-low: #21202e;
	--rp-highlight-med: #403d52;
	--rp-highlight-high: #524f67;

	--rp-moon-base: #232136;
	--rp-moon-surface: #2a273f;
	--rp-moon-overlay: #393552;
	--rp-moon-muted: #6e6a86;
	--rp-moon-subtle: #908caa;
	--rp-moon-text: #e0def4;
	--rp-moon-love: #eb6f92;
	--rp-moon-gold: #f6c177;
	--rp-moon-rose: #ea9a97;
	--rp-moon-pine: #3e8fb0;
	--rp-moon-foam: #9ccfd8;
	--rp-moon-iris: #c4a7e7;
	--rp-moon-highlight-low: #2a283e;
	--rp-moon-highlight-med: #44415a;
	--rp-moon-highlight-high: #56526e;

	--rp-dawn-base: #faf4ed;
	--rp-dawn-surface: #fffaf3;
	--rp-dawn-overlay: #f2e9e1;
	--rp-dawn-muted: #9893a5;
	--rp-dawn-subtle: #797593;
	--rp-dawn-text: #575279;
	--rp-dawn-love: #b4637a;
	--rp-dawn-gold: #ea9d34;
	--rp-dawn-rose: #d7827e;
	--rp-dawn-pine: #286983;
	--rp-dawn-foam: #56949f;
	--rp-dawn-iris: #907aa9;
	--rp-dawn-highlight-low: #f4ede8;
	--rp-dawn-highlight-med: #dfdad9;
	--rp-dawn-highlight-high: #cecacd;

	--accent-primary: var(--rp-moon-gold);
	--accent-clickable: var(--rp-moon-love);
}

/* Elements */
body {
	background-color: var(--rp-dawn-base);
	background: fixed no-repeat url("./images/chikoi-the-maid.jpg");
	background-size: cover;
	color: var(--rp-dawn-text);
	font-family: "Segoe UI", "Adwaita Sans", "Tahoma", "Arial", sans-serif;
	font-size: large;
	line-height: 1.4;
}

main {
	max-width: 1250px;
	margin: auto;
	padding: 1rem 1.5rem;
	/* border: 3px solid var(--rp-moon-highlight-high); */
	/* outline: 3px dashed var(--rp-moon-subtle); */
	border: 3px solid var(--rp-moon-iris);
	outline: 3px dashed var(--rp-dawn-iris);
	outline-offset: -3px;
	border-radius: 3rem;
	background: rgba(35, 33, 54, 0.85);
	backdrop-filter: blur(3px) saturate(150%);
	color: var(--rp-moon-text);
	box-shadow: 5px 5px 15px 3px var(--rp-moon-base);
}

a {
	color: var(--accent-clickable);
	text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: none;
  outline: var(--rp-moon-foam) dashed 2px;
  outline-offset: 0.05em;
}

a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Linux Libertine", "IBM Plex Serif", "Times New Roman", serif;
	font-weight: bold;
	color: var(--accent-primary);
}

hr {
	color: var(--accent-primary);
}

img {
	max-width: 100%;
}

li {
	margin: 10px 0px;
}

blockquote {
	padding-left: 10px;
	border-left: 3px solid var(--accent-primary);
}

br {
	margin-bottom: 10px;
}

.footnote-ref {
	line-height: 1;
}