/* root settings */

:root {

	/* column widths */
	--widthSidebar: 200px;
	--widthContent: 800px;

	/* general page and text colours - matching your shrine */
	--colorBackground: #f5f5f5;
	--colorText: #4a4a4a;
	--colorLink: #7a7a7a;

	/* accent colours - matching your shrine */
	--colorPrimary: #808080;
	--colorSecondary: #666666;
	--colorTertiary: #d0d0d0;

	/* border and box shadow colours */ 
	--colorBorder: #666666;
	--colorShadow: rgba(0,0,0,0.1);

	/* background colour for the sections */
	--colorBackgroundMain: #e8e8e8;

	/* fonts - matching your shrine */
	--fontText: 'MS Gothic', monospace;
	--fontTitle: 'MS Gothic', monospace;

	/* borders - matching your shrine style */
	--borderSolid: 2px solid #666666;
	--borderDotted: 2px dotted #666666;
	--borderTree: 1px solid #666666;

	/* gallery settings */
	--columnCount: 2;
	--columnGap: 8px;

	/* background image FOR ALL PAGES */
	--imageBackground: none;
}

/* global site structure */

* {
	box-sizing: border-box;
}

body {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	margin: 0;
	min-height: 100vh;
	font-family: var(--fontText);
	color: var(--colorText);
	background-image: url('https://files.catbox.moe/h3jt14.jpeg');
	background-size: 40%;
	background-position: center;
  background-attachment: fixed;
  font-size: 16px;
}

header {
	display: none;
}

main {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	margin: 60px auto 0 auto;
	max-width: 1100px;
	width: 95%;
}

main > .sidebar {
	flex: 2 2 10em;
	max-width: calc(var(--widthSidebar) + 2em);
	padding: 1em;
	position: sticky;
	top: 20px;
	align-self: flex-start;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}

main > .content {
	display: flex;
	flex-flow: row wrap;
	flex: 1 1 20em;
	max-width: var(--widthContent);
	padding: 1em;
}

footer {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	border-top: var(--borderDotted);
	padding: 0 1em;
	font-size: 12px;
	background-color: var(--colorBackgroundMain);
	box-shadow: 2px 2px 4px var(--colorShadow);
}

/* global text settings */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fontTitle);
	word-wrap: break-word;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: normal;
}

h1 {
	font-size: 20px;
	color: #f0f0f0;
	background-color: var(--colorPrimary);
	padding: 8px;
	margin: 0;
}

h2 {
	font-size: 18px;
	border-bottom: 1px solid var(--colorBorder);
	padding-bottom: 4px;
}

p {
	font-family: var(--fontText);
	font-size: 16px;
	letter-spacing: 0.5px;
	line-height: 1.4;
}

li {
	font-family: var(--fontText);
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 1.4;
	margin: 8px;
}

b {
	color: var(--colorSecondary);
}

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

a:hover {
	font-style: italic;
}

button, .button {
	font-family: var(--fontTitle);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--colorText);
	background-color: var(--colorPrimary);
	border: 1px solid var(--colorPrimary);
	padding: 8px 12px;
	letter-spacing: 1px;
}

button:hover, .button:hover {
	background-color: var(--colorBackgroundMain);
	color: var(--colorText);
}

.button:after {
	content:'';
}

hr {
	border: 0;
	border-top: var(--borderDotted);
	margin: 1em 0;
	width: 100%;
}

blockquote {
	margin: 1.5em;
	padding-left: 1.5em;
	border-left: 1px solid var(--colorSecondary);
}

pre, code {
	width: calc(var(--widthContent) - 200px);
	background: var(--colorTertiary);
	padding: 4px 8px;
	margin: 1em auto;
	max-height: 300px;
	overflow: scroll;
	}

figure > figcaption:before {
	content: '↳ ';
}

figure > figcaption {
	font-size: 12px;
}

audio, video, iframe {
	display: block;
	margin: auto;
	border: var(--borderSolid);
	box-shadow: 2px 2px 4px var(--colorShadow);
}

details > summary {
	padding: 0.2em 0;
	margin: 0 2em;
	border-bottom: 1px solid var(--colorTertiary);
	cursor: pointer;
}

/* nav specific */

nav {
	padding: 8px 0;
}

nav > * { margin-block: 0.5em !important; }

nav .category {
	display: block;
	position: relative;
	padding: 0.5em;
	margin: 0;
	width: 100%;
	color: var(--colorText);
	background: var(--colorBackgroundMain);
	border: var(--borderSolid);
	font-family: var(--fontTitle);
	font-size: 16px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 2px 2px 4px var(--colorShadow);
}

nav .category:hover {
	background-color: var(--colorPrimary);
	cursor: pointer;
}

nav .category::-webkit-details-marker {   
	display:none; 
}

nav details[open] .category {
	background-color: var(--colorBorder);
	color: var(--colorBackground);
}

nav > details > .category::after {
	content:'[open]';
	color: var(--colorText);
	position: absolute;
	right: 0.5em;
}

nav > details[open] > .category::after {
	content:'[close]';
	color: var(--colorBackground);
	position: absolute;
	right: 0.5em;
}

nav ul li {
	font-family: var(--fontTitle);
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* sidebar widgets */

.sidebar > .widget {
	display: flex;
	flex-flow: column;
	padding: 8px 0;
	background-color: var(--colorBackgroundMain);
	border: var(--borderSolid);
	box-shadow: 2px 2px 4px var(--colorShadow);
	margin-bottom: 15px;
}

.widget h3 {
	background-color: var(--colorPrimary);
	color: #f0f0f0;
	padding: 8px;
	margin: 0;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: normal;
}

.widget p {
	padding: 10px 15px;
	margin: 0;
}

.widget img {
	width: 100%;
	padding: 10px;
}

/* sections */

section {
	border: var(--borderSolid);
	background-color: var(--colorBackgroundMain);
	color: var(--colorText);
	padding: 0;
	box-shadow: 2px 2px 4px var(--colorShadow);
	margin: 0 1em 2em 1em;
	width: 100%;
}

section h1 {
	text-transform: uppercase;
	padding: 8px;
	color: #f0f0f0;
	background: var(--colorPrimary);
	margin: 0;
	letter-spacing: 2px;
}

section h2 {
	border-bottom: 1px solid var(--colorBorder);
	padding: 8px 15px;
	margin: 0;
}

section a::after {
	content: '';
}

section img {
	width: 100%;
}

section img:hover {
	-webkit-box-shadow: 0 0 10px var(--colorBorder);
	box-shadow: 0 0 10px var(--colorBorder);
	scale: 1.1;
}

section p {
	padding: 10px 15px;
	font-size: 15px;
	text-align: justify;
}

section > ul li, section > ol li {
	padding: 0.2em 0;
	border-bottom: 1px solid var(--colorTertiary);
	list-style-position: outside;
}

.half-width {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	min-height: 300px;
}

.half-width section {
	width: calc(50% - 2em);
	margin: 0 1em 2em 1em;
}

section.half-width pre {
	width: unset;
}

section .scrollbox {
	max-height:250px;
	overflow: scroll;
	border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAo0lEQVRYR+2YsQ2AMAwE8XB0rMFUrEHHcECQQkdh6w2yODcRUnI4n6MINs7TPpy1Lau10fvc1njKy+/zLbqwb8zTZCSIu1Hvi76afx13hapz9Dgq9glHnwKNqlbnYxKrlIbDURxNk0sEruOoaMPpGBJVR0yiJKpOQM3DURJVJ6Dm1XE0eod5/ZdOmUbVLmXxcJQ7U5ZbKi6O4qjKpSwOjv7W0QOMUt+K9QUh9QAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

/* in-section flex settings */

section > .flex-columns {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	padding: 10px;
}

.flex-columns > .flex-text {
	width: 60%;
}

.flex-columns > .flex-image {
	width: 40%;
}

.flex-columns > .flex-image > img {
	width: 100%;
	padding: 0 1em;
}

/* preview frames */
.preview-frame {
	display: flex;
	flex-flow: row wrap;
	border: var(--borderSolid);
	border-radius: 0 0 1em 0;
	margin: 1em;
	box-shadow: 2px 2px 4px var(--colorShadow);
}

.preview-frame a {
	max-width: 250px;
}

.preview-frame a:after {
	content: '';
}

.preview-frame a img{
	height: 100%;
	object-fit: contain;
	flex-basis: 0;
	padding: 10px;
}

.preview-frame > div {
	border-left: var(--borderSolid);
	width: calc(100% - 250px);
	flex-basis: 1 1 auto;
}

.preview-frame h3 {
	padding: 8px 0;
	margin: 0;
	border-bottom: var(--borderSolid);
}

.preview-frame h3, .preview-frame p {
	padding-left: 12px;
}

.preview-frame button {
	margin-left: 12px;
	margin-bottom: 12px;
}

/* gallery */

.gallery {
	/* Prevent vertical gaps */
	line-height: 0;

	-webkit-column-count: var(--columnCount);
	-webkit-column-gap:   var(--columnGap);
	-moz-column-count:    var(--columnCount);
	-moz-column-gap:      var(--columnGap);
	column-count:         var(--columnCount);
	column-gap:           var(--columnGap);
}

.gallery div, .gallery img {
	/* Just in case there are inline attributes */
	width: 100% !important;
	height: auto !important;
	margin-bottom: var(--columnGap);
}

/* tree view */

.tree-view {
	margin-bottom: 12px;
}

.tree-view ul > li::before {
	content: '';
	border-bottom: var(--borderTree);
	display: block;
	width: 24px;
/*	transform: translate(0, 25px);*/
}

nav .tree-view ul {
	display: flex;
	flex-flow: column;
	border-left: var(--borderTree);
	transform: translate(0, -8px);
	margin: 0 0 0 24px;
	padding: 0;
}

nav .tree-view ul li {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-end;
	list-style-type: none;
	min-height: 32px;
}

nav .tree-view a {
	display: block;
	margin-left: 8px;
	transform: translate(0, 8px);
	padding: 2px;
	text-decoration: none;
	width: 100%;
	}

section .tree-view ul {
	border-left: var(--borderTree);
	transform: translate(24px, 0px);
	margin: 0 0 0 24px;
	padding: 0;
}

section .tree-view ul li {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-end;
	padding: 0;
	min-height: 32px;
	list-style-type: none;
	max-width: 500px;
}

section .tree-view ul > ul > li {
	margin-top: 10px;
}

section .tree-view a, section .tree-view li p {
	margin: 0 0 0 8px;
	transform: translate(0, 8px);
	padding: 2px;
	text-decoration: none;
	width: 100%;
}

section .tree-view > p { 
	margin: 0;
	padding: 8px;
	border: var(--borderTree);
}

/* arrow list */

.arrow-list > li {
	padding: 0.2em 0;
	border-bottom: 1px solid var(--colorTertiary);
	list-style-position: outside;
	list-style-type: '→ '; /* for Safari/iOS/whatever other browser that hates ::marker */
}

 .arrow-list > li::marker {
	content: '→ ';
	font-family: sans-serif;
}

/* to do list */

.todo-list li {
	padding: 0.2em 0;
	border-bottom: 1px solid var(--colorTertiary);
	list-style-position: outside;
	list-style-type: '☐ '; /* for Safari/iOS/whatever other browser that hates ::marker */
}

.todo-list > li::marker {
	content: '☐ ';
	font-family: sans-serif;
}

.todo-list > .task-done {
	color: var(--colorTertiary);
	text-decoration: line-through;
	list-style-position: outside;
	list-style-type: '☒ '; /* for Safari/iOS/whatever other browser that hates ::marker */
}

.todo-list > .task-done::marker {
	content: '☒ ';
	font-family: sans-serif;
}

/* not found page */

.not-found {
	display: flex;
	flex-flow: column;
	max-width: 800px;
	height: 500px;
	justify-content: center;
	margin: auto;
	padding: 2em;
}

/* scrollbar styling to match shrine */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #999999;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #777777;
}


        .tab-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .tab-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin: 10px;
        }
        
        .tab-button {
            background: var(--colorBackgroundMain);
	border: var(--borderSolid);
	font-family: var(--fontTitle);
	font-size: 13px;
	text-decoration: none;
	text-transform: uppercase;
        }
        
        .tab-button.active {
            	background-color: var(--colorPrimary);
	cursor: pointer;
        }
        
        .tab-button:hover {
            	background-color: var(--colorPrimary);
	cursor: pointer;
        }
        
        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid #ddd;
            background: #e8e8e8;
        max-height: 450px;
        overflow-y: scroll;

        }
        
        .tab-content.active {
            display: block;
        }
        
        .character-container {
            display: flex;
            gap: -5px;
            margin: 2px 0;
        }
        
        .character-info-box {
            flex: 0 0 300px;
            border: 2px solid var(--colorPrimary);
            padding: 15px;
            background: #f9f9f9;
            
        }
        
        .character-image {
            text-align: center;
            margin-bottom: 15px;
        }
        
        .character-image img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #ddd;
        }
        
        .character-title {
            font-size: 18px;
            font-weight: bold;
            text-align: left;
            margin-bottom: 5px;
            color: var(--colorPrimary);
        }
        
        .character-subtitle {
            font-size: 14px;
            text-align: left;
            margin-bottom: 15px;
            color: #666;
        }
        
        .character-stats {
            font-size: 14px;
            line-height: 1.4;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-weight: bold;
            color: #444;
        }
        
        .character-main-content {
            flex: 1;
            padding: 0 10px;
        }