@font-face{
	font-family:Overpass;
	src:url(https://koji.one/styles/Overpass-VariableFont_wght.ttf);
font-display:swap}

@font-face{
	font-family:Lato;
	src:url(./Lato-Regular.ttf);
font-display:swap}

:root{
	--primary-color:rgba(255,132,0,1);
	--body-gradient-top:rgba(127,63,0,.8);
	--body-gradient-bottom:rgba(63,0,127,.8);
	--secondary-color:rgba(64,28,36,.9);
	--jr-navbar-color:#BE9F8B;
	--tertiary-color:#82D96A;
	--accent-color:#6D7D8D;
	--text-color-dark:#222;
  --text-color-light:#eee}

*{
box-sizing:border-box}

html{
	background-color:var(--primary-color);
	background-image:linear-gradient(to bottom,var(--primary-color),rgba(127,0,64,1),rgba(0,0,20,1));
	font-family:Lato,Arial,Helvetica,sans-serif;
	color:var(--text-color-light);
font-weight: 450}

body{
	width:80%;
	min-width:min(100vw, 400px);
	max-width:90rem;
	margin:0 auto;
	padding:0 0 20px 0;
	border:5px solid #0d0d0d;
	background-color:rgba(63,63,63,.5);
	background-image:linear-gradient(to bottom,var(--body-gradient-top),var(--body-gradient-bottom));
font-family:Lato,Arial,Helvetica,sans-serif}

h1,h2,h3,header,.jr-navbar-title{
	text-align:center;
	font-weight:800;
	margin:0;
	text-transform:lowercase;
	font-family:Overpass,Arial,Helvetica,sans-serif;
	letter-spacing:-1.9px;
color:var(--text-color-light)}

header{
	padding:0 0;
	text-shadow:1px 1px 1px #0d0d0d;
	font-family:"Comic Sans MS",Chalkboard,sans-serif;
	font-size:2rem;
background:var(--tertiary-color)}

h1{
	margin:auto;
	padding:.8rem 0 .8rem 0;
	text-shadow:1px 1px 1px #0d0d0d;
	font-size:1.75rem;
	background-color:var(--accent-color);
	border:4px solid #000;
	border-style:none none solid none;
	width:100%;
text-transform:uppercase}

h2,.jr-navbar-title{
	background-color:transparent;
	padding:1rem 0 .8rem 0;
	text-shadow:1px 2px 1px #0d0d0d;
	font-size:1.75rem;
	width:100%;
font-weight:600}

.jr-navbar-title{
	background-color:var(--accent-color);
	border:none;
letter-spacing:1.9px}

h3{
	display:block;
	font-size:1.5em;
	margin-top:.83em;
	margin-bottom:.83em;
	text-shadow:1px 1px 1px #0d0d0d;
	color:var(--text-color-light);
text-align:left}

h4{
	font-size:1.25em;
}

h2, h3 {
	background-color: var(--text-color-dark);
	border: 2px solid black;
	text-align: left;
padding: 0.5rem}

.edge{
	font-weight:bold;
text-shadow: 2px 2px 2px red}
}

.jr-navbar-title{
	background-color:var(--accent-color);
	padding:1rem 0 .8rem 0;
	text-shadow:1px 2px 1px #0d0d0d;
	font-size:1.5rem;
	width:100%;
	font-weight:600;
	background:var(--accent-color);
	border:none;
	letter-spacing:1.9px;
text-align:center}

.jr-page-title{
background:var(--jr-navbar-color)}

span.spoiler{
	background-color:var(--text-color-dark);
color:var(--text-color-light)}

article,dummy-article{
	padding:.876rem;
	margin:.224rem;
	flex:1 1 536px;
	border:.25rem inset;
	border-color:#9c5f6a;
background-color:var(--secondary-color)}

dummy-article{
	background:0 0;
	border-color:transparent;
	margin-top:0;
	margin-bottom:0;
	padding-top:0;
padding-bottom:0}

section{
	display:flex;
flex-flow:row wrap}

div.article-container{
	display:flex;
flex-flow:row wrap}

footer{
text-align:center}

figure{
	float:none;
	margin:auto;
	border: none;
	max-width:1920px;
	overflow:hidden;
font-weight:550}

figcaption{
	background-color: transparent;
	border: none;
	color: inherit;
	padding:.125rem;
	padding-left:.25rem;
	padding-right:.25rem;
	text-align:center;
	max-width: 1920px;
margin: auto;}

.navbar,.navbar-jr{
	display:flex;
	flex-flow:row wrap;
	text-shadow:1px 0 1px #0d0d0d;
	outline:0;
	text-align:center;
	line-height:2;
background:#0d0d0d}

.navbar-jr{
	background:var(--accent-color);
	gap:4px;
	padding-left:4px;
padding-right:4px}

ul{
line-height:1.5}

a{
color:#0ff}

a:visited{
color:violet}

a.navbar-link, a.navbar-link-yt{
border:2px solid}

a.navbar-jr-link{
	border:5px solid #000;
	border-style:outset;
	flex:1 0;
	background:var(--jr-navbar-button-color);
color:#0d0d0d}

a.navbar-jr-link-noscript{
	border:5px solid #000;
	border-style:outset;
	flex:1 0;
	background:var(--jr-navbar-button-color);
color:#0d0d0d}

a.navbar-link:focus,a.navbar-link:link,a.navbar-link:visited,a.navbar-link-yt:focus,a.navbar-link-yt:link,a.navbar-link-yt:visited{
	flex:1 0;
	background:#f2f2f2;
color:#0d0d0d}

a.navbar-link:hover{
background:#84ddc0}

a.navbar-link-yt{border-right:none}

a.navbar-link-yt:hover{
background:#84ddc0}

current-page, jr-current-page{
	flex:1 0;
	text-decoration:none;
	outline:0;
	text-align:center;
	line-height:2;
	border-color:#7f7f7f;
	background:var(--accent-color);
	border:2px solid #000;
	border-style:solid solid none solid;
color:#000}

jr-current-page{
	background:var(--jr-navbar-color);
border:5px inset}

@keyframes rainbow-gradient{
	0%{
	color:red}
	
	14.3%{
	color:orange}
	
	28.6%{
	color:#ff0}
	
	42.9%{
	color:green}
	
	57.2%{
	color:#00f}
	
	71.5%{
	color:indigo}
	
	85.8%{
	color:violet}
	
	100%{
	color:red}
	
}

.rainbow{
	animation:rainbow-gradient 8s infinite;
	animation-timing-function:steps(12);
	-webkit-animation-timing-function:steps(12);
	text-shadow:2px 0 2px #0d0d0d;
-webkit-text-stroke:1px #000}


@keyframes pulse-fade{
	0%{
	opacity:40%}
	
	50%{
	opacity:80%}
	
	100%{
	opacity:40%}
}



#background-image{
	background-image:url(https://koji.one/img/stars.png);
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	height:100vh;
	width:100%;
	animation:pulse-fade 9s infinite steps(4);
-webkit-animation:pulse-fade 9s infinite steps(4)}

#background-image-lower{
	background-image:linear-gradient(to bottom,var(--primary-color),rgba(127,0,64,1) 75%,rgba(0,0,20,1));
	position:fixed;
	top:0;
	left:0;
	z-index:-2;
	height:101%;
width:100%}

.img-container-spoiler{
	position:relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
min-width: min(100%, 375px)}

img.spoiler{
	filter:blur(1.5rem);
	overflow:hidden;
z-index:-1}

span.spoiler{
	background-color: var(--text-color-dark);
color: var(--text-color-light);}

.click-to-view{
	color:#fff;
	font-size:1.5rem;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	z-index:1;
text-align:center}

.click-to-view-hq{
	color:#fff;
	background-color: black;
	position:absolute;
	bottom:0%;
	right:0%;
	padding: 0.25rem;
	margin: 0;
	z-index:1;
text-align:center}

img{
transition:filter .5s ease-in-out;}

span{
transition:filter .5s ease-in-out}

.invisible{
filter:opacity(0)}

.hidden{
display:none}

	.toc-group {
	  break-inside: avoid;
		margin-bottom: 1rem;
		}