/* Colors */
:root{
	--bg: black; --bg-2: #181818; --anchor: #0fff00;
	--fg: #ccc; --fg-2: gray; --fg-3: white;

	--n1: red; --n2: gray; --n3: gray; --n4: #ccc; --n5: white; --n6: #0fff00;

	--blue:blue; --lime:lime; --magenta:magenta; --yellow:yellow; --red:red;
}
.light-theme{
	--bg: white; --bg-2: #dedede; --anchor: #3d3d3d;
	--fg: black; --fg-2: #4d4d4d; --fg-3: black;

	--n1: red; --n2: #383838; --n3: #383838; --n4: black; --n5: green; --n6: green;
}
.light-theme img[src$=".svg"] { filter: invert(100%); }

/* The Font Family And The Font Size */
body{font-family: "DeJavu Sans Mono", monospace; background: var(--bg); color: var(--fg);}
:root{font-size:14px;}
h5,h6{font-size: 1rem;}
/*#link-preview {font-size: 1rem !important;}
#link-preview :is(h1,h2,h3,h4,h5,h6){font-size:1.2rem !important;}*/

/* Container */
.container {
	max-width: 100ch; padding: 1ch;padding-top: 10px; overflow-wrap:break-word;
    box-sizing: border-box; margin-left: auto; margin-right: auto;
}
.container > * {max-width:100%}

/* Spacing Between Items */
:is(h1,h2,h3,h4,h5,h6,pre,table,p,hr,ul,ol,details) {margin-block: 1rem 0;}
.nav{margin-block:0 .5rem;}
/*#link-preview :is(h1,h2,h3,h4,h5,h6,pre,table,p,hr,ul,ol,details) {margin-top: .5rem;}*/

/* Paragraphs */
p{max-width:100%;}

/* Image And Video */
img, video {max-height: 20rem; max-width:100%;}
p.hero > img {
	aspect-ratio:5/1; object-fit:cover; width: 100%; float: none; max-width: 100%; margin-left:0; border: 1px solid var(--fg-2)
}
.float {
    display: flex; 
    flex-direction: column;
    max-width: 35ch; 
    border: 5px solid var(--bg-2); 
    box-sizing: border-box;
    float: right; clear: right; 
    margin-left: 1ch; 
    margin-top: 1rem;
    /* Speed up rendering by telling the browser this doesn't affect outside layout much */
    contain: layout style; 
}
@media (max-width: 500px) { .float {max-width:100%; float: none; margin-left: 0;} }

#link-preview p:has(> img:only-child, > video:only-child), #link-preview .float{max-width:10rem;}

.light-theme .brighter {filter: grayscale(1) brightness(10);}
.light-bg {background: white;}

/* Image capitons */
p[title]:has(img), a[title], div[title] {
	display: flex;
    flex-direction: column; 
	align-items: flex-start;
	width: min-content;
    border-bottom: none !important;
}
p[title]::after, a[title]::after, div[title]::after{
	content: attr(title);
    background: var(--bg-2);
    padding: 0.2rem;
    font-size: 0.9rem;
}
p[title] > img {max-width:none;}

/* Anchors */
a {color: var(--anchor); text-decoration:none;}
a:hover{text-decoration:underline;}
a::before{content:"["} a::after{content:"]"}
a[href^='http']::before { content: "<"; } a[href^='http']::after { content: ">"; } /* External Links */

/* Headings */
h1,h2,h3,h4,h5,h6{color: var(--fg-3);}
h1{text-transform: uppercase; border-bottom:1px solid var(--fg-2); padding-bottom:0.5rem;}
:is(h1,h2,h3,h4,h5,h6)::before{color:var(--fg-2);}
h1::before {content:"";}
h2::before {content:"# ";}
h3::before {content:"## ";}
h4::before {content:"### ";}
h5::before {content:"#### ";}
h6::before {content:"##### ";}
:is(h2,h3,h4,h5,h6){cursor:pointer;} :is(h2,h3,h4,h5,h6).collapsed::after{content:"..."}

/* Table Of Contents*/
#toc details {margin-block:0.5rem 0;}
#toc summary {font-size:0.9rem; color:var(--fg-2)}
#toc summary::marker{content:"/+/ "} #toc details[open] summary::marker {content:"/-/ "}
#toc hr {margin-top:0.5rem;}
#toc div{margin-top:0.3rem;}
#toc :is(.h2,.h3,.h4,.h5,.h6)::before{content:"- "}
#toc div.h2 { margin-left: 0rem }
#toc div.h3 { margin-left: 2rem }
#toc div.h4 { margin-left: 4rem }
#toc div.h5 { margin-left: 6rem }
#toc div.h6 { margin-left: 8rem }
#link-preview #toc {display: none;}

/* Navigation */
.nav{display:flex; font-size:0.9rem; color:var(--fg-2); margin-top: 0.5rem;}
.nav > a::after{content:""} .nav a::before{content:""}
.nav > a:first-of-type::before{content:"Parent: ";margin-right:0.3rem; display:inline-block}
.nav > a {color:var(--fg-2); text-decoration:underline;}
.nav br{display:none !important;}
/*#link-preview .nav {display:none !important;}*/

/* Math Equation Blocks */
.katex-display, .katex-display .katex {text-align: left !important; overflow-x:auto; overflow-y:hidden;}
.float .katex-display, .float .katex{text-align: center !important;}

/* Code */
pre code {overflow-x:auto; display: block; border: 1px solid var(--fg-2); padding: 0.5rem;}
/*code {background:var(--bg-2);font-size:0.85rem;padding-inline:0.4rem;padding-block:0.1rem;}*/
code {color:lightgreen;}

/* Tables */
table {max-width: 100%; border-collapse: collapse;overflow-x:auto;}
table th {border: 1px solid var(--fg-2);padding: 8px;}
table td {border: 1px solid var(--fg-2);padding: 8px;}

/* Ordered Lists */
ol {padding-left: 0em; list-style-type: none;}
ol > li {counter-increment: step-counter;}
ol > li::before {
	position: relative; color: var(--fg-2); margin-right: 0.5rem;
	content: counter(step-counter, decimal-leading-zero)".";
}

/* Unordered Lists*/
ul {list-style-position: outside;;padding-left:1.35rem;}
ul li::marker {content:"> "; color:var(--fg-2);}
ul ul > li::marker {content:">> "; color:var(--fg-2);}
ul li {padding:0.15rem;}

ul ul {margin-block: 0.5rem 0.5rem;}

ul.clist > li:last-child{border-bottom:none; padding-bottom:0;}
ul.clist > li {margin-top:0.5rem; border-bottom:1px solid var(--fg-2); padding-bottom: 0.5rem;}

/* Media Gallery */
.gallery {
	display: flex !important; flex-wrap: nowrap; border:1px solid var(--fg-2);
	flex-direction:row; max-height: 10rem; overflow: hidden; overflow-x: auto;
	float: none !important; clear:none !important; width: auto !important;
}
.gallery :is(img,video) {height: 10rem; width: auto !important;}
.gallery img:not(:first-child) {margin-left:5px;}

/* Visual Media Images */
.vm-imgs {
	padding-left:0;
    display: flex; flex-direction: row; flex-wrap: wrap;
    text-align: center; position: relative; justify-content: space-evenly;
    margin-bottom: 0rem; margin-left: 0rem; margin-right: 0rem;
}
.vm-imgs > li {padding:0;margin-top:1px;margin-left:0rem;margin-right:0rem;border:1px solid var(--bg); position: relative; overflow: hidden; display: flex;}
.vm-imgs > li > img {border: none; aspect-ratio: 7/10; object-fit: cover; width:100%;}
.vm-imgs > li > br {display: none;}
.vm-imgs > li > a {position: absolute; z-index: 10;top:0;bottom:0; opacity:0 !important; display:block; width: 100%;color:transparent; background: rgba(0,0,0,0.7);}
.vm-imgs > li > a:hover {opacity:1 !important;}
@media (min-width: 440px) {.vm-imgs > li {max-width: 12%}}
@media (max-width: 440px) {.vm-imgs > li {max-width: 24%}}
@media (max-width: 240px) {.vm-imgs > li {max-width: 48%}}

/* Link Preview */
#link-preview {
	position: fixed; width: 400px; max-height: 250px;
	background: var(--bg-2); overflow-y: auto; z-index: 9999; display: none;
	overflow-wrap:break-word; padding:0.5rem; padding-top:0rem;
}

/* Blockquotes */
blockquote {
	margin-left:0; margin-bottom:0; width: 100%; border-left: 2px solid var(--fg-2);
	padding-left: 1rem; display: block;
}

blockquote > *:first-child{margin-top:0.5rem;}
blockquote:is(.warning, .important, .caution, .tip, .note) > *:first-child{margin-top:0.2rem;}
blockquote:is(.warning, .important, .caution, .tip, .note) > p:first-child{display:inline;}

blockquote.warning::before{ content:"WARNING: "; color: var(--yellow); }
blockquote.warning {border-color: var(--yellow);}

blockquote.important::before{ content:"IMPORTANT: "; color: var(--magenta); }
blockquote.important {border-color: var(--magenta);}

blockquote.caution::before{ content:"CAUTION: "; color: var(--red); }
blockquote.caution {border-color: var(--red);}

blockquote.tip::before{ content:"TIP: "; color: var(--lime); }
blockquote.tip {border-color: var(--lime);}

blockquote.note::before{ content:"NOTE: "; color: var(--blue); }
blockquote.note {border-color: var(--blue);}

/* Microblogs */
.mb > p:first-child{color:var(--lime); font-size: 1rem; margin-top:0;}
.mb::before{content:""} .mb {border-color: var(--lime);}
.mb > p:first-child::before{content:""; color: var(--fg-2)} .mb > p:first-child::after{content:""; color: var(--fg-2)}

/* Fade-In And Fade-Out Animations */
#link-preview {animation: fade-in 0.2s ease-out forwards;}
@keyframes fade-in { from {opacity: 0;} to {opacity: 1;} }
#link-preview.fadeOut {animation: fadeOutAnim 0.2s ease forwards !important;}
@keyframes fadeOutAnim { from {opacity: 1;} to {opacity: 0;} }

/* Buttons And Inputs */
button,#search-query{color:var(--fg-2) !important; padding:0.2rem; border:none;max-width:100%; background:var(--bg-2)}
#search-query{display:flex;width:100%;padding:0.3rem;}

/* HR */
hr {border:none;height:1px;border-bottom:1px solid var(--fg-2);}

/* Others */
.header{font-size:0.9rem;}
strong{font-weight: bold;color:var(--fg-3);}
.hidden {display:none !important;}
.invert-colors{filter: invert(100%);}
#search-results > ul > li > div{color:var(--fg-2);font-size:0.9rem; margin-top:0.5rem;}
#search-results > ul > li a{font-size:1rem;}
details{cursor:pointer;}