@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Emoji:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap');

:root {
	--col-bg: #222222;
	--col-text: #ffddbb;
	--col-footer: #666666;
	--col-select: #8f3914;
	
	--col-dark: #333333;
	--col-darker: #171717;
	--col-line: #555555;
	--col-highlight: #f0cb16;
	
	--col-detail-lighter: #e78018;
	--col-detail-light: #cc7717;
	--col-detail-mid: #bb6616;
	--col-detail-dark: #8f3914;
	
	--col-link: #bb6616;
	--col-link-hover: #ffcc44;
	
	--col-h1: #bb6616;
	--col-h2: #bb6616;
	--col-h3: #a9b665;
	--col-h4: #4bb7a1;
	--col-h5: #bb6616;
	
	--col-bold: #bb6616;
	--col-italic: #bb6616;
	
	--left-width: 20vw;
	--right-width: 20vw;
	--content-width: 60vw;
	
	--col-table-base: #333333;
	--col-table-row-odd: #222222;
	
	--col-heading-ping-1: rgba(255, 200, 100, 1);
	--col-heading-ping-2: rgba(255, 100, 0, 0.5);
	
	--content-padding-horiz: 8rem;
	--content-padding-vert: 5rem;
}

/**********************************************************************            PAGE SETUP VARIABLES AND BASICS            **********************************************************************/

body {
	background-color: var(--col-bg);
	color: var(--col-text);
	display: flex;
	margin: 0;
	height: 100vh;
	
	font-family: "Inter", sans-serif;
	font-size: 12pt;
}

* {
	box-sizing: border-box;
}

div#left-side{ /* list of documents */
	display: block;
	width: var(--left-width);
	padding: 1rem;
	border-right: 1px solid var(--col-line);
	flex-direction: column;
	overflow: auto;
}

div#right-side{ /* table of contents */
	display: block;
	width: var(--right-width);
	padding: 1rem;
	border-left: 1px solid var(--col-line);
	flex-direction: column;
	overflow: auto;
}

div#content { /* main document content */
	display: block;
	padding: var(--content-padding-vert) var(--content-padding-horiz);
	flex-direction: column;
	width: var(--content-width);
	overflow: auto;
	
	transition: opacity 0.2s;
}

div.sep-v {
	display: inline-block;
	width: 1px;
	height: 100%;
	background-color: var(--col-line);
}

/* edit page */

@keyframes save-info-pop {
	0% {
		visibility: visible;
		opacity: 1;
	}
	
	50% {
		visibility: visible;
		opacity: 1;
	}
	
	100% {
		visibility: hidden;
		opacity: 0;
	}
}

div#save-info {
	position: relative;
	width: 40%;
	float: right;
	padding: 2px;
	background-color: var(--col-detail-dark);
	border-width: 1px;
	border-style: solid;
	border-color: transparent transparent var(--col-detail-light) var(--col-detail-light);
	border-radius: 0 6px 0 6px;
	margin: 1px 1px 0 0;
	visibility: hidden;
	text-align: center;
	pointer-events: none;
}

div#save-info.popped {
	animation-name: save-info-pop;
	animation-duration: 3s;
	animation-timing-function: linear;
}

div#save-info-cont {
	position: relative;
	width: 100%;
	height: 0;
}

input[type="button"].markdown-button {
	background-color: transparent;
	border: 1px solid var(--col-line);
	border-radius: 7px;
	padding: 5px;
	color: var(--col-text);
	display: inline-block;
	width: 100%;
}

input[type="button"].markdown-button:hover {
	background-color: var(--col-detail-dark);
	border-color: var(--col-detail-lighter);
}

input[type="button"].markdown-button:active {
	background-color: var(--col-detail-light);
	border-color: var(--col-detail-dark);
	color: var(--col-detail-dark);
}

textarea#markdown-input { /* edit page markdown input container */
	width: -webkit-fill-available;
	height: -webkit-fill-available;
	background-color: transparent;
	color: #ffffff;
	font-family: "Noto Sans Mono", monospace;
	padding: 10px;
	border-radius: 7px;
	border: 1px solid var(--col-line);
	resize: none;
	overflow: auto;
	white-space: nowrap;
}

textarea#markdown-input:focus {
	outline: none;
	background-color: var(--col-darker);
}

div#input { /* edit page markdown input textbox */
	display:flex;
	flex-direction: column;
	padding: 10px;
	max-width: calc(var(--left-width) + var(--right-width));
	width: calc(var(--left-width) + var(--right-width));
	border-right: 1px solid var(--col-line);
}

::selection { /* selected text */
	background-color: var(--col-select);
}

/**********************************************************************              SEARCH BOX (IN LEFT COLUMN)              **********************************************************************/

div#search-container { /* search container */
	background-color: var(--col-darker);
	border-bottom: 2px solid var(--col-detail-dark);
	border-radius: 10px;
	overflow: hidden;
}

div#search-container input#search { /* search input textbox */
	background-color: var(--col-darker);
	border: 0;
	border-radius: 5px;
	color: #ffffff;
	width: -webkit-fill-available;
	padding: 10px;
}

div#search-container input#search:not(:placeholder-shown), div#search-container input#search:focus { /* search input textbox, when it has text or it's focused */
	box-shadow: 0 1px 0 var(--col-dark); /* simulates a border without changing element size */
}

@keyframes search-input-flash {
	0% {
		background-color: var(--col-dark);
	}
	
	100% {
		background-color: var(--col-darker);
	}
}

div#search-container input#search:focus { /* search input textbox, when focused */
	outline: none;
	
	animation-name: search-input-flash;
	animation-duration: 0.3s;
	animation-timing-function: linear;
}

div#search-container:has(input#search:focus) { /* change the container's border when the search textbox is focused */
	border: 0;
	border-bottom: 2px solid var(--col-detail-light);
	outline: none;
}

div#search-container div#search-results { /* search results container */
	display: none;
	max-height: 400px;
	overflow: auto;
	padding: 6px;
}

div#search-container div#search-results:has(*) { /* search results containers (at least one result) */
	display: block;
}

div#search-container div#search-results a.search-entry { /* search result */
	display: block;
	background-color: var(--col-bg);
	margin: 1px;
	padding: 3px;
	
	font-style: normal;
}

div#search-container div#search-results a.search-entry::before {display: none;}  /* remove styling from search result <a> */

div#search-container div#search-results a.search-entry:first-child { /* first search result (round top corner) */
	border-radius: 6px 6px 0 0;
}

div#search-container div#search-results a.search-entry:last-child { /* last search result (round bottom corners) */
	border-radius: 0 0 6px 6px;
}

div#search-container div#search-results a.search-entry:last-child:first-child { /* singular search result (round all corners) */
	border-radius: 6px;
}

div#search-container div#search-results a.search-entry:hover { /* search result on hover */
	background-color: var(--col-detail-dark);
}

/**********************************************************************               TREE VIEW (DOCUMENT LIST)               **********************************************************************/

.tree-element {
	display: block;
	width: -webkit-fill-available;
	height: auto;
	background-color: var(--col-darker);
	
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 5px;
	
	cursor: pointer;
}

.tree-element.collapsed *:not(.tree-title) { /* hide contents of collapsed folders */
	display: none;
}

.tree-element .tree-element { /* indent children */
	padding: 2px;
	padding-left: 5px;
	margin-left: 10px;
}

.tree-element.tree-folder { /* folder decorations */
	border-left: 2px solid var(--col-detail-dark);
}

.tree-element.tree-folder.collapsed { /* folder decorations */
	border-left-color: transparent;
}

.tree-element.tree-folder:not(.collapsed):hover { /* folder decorations */
	border-left-color: var(--col-detail-light);
}

.tree-element .tree-title { /* actual text of the elements */
	display: inline-block;
	width: 100%;
	border-radius: 5px;
}

.tree-element.tree-chosen .tree-title { /* tree title of the currently opened page */
	background-image: linear-gradient(30deg, var(--col-detail-dark) 0%, transparent 75%);
}

.tree-element.tree-chosen .tree-title:hover { /* tree title of the currently opened page (on hover) */
	background-image: linear-gradient(30deg, var(--col-detail-light) 0%, transparent 75%);
}

.tree-element .tree-title:hover { /* on-hover decoration */
	background-color: var(--col-detail-dark);
	/* text-shadow: 0 0 6px currentcolor; */
}

.tree-element:not(.tree-folder) > .tree-title::before { /* icon for basic files */
    content: "\1FAB6";
	display: inline-block;
	width: 1rem;
	padding-right: 0.7rem;
	font-family: "Noto Emoji", sans-serif;
}

.tree-element.tree-folder > .tree-title::before { /* icon for folders */
	content: "\1F4C2";
	width: 1rem;
	padding-right: 0.7rem;
	font-family: "Noto Emoji", sans-serif;
}

.tree-element.tree-folder.collapsed > .tree-title::before { /* icon for folders (collapsed) */
	content: "\1F4C1";
}

.tree-element.tree-icon-home .tree-title::before { /* home icon */
	content: "\1F3E0";
}

.tree-element.tree-icon-place .tree-title::before { /* location icon */
	content: "\1F4CC";
}

.tree-element.tree-icon-event .tree-title::before { /* event icon */
	content: "\231B";
}

.tree-element.tree-icon-char .tree-title::before { /* character icon */
	content: "\1F464";
}

.tree-element.tree-icon-group .tree-title::before { /* group icon */
	content: "\1F465";
}

.tree-element.tree-icon-cons .tree-title::before { /* consumable icon */
	content: "\1F356";
}

.tree-element.tree-icon-item .tree-title::before { /* item icon */
	content: "\1F516";
}

.tree-element.tree-icon-weap .tree-title::before { /* weapon icon */
	content: "\2694";
}

.tree-element.tree-icon-note .tree-title::before { /* note icon */
	content: "\1F4CB";
}

.tree-element.tree-icon-lore .tree-title::before { /* lore icon */
	content: "\1F56E";
}


#footer { /* credits under the tree-view (also used in other areas) */
	font-size: 8pt;
	color: var(--col-footer);
}

/**********************************************************************                   TABLE OF CONTENTS                   **********************************************************************/

.toc {
	border-radius: 5px;
}

.toc a {
	display: inline-block;
	width: -webkit-fill-available;
}

.toc:hover {
	background-color: var(--col-dark);
}

.toc-h1 {font-size: 18pt; font-weight: bold; color: var(--col-h1); margin-left: 1rem;}
.toc-h2 {font-weight: bold; color: var(--col-h2); margin-left: 2rem;}
.toc-h3 {color: var(--col-h3); margin-left: 3rem;}
.toc-h4 {color: var(--col-h4); margin-left: 4rem;}

.toc a::before {display: none}

/**********************************************************************          BLOCKQUOTE ADJUSTMENTS AND VARIANTS          **********************************************************************/

/* wikipedia style infobox */

.infobox.wikipedia {
	display: block;
	float: right;
	width: 40%;
	padding: 0.7rem;
	border-radius: 5px;
	
	margin-left: 8px;
	
	background-color: var(--col-dark);
	
	box-shadow: 0 5px 8px var(--col-darker); /* since infoboxes are autoconverted to div, we must clone some of the blockquote properties directly. */
}

.infobox.wikipedia td, .infobox.wikipedia th {
	border: 1px solid var(--col-dark);
}

.infobox.wikipedia table { /* simulate corner radius of the header above the table */
	overflow: hidden;
    border-radius: 0 0 12px 12px;
	background-color: var(--col-bg);
	border: 0;
}

.infobox.wikipedia table tr { /* undo the outline on table hover */
	outline: none;
}

.infobox.wikipedia table thead th { /* undo table header weight (so it appears as a normal table row) */
	font-weight: normal;
}

.infobox.wikipedia h1, .infobox.wikipedia h6 { /* special formatting for headings */
	margin: 3px;
	padding: 5px;
	border-radius: 8px;
	background-color: var(--col-bg);
	color: var(--col-text);
	font-size: 24pt;
	text-align: center;
}

.infobox.wikipedia h6 {
	font-size: 16pt;
	margin: 1px;
	border-radius: 8px 8px 0 0;
}

.infobox.wikipedia img { /* special formatting for base image */
	width: -webkit-fill-available;
}

/* quote box */

blockquote.quote {
	border-left: 4px solid var(--col-detail-mid);
}

blockquote.quote span.quote-text {
	font-size: 16pt;
	font-style: italic;
}

blockquote.quote span.quote-text::before, .quote span.quote-text::after {
	content: "\"";
}

blockquote.quote span.quote-author {
	text-align: right;
	color: var(--col-italic);
}

blockquote.quote span.quote-author::before {
	content: "~ ";
}

/* card collection (columns of images) */

blockquote.cards {
	width: 100%;
    margin-top: 20px;
    display: inline-block;
    clear: both;
	padding: 0 0.4rem;
}

blockquote.cards.collapsed .cards-cont-main {
	display: none;
}

blockquote.cards .cards-cont {
	width: -webkit-fill-available;
    display: block;
    text-align: center;
    float: left;
    margin: 3px;
	padding: 2px;
	border-radius: 6px;
	
	background-color: var(--col-bg);
}

blockquote.cards h4 { /* main header of the card display. can be clicked to collapse and hide the cards. */
	text-align: center;
	color: var(--col-text);
	cursor: pointer;
	background-color: var(--col-bg);
	border-radius: 6px;
	margin: 6px 0;
}

blockquote.cards .cards-col {float: left;} /* allow columns to go side by side */
blockquote.cards .cards-2-col {width: 50%;} /* 2 columns in a row */
blockquote.cards .cards-3-col {width: 33%;} /* 3 columns in a row */
blockquote.cards .cards-4-col {width: 25%;} /* 4 columns in a row */
blockquote.cards .cards-5-col {width: 20%;} /* 5 columns in a row */

blockquote.cards .cards-cont img {
	width: 100%;
	vertical-align: bottom;
}

/* aside */

blockquote.aside {
	width: fit-content;
	max-width: 250px;
    text-align: center;
	float: left;
	margin: 1rem;
	clear: both;
}

blockquote.aside[data-aside-float-right] {
	float: right;
}

/**********************************************************************                    ZOOMABLE IMAGES                    **********************************************************************/

img.zoomable { /* preview decoration */
	cursor: zoom-in;
}

.image-embed.zoomable:has(img.zoomable) {position: relative;}

.image-embed.zoomable:has(img.zoomable)::before {
	content: "\1F50D";
	display: inline-block;
	font-size: 12px;
	position: absolute;
	right: 2px;
	font-family: "Noto Emoji", sans-serif;
	font-weight: bold;
	color: white;
	text-shadow: 0 0 2px black, 0 0 1px black;
}

div.image-zoomed { /* zoomed image container */
	display: block;
	cursor: zoom-out;
	position: fixed;
	z-index: 200;
	background-color: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(5px);
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	padding: 5%;
	object-fit: scale-down;
	text-align: center;
}

div.image-zoomed img { /* large size image */
	width: 100%;
	height: 100%;
	object-fit: scale-down;
	
	transition: transform 0.2s;
}

div.image-zoomed .image-info { /* image info (defaults to "(Click Anywhere to Close)" if the image has no alt text) */
	color: var(--col-text);
	font-size: 8pt;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 3px 6px;
	border-radius: 10px;
	
	position: relative;
}

/**********************************************************************                    BASE FORMATTING                    **********************************************************************/

a { /* links */
	color: var(--col-link);
	text-decoration: none;
	font-style: italic;
	cursor: pointer;
}

a[target="_blank"] { /* external links */
	text-decoration: underline;
}

a::before { /* link icon */
	content: "\1F517";
	color: var(--col-text);
	font-style: normal;
	font-size: 50%;
	vertical-align: middle;
	font-family: "Noto Emoji", sans-serif;
}

a:hover, #right-side .toc:hover > a { /* base link decoration */
	color: var(--col-link-hover);
	text-shadow: 0 0 6px currentcolor;
}

#right-side a {font-style: normal;} /* remove some formatting from table-of-contents links */

blockquote {
	background-color: var(--col-dark);
	padding: 1rem;
	border-radius: 5px;
	display: flex;
    flex-direction: column;
    margin: unset;
	box-shadow: 0 5px 8px var(--col-darker);
}

blockquote > p:first-child { /* remove top margin from paragraph if it's the first child of a blockquote */
	margin-top: 0;
}

blockquote > p:last-child { /* remove bottom margin from a paragraph if it's the last child of a blockquote */
	margin-bottom: 0;
}

hr { /* horizontal rule */
	border: 0;
	height: 1px;
	background-color: var(--col-line);
	margin: 0.5rem;
	padding: 0;
}

img {
	width: -webkit-fill-available;
}

img.cover { /* cover images are cropped within the selected width/height */
	object-fit: cover;
}

img.hsmall { /* horizontally small image */
	width: 300px;
}

img.error-img {
	position: absolute;
    display: inline-block;
    z-index: -1;
    transform: translate(-80%, -38%);
}

h1, h2, h3, h4, h5, h6 {margin: 0; font-variant: small-caps;} /* base heading formatting */

@keyframes highlight-heading {
	0% {
		background-color: var(--col-heading-ping-1);
	}
	
	50% {
		background-color: var(--col-heading-ping-2);
	}
	
	100% {
		background-color: transparent;
	}
}

h1:target, h2:target, h3:target, h4:target, h5:target { /* play animation when a heading is linked to */
	animation-name: highlight-heading;
	animation-duration: 1s;
	animation-timing-function: linear;
}

h1 {color: var(--col-h1); font-size: 36pt;}
h2 {color: var(--col-h2); font-size: 28pt;}
h3 {
	color: var(--col-h3); font-size: 22pt;
	
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-image: linear-gradient(to right, currentcolor 0%, transparent 50%) 1;
	margin-bottom: 0.4rem;
}
h4 {color: var(--col-h4); font-size: 18pt;}
h5 {color: var(--col-h5); font-size: 12pt;}

h4+p {
	margin-top: 0;
}

code {
	font-family: "Noto Sans Mono", monospace;
	background-color: var(--col-darker);
	border-radius: 5px;
	display: inline-block;
    padding: 2px;
    border: 1px solid var(--col-line);
    font-size: 10pt;
}

code.full {
	display: block;
	padding: 10px;
}

table { /* base table formatting */
	border-spacing: 0;
	background-color: var(--col-table-base);
	width: -webkit-fill-available;
    border-radius: 8px;
	
	border: 1px solid var(--col-table-base);
}

table tr:hover { /* table row highlight */
	outline: 1px solid rgba(255, 255, 255, 0.4);
}

table thead tr:hover { /* account for radius of top corners in table row highlight */
	border-radius: 8px 8px 0 0;
}

table tbody tr:last-child:hover { /* account for radius of bottom corners in table row highlight */
	border-radius: 0 0 8px 8px;
}

table thead th {
	font-weight: bold;
	text-align: left;
}

table tr td, table tr th {
	padding: 4px;
}

table tbody tr:nth-child(odd) {
	background-color: var(--col-table-row-odd);
}

em, strong {
	color: var(--col-italic);
}

#footer em, #footer strong {
	color: var(--col-footer);
}

/**********************************************************************                       SCROLLBARS                      **********************************************************************/

*::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

*::-webkit-scrollbar-track {
  border-radius: 4px;
  background-color: var(--col-dark);
}

*::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: var(--col-detail-dark);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--col-detail-light);
}

*::-webkit-scrollbar-thumb:active {
  background-color: var(--col-highlight);
}