:root {
	--body: #365919;
	--body-shift: rgba(51, 51, 51, .3);
	--body-alt: #2b2e33;
	--body-text: #fff;
	--body-inverse-text: #000;
	--body-font: 'Roboto', sans-serif;
	
	--h1-font: 'Zilla Slab', serif;
	--h1-size: 2rem;
	--h1-size-big: 3rem;
	--h1-weight: 700;
	--h1-height: 1.2;
	
	--h2-font: var(--h1-font);
	--h2-size: 1.35rem;
	--h2-weight: 400;
	--h2-transform: normal;
	--h2-spacing: .15em;
	
	--content-font: var(--body-font);
	--content-size: 1rem;
	--content-height: 1.4;
	
	--callout: #a1be48;
	--callout-shift: rgba(85, 117, 84, .6);
	--callout-alt: #CFD186;
	--callout-text: #fff;
	
	--focus: #ffa930;
	--focus-shift: rgba(214, 122, 177, .6);
	--focus-alt: #c54405;
}









h1.big {
	font-family: 'Fredoka One', cursive;
}









header#mainheader {
	padding-top: 0;
	padding-bottom: 0;
	height: 8rem;
	
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	
	background-color: transparent;
}

footer#mainfooter {
	background-color: #1b300a;
}
footer#mainfooter a.title h1 {
	font-size: 2rem;
}
footer#mainfooter a.title h2 {
	font-size: .9rem;
}

a.title,
a.title:hover {
	color: #fff;
}

a.title h1,
a.title h2 {
	white-space: nowrap;
	overflow: visible;
}
a.title h1 {
	margin-bottom: .25rem;
}









header#mainheader nav button,
header#mainheader nav a,
header#mainheader nav a:active,
header#mainheader nav a:visited,
footer#mainfooter nav button,
footer#mainfooter nav a,
footer#mainfooter nav a:active,
footer#mainfooter nav a:visited {
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	font-family: var(--h1-font);
}
header#mainheader nav button:hover,
header#mainheader nav a:hover,
footer#mainfooter nav button:hover,
footer#mainfooter nav a:hover {
	color: var(--focus);
}

footer#mainfooter #copyright {
	justify-content: space-between;
	-webkit-justify-content: space-between;
}

footer#mainfooter #copyright .poweredby img {
	display: inline-block;
	height: 1.13rem;
	margin-left: .1rem;
	padding-top: .1em;
}
footer#mainfooter #copyright .poweredby > * {
	vertical-align: middle;
}









.callout {
	--callout-overlay: var(--callout-shift);
}









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

nav.blocknav .callout h1,
nav.blocknav .callout h2 {
	color: var(--callout-text);
	vertical-align: middle;
	font-weight: 700;
	
	margin-bottom: 0;
	
	display: inline-flex;
	display: -webkit-inline-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
}
/*
nav.blocknav .callout:hover h1,
nav.blocknav .callout:hover h2 {
	color: var(--focus);
}
*/

nav.blocknav .callout h1 i.fa-solid,
nav.blocknav .callout h2 i.fa-solid {
	font-size: 1.5rem;
	
	margin-bottom: 0;
}
nav.blocknav .callout .message:last-child {
	margin-left: .5rem;
}
nav.blocknav .callout .message:first-child {
	margin-right: .5rem;
}









.comiccomponent.swiper {
	margin-top: 0;
}

.comiccomponent.swiper .imageslider {
	--widgetHeight: auto;
	
	color: var(--body-inverse-text);
}

#comic .comiccomponent.swiper .imageslider .itemwrapper {
	min-height: 50vh;
}
#comic .comiccomponent.swiper .imageslider.magnified .itemwrapper {
	height: calc(var(--innerHeight) - 13.5rem);
	max-height: calc(var(--innerHeight) - 13.5rem);
	min-height: calc(var(--innerHeight) - 13.5rem) !important;
}

.comiccomponent.swiper .imageslider .item {
	padding: var(--itemSpacing);
}
.archivemodal .comiccomponent.swiper .imageslider .item {
	padding: 0;
}

.comiccomponent.swiper .imageslider .item > img {
	/*
	--doubleItemSpacing: calc(2 * --itemSpacing);
	--sixSpacing: calc(var(--quadSpacing) + var(--doubleItemSpacing));
	max-width: calc(100vw - var(--sixSpacing));
	*/
	max-width: calc(100vw - 11rem);/* 3rem(2x .item padding) + 8rem(4x --itemSpacing) */
}

.imageslider .item footer.pagemeta {
	
}

.comiccomponent.swiper .imageslider .item footer.pagemeta .pagedata .pagetitle {
	font-weight: 700;
}

#comic .comiccomponent.swiper .item .loader .spinner {
	--border: #000;
	--border-shift: rgba(0, 0, 0, 0.2);
}









#comicblog {
	background-color: #f6e3d2;
	color: var(--body-inverse-text);
}
#comicblog .loader .spinner {
	--border: #000;
	--border-shift: rgba(0, 0, 0, 0.2);
}