@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200);
@import '/themes.css';

.material-symbols-outlined {
	font-variation-settings:
		'FILL' var(--icons-fill),
		'wght' 400,
		'GRAD' 0,
		'opsz' 48;
}

/* Page style */

html,
body {
	height: 100%;
	display: flex;
	flex-direction: column;
}

body {
	background-color: var(--body-background);
	height: 100%;
	color: var(--text-color);
}

body>* {
	flex-shrink: 0;
}

.main-container {
	flex-grow: 1;
	background-color: var(--body-main);
	padding: 2rem 0.5rem 2rem;
}

.main-container>.row {
	margin: 0 1rem;
}

.text-body {
	padding-left: 6%;
	padding-right: 6%;
	color: var(--text-color) !important;
}

.al-l {
	text-align: left;
}

.al-c {
	text-align: center;
}

.al-r {
	text-align: right;
}

.annotation {
	text-decoration: none;
	color: var(--book);
}

.annotation:visited {
	text-decoration: underline var(--book);
	font-style: italic;
	color: var(--book);
}

.annotation:hover {
	text-decoration: underline var(--book-hover);
	color: var(--book-hover);
}

.annotation:focus {
	text-decoration: none;
	color: var(--text-focus);
}

.title {
	color: var(--text-secondary);
}

.title>h1 {
	font-style: bold;
	font-size: 5em;
	color: var(--text-color);
}

/* Adds small outside reference icon to a link, but not links with class .book */
a[target=_blank]:not(.book)::after,
a[href^="http"]:not(.book)::after {
	content: "";
	background-image: url(/external-link.svg);
	padding-right: 0.7rem;
	background-position: 100% 10%;
	background-repeat: no-repeat;
	background-size: 0.6rem;
	filter: invert(var(--target-invert));
	-webkit-filter: invert(var(--target-invert));
}

/* A book reference, if applied, the outside reference icon isn't applied */
.book {
	color: var(--book);
	text-decoration: none;
	font-style: italic;
}

.book:hover {
	color: var(--book-hover);
	text-decoration: underline var(--book-hover);
	font-style: italic;
}

/* The same as .book, but the outside reference icon is applied */
.novel {
	color: var(--book);
	text-decoration: none;
	font-style: italic;
}

.novel:hover {
	color: var(--book-hover);
	text-decoration: underline var(--book-hover);
	font-style: italic;
}

.book.title,
.novel.title {
	color: var(--text-secondary);
	font-style: normal;
	text-decoration: 1px underline;
}

.book.title:hover,
.novel.title:hover {
	color: var(--book-hover);
	text-decoration: underline var(--book-hover);
}

.snav-link {
	text-decoration: none;
}

.snav-link:hover {
	text-decoration: underline;
}

.indent {
	padding-left: 4rem;
}

.bio>p {
	font-size: large;
	text-align: justify;
	text-justify: inter-word;
}

h2.bio {
	font-size: xx-large;
	padding-left: 2em;
}

.page-ref {
	padding-left: 0.8em;
	text-decoration: none;
	color: var(--reference-color);
}

.page-ref:hover {
	text-decoration: none;
	color: var(--reference-color-hover);
}

.last-gallery {
	max-height: 20em;
}

.article>p>b {
	font-weight: bolder;
}

.nav-color {
	background-color: var(--navbar-background);
}

.tooltip-wrap {
	position: relative;
}

.tooltip-wrap .tooltip-content {
	display: none;
	position: absolute;
	left: 5%;
	right: 5%;
	top: 3rem;
	background-color: var(--tooltip-color-bg);
	padding: .05em;
	min-width: 10rem;
	max-width: 15rem;
	border-radius: 10px;
	border: 2px solid var(--tooltip-color-border);
	z-index: 10;
}

.tooltip-wrap:hover .tooltip-content {
	display: block;
}

.tooltip-wrap:focus .tooltip-content {
	display: block;
}

.order-reverse-md {
	flex-direction: column-reverse;
}

.book-paragraph {
	text-align: center;
	padding: 0 2rem;
	font-size: 1.25em;
}

a.footnote {
	vertical-align: super;
	font-size: .75em;
	font-style: italic;
}

.footnote-container {
	padding: 1rem;
	font-size: .85rem;
	font-style: italic;
}

h6.footnote {
	font-size: inherit;
}

.footnote {
	--footnote-decor: none;
	--footnote-color-state: var(--footnote-color);
}

.footnote:hover {
	--footnote-decor: underline;
	--footnote-color-state: var(--footnote-hover);
}

.footnote:focus,
.footnote:focus-within {
	outline: 1px dashed var(--footnote-focus);
}

.footnote>a:focus {
	outline: none;
}

a.footnote,
h6.footnote>a {
	text-decoration: var(--footnote-decor);
	color: var(--footnote-color-state);
}

a.footnote::before {
	content: "*";
	font-size: .8em;
}

.figure-caption {
	color: var(--figure);
}

ul.dropdown-menu {
	right: 0;
}

#mode-holder {
	margin: -.5rem .25rem;
	position: relative;
}

#color-mode {
	font-size: 2rem;
	padding: 0;
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	outline: inherit;
	color: var(--icon-color);
}

.themeSelect {
	padding: 0;
	text-decoration: underline;
	background: none;
	border: none;
	cursor: pointer;
	outline: inherit;
	color: var(--text-color);
}

.themeSelect.inline {
	color: inherit;
	text-decoration: none;
	padding: .25rem;
}

.theme-showcase.reset {
	color: var(--reference-color);
}

.themeSelect.reset {
	font-style: italic;
	color: var(--reference-color);
}

.themeSelect:focus {
	color: var(--text-focus);
}

.themeSelect:hover {
	color: var(--book-hover);
	text-decoration: underline;
}

#themeList {
	display: none;
	position: absolute;
	border: solid 2px var(--text-color);
	background-color: var(--body-background);
	border-radius: 1rem;
	left: 100%;
	top: 0;
	width: max-content;
	padding: .5rem;
	color: var(--text-color);
	z-index: 99;
}

#themeList>ul {
	margin: 0;
}

#themeList.show {
	display: block;
}

#color-mode::before {
	content: var(--mode-icon);
}

.mode-icon::before {
	content: var(--mode-icon);
}

.card {
	--bs-card-bg: var(--body-background);
}

#color-mode:focus {
	outline: dashed 2px var(--footnote-focus);
}

/* ---Media queries modifications--- */

/* md screen size break-point */
@media (min-width: 768px) {
	.order-reverse-md {
		flex-direction: row;
	}

	#themeList {
		right: 0;
		top: 100%;
		left: auto;
	}
}

.button-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem;
}

.index-card {
	margin: .25rem .5rem;
}

.index-card>.card-body {
	flex: 0 1 auto;
}

.card-col {
	margin: 1rem 0;
}

#dark-light {
	margin: .25rem;
	width: max-content;
	fill: var(--icon-secondary);
}

.shady {
	color: var(--text-shady);
	font-style: italic;
}

.shady.material-symbols-outlined {
	font-style: inherit;
}

.theme-showcase {
	font-size: larger;
}

.theme-showcase-xl>.material-symbols-outlined {
	font-size: 3rem;
	margin: .125rem 1rem;
}

.series {
	font-size: 1.25em;
	margin-left: -2.5rem;
}

.small-caps {
	font-variant: small-caps;
}

.series-container>li::marker {
	content: "●\2003\2003\2003";
}

.series-container {
	padding-left: 3rem;
}

.series-container>li>ul {
	margin-left: 1.5rem;
}

.book-covers>.carousel-inner>.carousel-item>img {
	max-height: 768px;
	min-width: auto;
	margin: 0 auto;
}

.carousel-caption>* {
	--shadow-offset: 1px;
	--shadow-color: black;
	text-shadow: var(--shadow-offset) 0 var(--shadow-color), calc(var(--shadow-offset) * -1) 0 var(--shadow-color), 0 var(--shadow-offset) var(--shadow-color), 0 calc(var(--shadow-offset) * -1) var(--shadow-color), var(--shadow-offset) var(--shadow-offset) var(--shadow-color), calc(var(--shadow-offset) * -1) var(--shadow-offset) var(--shadow-color), var(--shadow-offset) calc(var(--shadow-offset) * -1) var(--shadow-color), calc(var(--shadow-offset) * -1) calc(var(--shadow-offset) * -1) var(--shadow-color);
}

.carousel-indicators.carousel-indicators>button {
	border: 2px solid black;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
	filter: invert(calc(100% - var(--target-invert)));
}