/* local font, this gets preloaded in header */

@font-face {
	font-family: "NolnirFont";
	src:
		url("/assets/nolnirfont.woff") format("woff"),
		url("/assets/nolnirfont.woff2") format("woff2"),
		url("/assets/nolnirfont.ttf") format("truetype"),
		url("/assets/nolnirfont.otf") format("opentype"),
		url("/assets/nolnirfont.svg") format("svg");
}

	/* color variables */

:root {
	--bg: #945bc3;
	--contentbg: #f4e2d6;
	--contentShadowFirst: rgba(148,91,195, 0.3);
	--contentShadowSecond: rgba(244,226,214, 0.4);
	--font-color: #371854;
	--font: 'Fredoka',  sans-serif;
	--header: 'Fredoka One', sans-serif;
	--nolnirfont: 'NolnirFont', sans-serif;
	--scrollbar: #f4e2d6;
	--pink: #ff79b4;
	--blue: #371854;
	--purple: #945bc3;
	--white: #f4e2d6;
	--black: #1a1320;
	--drkpurple: #371854;
	--whitetxtalt: #1a1320;
	--socialsbg: #79daff;
	--smooth: all .2s ease-in-out;
	--blkbuttonbg: #1a1320;
	--blkbuttontxt: #f4e2d6;
	--overlaybg: rgb(244,226,214);
	--landinglogo: #f4e2d6;
	--landingbtnone: #ff79b4;
	--landingbtntwo: #371854;
	--landingbtnfont: #f4e2d6;
	--landingfontcolor: #f4e2d6;
	--landingbgcolor: #945bc3;
	--roundedge: 10px;
	--intermediaryGradientColor: #7b22c5;
}

	/* color variable variants for dark mode */

.darkmode {
	--contentbg: #1a1320;
	--contentShadowFirst: rgba(55,24,84, 0.3);
	--contentShadowSecond: rgba(26,19,32, 0.4);
	--font-color: #f4e2d6;
	--socialsbg: #f4e2d6;
	--logo: /assets/logoalt.png;
	--logoalt: /assets/logo.png;
	--blue: #79daff;
	--bg: #371854;
	--blkbuttonbg: #f4e2d6;
	--blkbuttontxt: #1a1320;
	--scrollbar: #1a1320;
	--whitetxtalt: #f4e2d6;
	--overlaybg: rgb(26,19,32);
	--landinglogo: #f4e2d6;
	--landingbtnone: #ff79b4;
	--landingbtntwo: #945bc3;
	--landingbtnfont: #1a1320;
	--landingfontcolor: #f4e2d6;
	--landingbgcolor: #1a1320;
	--intermediaryGradientColor: #7b22c5;
	/* images with these classes swap in dark mode */
	img.lightmode {display: none;}
	img.darkmode {display: block;}

}
	/* animations */

@keyframes fadeIn  {
	/* page fade in animation to ease page transitions */
	from  {opacity:  0;}
	to  {opacity:  1;}
}

@keyframes slideUp {
	/* slide in animation for landing link carousel */
	from{bottom: -10vh; }
	to {bottom: 2vh;}
}

@keyframes slideDown {
	/* slide down animation for landing dark mode button */
	from {top: -10vh;}
	to {top: 2vh;}
}

@keyframes fadeOut {
	/* loading screen animation */
	from {
		z-index: 100;
		opacity: 1;
		display: block;
	}
	to {
		z-index: -10;
		opacity: 0;
		display: none;
	}
}

@keyframes loadingBar {
	/* loading bar on loading screen*/
	0% {transform: scale(1, 1)}
	15% {transform: scale(0.5, 1)}
	20% {transform: scale(0, 1)}
	25% {transform: scale(0.5, 1)}
	30% {transform: scale(1, 1)}
	45% {transform: scale(0.5, 1)}
	50% {transform: scale(0, 1)}
	55% {transform: scale(0.5, 1)}
	60% {transform: scale(1, 1)}
}

@keyframes enableScroll {
	/* enable scroll after loading screen goes away */
	from {
		overflow-y: hidden;
		overflow-x: hidden;
	}
	to {
		overflow-y: auto;
		overflow-x: hidden;
	}
}

	/* begin basic definitions */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


html {
	min-height: 100vh;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar) var(--bg);
	/* safari fallback*/
	&::-webkit-scrollbar-thumb {
		background-color: var(--scrollbar);
		border-radius: var(--roundedge);
	}
	&::-webkit-scrollbar-track {
		background-color: transparent;
	}
}

body {
	font-size: 1.2rem;
	font-family: var(--font);
	margin: 0 auto;
	color: var(--font-color);
	border-color: var(--font-color);
	scrollbar-gutter: stable both-edges;
}

.particles-js-canvas-el {
	position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
}

	/* loading screen on page load */ 

.loadingScreen {
	background-color: var(--landingbgcolor);
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	color: var(--white);
	margin: 0 auto;
	text-align: center;
	align-content: space-around;
	animation: 600ms ease-in-out 1s 1 forwards fadeOut;
	z-index: 100000;
	position: fixed;
	top: 0;
	left: 0;
}

.allowScroll {
	/* class with animation for enabling scroll after loading */
	overflow-y: hidden;
	overflow-x: hidden;
	animation: 1ms ease-in-out 1s forwards enableScroll;
}

.disallowScroll {
	/* fix for modal over overlay menu mishap */
	overflow-y:hidden;
}

.scrollOk {
	/* replacement for allowScroll without animation */
	overflow-y: auto;
}

.loadingBar {
	color: var(--white);
	transform-origin: center;
	animation: 1s ease-in-out 0ms 10 forwards loadingBar;
	h1 {
		font-weight: bold;
		letter-spacing: 0;
		line-height: 0;
		margin: 0 auto;
		padding: 2rem 0;
	}
}

div, section, aside, article {
	scrollbar-color: var(--purple) transparent;
	/* safari fallback*/
	&::-webkit-scrollbar-thumb {
		background-color: var(--purple);
	}
}

video {
	margin: auto;
	width: 100%;
	height: auto;
}

.aspectratio {
	aspect-ratio: 16 / 9;
	width: 100%;
	padding: .5rem 1rem;
	margin: auto;
}

.landingbg {
	background-color: var(--landingbgcolor);
	color: var(--landingfontcolor);
	overflow-y: hidden;
}

.landingwrapper {
	/* wrapper for a smoother landing page animation */
	width: 100%;
	height: 100vh;
	opacity: 0; /* starting frame */
	animation: 400ms ease-in-out 1600ms 1 forwards fadeIn;
}

.websitebg {
	background-color: var(--bg);
}

@counter-style starry{
	system: cyclic;
	symbols: "✦";
	suffix: " ";
}

li {
	display: list-item;
	list-style: starry;
	a {
			font-weight: bold;
			&::before {content: "[";}
			&::after {content: "]";}
	}
}

p {
	a {
		font-weight: bold;
		&::before {content: "[";}
		&::after {content: "]";}
	}
}


a {
	cursor: grab;
	color: var(--pink);
	text-decoration: none;
	&:hover {color: var(--blue);}

	/* fix to remove brackets from button links */
	&.readMore {
		&::before{content:"";}
		&::after{content:"";}
	}
}

.nolnirfont {
	font-family: var(--nolnirfont);
	overflow-y: hidden;
}

.logoheader {
	font-size: 8rem;
	line-height: .3;
	letter-spacing: 0;
}

.pageheader {
	&::before {content: '✦';}
	&::after {content: '✦';}
	margin-bottom: 1rem;
}
	/* tab specific cycling 1, 2, 3, 4*/

.tab:nth-of-type(4n + 1) {
	.pageheader:nth-of-type(4n + 2) {text-align: left; color: var(--pink);}
	.pageheader:nth-of-type(4n + 3) {text-align: right; color: var(--purple);}
	.pageheader:nth-of-type(4n + 4) {text-align: left; color: var(--blue);}
	.pageheader:nth-of-type(4n + 1) {text-align: right; color: var(--whitetxtalt);}
}

.tab:nth-of-type(4n + 2) {
	.pageheader:nth-of-type(4n + 1) {text-align: left; color: var(--pink);}
	.pageheader:nth-of-type(4n + 2) {text-align: right; color: var(--purple);}
	.pageheader:nth-of-type(4n + 3) {text-align: left; color: var(--blue);}
	.pageheader:nth-of-type(4n + 4) {text-align: right; color: var(--whitetxtalt);}
}

.tab:nth-of-type(4n + 3) {
	.pageheader:nth-of-type(4n + 4) {text-align: left; color: var(--pink);}
	.pageheader:nth-of-type(4n + 1) {text-align: right; color: var(--purple);}
	.pageheader:nth-of-type(4n + 2) {text-align: left; color: var(--blue);}
	.pageheader:nth-of-type(4n + 3) {text-align: right; color: var(--whitetxtalt);}
}

.tab:nth-of-type(4n + 4) {
	.pageheader:nth-of-type(4n + 3) {text-align: left; color: var(--pink);}
	.pageheader:nth-of-type(4n + 4) {text-align: right; color: var(--purple);}
	.pageheader:nth-of-type(4n + 1) {text-align: left; color: var(--blue);}
	.pageheader:nth-of-type(4n + 2) {text-align: right; color: var(--whitetxtalt);}
}

.articleheader {
	&::before {content: '✦';}
}

h1, h2, h3, h4, h5 {
	text-transform: uppercase;
	margin: .2rem auto;
	font-family: var(--header);
}

h1 {
	font-size:  calc(3.3rem - .3vw);
	letter-spacing: .7vw;
}

h2 {
	font-size: calc(3rem - .1vw);
	letter-spacing: 1vw;
}

h3 {
	font-size:  calc(2.5rem - .1vw);
	letter-spacing: .5vw;
}

h4 {
	font-size: calc(2rem - .1vw);
	letter-spacing: .5vw;
}

h5 {
	font-size: calc(1.3rem - .1vw);
	letter-spacing: .3vw;
}

img {
	width: 100%;
	height: auto;
}

/* swap images on lightmode vs darkmode */
img.lightmode {display: block;}
img.darkmode {display: none;}

hr {
	width: 25%;
	text-align: center;
	border-bottom: .2rem dashed var(--font-color);
	border-top: 0;
	border-left: 0;
	border-right: 0;
	padding: 0;
	margin-bottom: 1rem;
}

 	/* animation easing */

.nolnir, button, a, img, .openbtn, #scrolltotop, 
#scrolltotop i, .mailpoet_submit,
input[type=submit], option, select{
	-webkit-transition:  var(--smooth);
	-moz-transition:  var(--smooth);
	-o-transition:  var(--smooth);
	-ms-transition:  var(--smooth);
	transition:  var(--smooth);

}

	/* scroll to top */

#scrolltotop  {
	position: fixed;
	padding: 0;
	right: 3vw;
	bottom: -10vh;
	z-index: 1;
	font-size: 3rem;
	background-color: transparent;
	color: var(--fontcolor);
	transition: bottom 400ms 50ms ease-in-out;
	&:hover {filter: drop-shadow(5px 5px var(--pink));}
	i {
		&:hover {
			color: var(--font-color);
			filter: drop-shadow(5px 5px var(--purple));
		}
	}
}

	/*dark mode toggle */
#switch:hover {
	cursor: grab;
}

	/* font color classes */

.blue {
	color: var(--blue);
	border-color: var(--blue);
	a { &:hover {color: var(--purple)}}
}

.pink {
	color: var(--pink);
	border-color: var(--pink);
	a { &:hover {color: var(--whitetxtalt)}}
}

.purple {
	color: var(--purple);
	border-color: var(--purple);
	a { &:hover {color: var(--blue)}}
}

.white {
	color: var(--whitetxtalt);
	border-color: var(--whitetxtalt);
	a { &:hover {color: var(--pink)}}
}

	/* content boxes, rows and columns */

.content {
	background-color: var(--contentbg);
	border-right: .7rem solid var(--contentShadowFirst);
	border-left: .7rem solid var(--contentShadowFirst);
	outline: .7rem solid var(--contentShadowSecond);
	margin: auto;
	padding: 1rem;
	min-height: 100vh;
	height: auto;
	width: 70%;
}

.page {
	margin: 2rem auto 0;
}


.column {
	width: 50%;
	float: left;
	margin: 0 auto;
	padding: 1rem;
	&.imgwrapper {float: none;}
}

.row {
	width: 100%;
	margin: .5rem auto 1rem;
	display: inline-flex;

	li {
		&.affilibtn{
			display: inline-block;
			padding: .5rem;
			border-radius: 100%;
			button {width: 100%;}
			/*fix for p and li before and after brackets*/
			a {
				&::before{content:"";}
				&::after{content:"";}
			}
		}
		&.abtbtn{
			display: inline-block;
			padding: .5rem;
			margin: auto;
			width: 25%;
			button {width: 100%;}
			/*fix for p and li before and after brackets*/
			a {
				&::before{content:"";}
				&::after{content:"";}
			}
		}
		&.landingbtn{
			display: inline-block;
			padding: 0 .5rem;
			margin: auto;
			width: 50%;
			button {width: 100%;}
			/*fix for p and li before and after brackets*/
			a {
				&::before{content:"";}
				&::after{content:"";}
			}
		}
	}
}

		/* sorting for homepage news articles */
.newsArticles, .websiteHistory, .aboutPageSections {
	margin: 1rem auto;
	.column {
		width: 50%;
		float: none;
	}
	/* set to be a flex container so that it can be aligned for alternating articles */
	hr {display:inline-flex;}
	&.row{
		/* reverse direction for odd numbered articles*/
		&:nth-of-type(odd) {flex-direction: row-reverse;}
		&:nth-of-type(even) {
			.articleColumn, .column {
				/* flex containers will auto align based on missing space, so this right aligns it */
				hr{margin-left: auto;}
				text-align: right;}
		}
	}
}
.articleColumn {
	align-content: space-around;
	.row {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	/* fix for homepage news readmore button - centering it */
}
.articleWrapper {
	width: 50%;
	margin: 0 auto;
	.logcradlepage {
		aspect-ratio: 1;
		width: 3rem;
	}
	.row {justify-content: space-evenly;}
}

.archiveRow {display: flex; flex-wrap: wrap;}
.archiveWrapper {
	display: flex;
	flex-direction: column;
	text-align: center;
	width: 33.3%;
	padding: .5rem;
	margin-bottom: 1rem;
	.imgwrapper {
		overflow: hidden;
		img {
			width: 20rem;
			aspect-ratio: 1;
			object-fit: cover;
			filter: drop-shadow(0px 0px transparent);
			transform: scale(1.5);
			object-position: 50% 50%;
			&:hover {transform: scale(1.6);}
		}
	}
}

.articleNaveRow {
	width: 100%;
	margin: .5rem auto 1rem;
	display: inline-block;
}


.newsArticles, .archiveWrapper {

	&:nth-of-type(4n + 1) {

		a {
			.articleheader {
				&:hover {color: var(--whitetxtalt)}
			}
		}

		.articleheader, h4, h5, hr {
			color: var(--pink);
			border-color: var(--pink);
		}

		.readMoreButton, .archiveReadMore button {
			background-color: var(--pink);
			color: var(--contentbg);
			&:hover {
				background-color: var(--contentbg);
				border-color: var(--pink);
				color: var(--pink);
				filter: drop-shadow(5px 5px var(--pink));
			}
		}
	}
	/* first of a 4 cycle */
	&:nth-of-type(4n + 2) {

		a {
			.articleheader {
				&:hover {color: var(--blue)}
			}
		}

		.articleheader, h4, h5, hr {
			color: var(--purple);
			border-color: var(--purple);
		}

		.readMoreButton, .archiveReadMore button {
			background-color: var(--purple);
			color: var(--contentbg);
			&:hover {
				background-color: var(--contentbg);
				border-color: var(--purple);
				color: var(--purple);
				filter: drop-shadow(5px 5px var(--purple));
			}
		}
	}
	/* second of a 4 cycle */
	&:nth-of-type(4n + 3) {

		a {
			.articleheader {
				&:hover {color: var(--purple)}
			}
		}
		.articleheader, h4, h5, hr {
			color: var(--blue);
			border-color: var(--blue);
		}

		.readMoreButton, .archiveReadMore button {
			background-color: var(--blue);
			color: var(--contentbg);
			&:hover {
				background-color: var(--contentbg);
				border-color: var(--blue);
				color: var(--blue);
				filter: drop-shadow(5px 5px var(--blue));
			}
		}
	}
	/* third of a 4 cycle */
	&:nth-of-type(4n + 4) {

		a {
			.articleheader {
				&:hover {color: var(--pink)}
			}
		}

		.articleheader, h4, h5, hr {
			color: var(--whitetxtalt);
			border-color: var(--whitetxtalt);
		}
		
		.readMoreButton, .archiveReadMore button {
			background-color: var(--blkbuttonbg);
			color: var(--blkbuttontxt);
			&:hover {
				background-color: var(--blkbuttontxt);
				border-color: var(--blkbuttonbg);
				color: var(--blkbuttonbg);
				filter: drop-shadow(5px 5px var(--blkbuttonbg));
			}
		}
	}
	/* fourth of a 4 cycle */

}

.archiveReadMore {width: 100%; align-content: end;}
.readMoreButton {width: 100%; margin: 0 auto; text-align: center;}

.imgwrapper {
	/* image wrapper to prevent images from getting to big in listings */
	width: 100%;
	max-width: 525px;
	border-radius: 1rem;
	margin: 0 auto;
	text-align: center;
	padding: 0;
	img {
		width: 100%;
		height: auto;
		filter: drop-shadow(5px 5px var(--whitetxtalt));
		border-radius: 1rem;
		object-position: 50% 50%;
		&:hover {transform: scale(1.05);}
	}
}

.abtimgwrapper {
	/* image wrapper for the about page images */
	width: 100%;
	height: 100%;
	max-width: 525px;
	margin: 0 auto;
}

.workimgwrapper {
	/* image wrapper to prevent images from getting to big in works listings */
	overflow: hidden;
	width: 80%;
	aspect-ratio: 16/9;
	margin: 0 auto;
	img {
		width: 100%;
		height: 100%;
		aspect-ratio: 16/9;
		object-fit: cover;
		object-position: 50% 50%;
		&:hover {
			transform: scale(1.2);
		}
	}}

.affiliate {
/* code to help with organizing affiliate profile presentation */
	h4 {margin-bottom: 1rem;}
	&:nth-of-type(even) {
		flex-direction:row-reverse;
		h4 {text-align: right;}
	}
	&:nth-of-type(4n + 1) {h4 {color: var(--pink)}}
	/* first of a 4 cycle */
	&:nth-of-type(4n + 2) {h4 {color: var(--purple)}}
	/* second of a 4 cycle */
	&:nth-of-type(4n + 3) {h4 {color: var(--blue)}}
	/* third of a 4 cycle */
	&:nth-of-type(4n + 4) {h4 {color: var(--whitetxtalt)}}
	/* fourth of a 4 cycle */
}

.affiliaterow {
	/* sort affiliate link cradle */
	justify-content: center;
}

.affiliateprofile {
	/* help to neatly present profile images for affiliates */
	text-align: center;
	margin: auto;
	max-width: 500px;
	overflow: hidden;
	border-radius: 100%;
	img {
		width: 100%;
		height: 100%;
		object-position: 50% 50%;
		object-fit: cover;
		&:hover {transform: scale(1.2);}
	}	
}


.box {
	border-radius: var(--roundedge);
	background-color: var(--font-color);
	color: var(--contentbg);
	margin: .2rem auto;
	padding: .2rem;
}

.panel  {
	display: none;
}
.hidden {
	display: none;
}
.show {
	display: inline;
}

	/* generic styles for easier content handling */

.alignLeft {text-align: left;}
.alignRight {text-align: right;}
.alignCenter {text-align: center;}
.centerContainer {margin: 0 auto;}
.clearAll {clear: both;}
.flexCenter {align-self: center;}


	/* contact form styles */

label {
	font-weight: bold;
}

form {
	width: 100%;
	font-family:  var(--font);
	margin:.5rem auto 3rem auto;
}
input {
	font-family:  var(--font);
	font-size: 1rem;
	color: var(--white);
	&::placeholder{
		font-family:  var(--font);
		color: var(--form-placeholder);
	}
}

input[type=text], input[type=email] {
	width: 100%;
	background-color: var(--pink);
	padding: .5rem;
	margin:.5rem auto;
	border: .2rem solid var(--pink);
	border-radius: var(--roundedge);
	color: var(--white);
	&:focus {
		background-color: var(--purple);
		border: .2rem solid transparent;
		outline: 0px;
	}
}


input[type=submit], #formsubmitbtn {
	margin: .5rem auto !important;
	background-color: var(--contentbg);
	width: 100%;
	&:disabled {
		filter: opacity(50%);
		&:hover {
			cursor: not-allowed;
			filter: opacity(50%);
		}
	}
}

textarea, select {
	width: 100%;
	font-family:  var(--font);
	font-size: 1rem;
	background-color: var(--pink);
	padding: .5rem;
	border: 0px;
	margin:.5rem auto;
	color: var(--white);
	border: .2rem solid transparent;
	border-radius: var(--roundedge);
	&:focus {
		background-color: var(--purple);
		border: .2rem solid transparent;
		outline: 0px;
	}
	&::placeholder {
		font-family:  var(--font);
		color: var(--form-placeholder);
	}
}

select {
	width: auto;
	margin: 1rem;
}
option {
	border: none;
	&:first-of-type {border-radius: 10px 10px 0 0;}
	&:last-of-type {border-radius: 0 0 10px 10px;}
	&:hover {background-color: var(--pink);}
}

legend {
	font-weight: bold;
	font-size: 1.2rem;
}

fieldset {border: solid transparent 1px;}


	/* character gallery filter */

.filtercontent {
	margin: 1rem auto;
}

.filterrow {
	display: none;
	button {
		width: 30%;
		display: inline-block;
		background-color: var(--pink);
		margin: .3rem;
		color: var(--contentbg);
	}
	button:hover, button.active {
		background-color: var(--contentbg);
		border-color: var(--pink);
		color: var(--pink);
		filter: drop-shadow(5px 5px var(--pink));
	}
}

	/* galleries */

.comiclisting {
	text-align: center;
	margin: 0 auto;
}

.characters {
	width: 100%;
	img {
		height: 10rem;
		width: auto;
		transition: all 100ms 0ms ease-in-out;
		&:hover {transform: scale(0.9);}
	}
}

.secretCharacters {display: none;}


.gallery {margin-top: 1rem;}
.gallerysizer {width: 9.5%;}
.gallerygutter {width: .5%}
.galleryimg {
	/* wrapper to contain images in a neat way */
	border-radius: var(--roundedge);
	width: 9.5%;
	margin-bottom: .5%;
	height: auto;
	transition: all 100ms 0ms ease-in-out;
	&:hover {transform: scale(0.9);}
}

.nsfw {
	filter: blur(10px);
	&:hover {filter: blur(1px);}
}

.comicimgwrapper {
	/* wrapper to contain images in a neat way */
	border-radius: var(--roundedge);
	width: 10rem;
	overflow: hidden;
	text-align: center;
	display: inline-grid;
	margin: .2rem;
	img  {
		width: 100%;
		height: auto;
		object-fit: cover;
		object-position: 50% 50%;
		transition: transform 100ms 0ms ease-in-out;
		&:hover {transform: scale(0.9);}
	}
}

	/* buttons */

button, #formsubmitbtn {
	padding: .1rem .5rem;
	margin: .1rem auto;
	text-align: center;
	border-radius: var(--roundedge);
	border: .2rem solid transparent;
	color: var(--font-color);
	font-size: 1.5rem;
	letter-spacing: .1rem;
	font-family: var(--header);
	text-transform: uppercase;
	&:hover {cursor: grab;}
	a {
	color: inherit;
	&:hover {color: inherit;}
	}
}

.fullwidth {
	width: 80%;
	margin: auto;
}
	
.btnone, #formsubmitbtn {
	background-color: var(--pink);
	color: var(--contentbg);
	&:hover, &.active {
		background-color: var(--contentbg);
		border-color: var(--pink);
		color: var(--pink);
		filter: drop-shadow(5px 5px var(--pink));
	}
}

.btntwo {
	background-color: var(--purple);
	color: var(--contentbg);
	&:hover, &.active {
		background-color: var(--contentbg);
		border-color: var(--purple);
		color: var(--purple);
		filter: drop-shadow(5px 5px var(--purple));
	}
}

.btnthree {
	background-color: var(--blue);
	color: var(--contentbg);
	&:hover, &.active {
		background-color: var(--contentbg);
		border-color: var(--blue);
		color: var(--blue);
		filter: drop-shadow(5px 5px var(--blue));
	}
}

.btnfour {
	background-color: var(--blkbuttonbg);
	color: var(--blkbuttontxt);
	&:hover, &.active {
		background-color: var(--blkbuttontxt);
		border-color: var(--blkbuttonbg);
		color: var(--blkbuttonbg);
		filter: drop-shadow(5px 5px var(--blkbuttonbg));
	}
}

	/* table */

.table {
	width: 100%;
	text-align: left;
	padding: .2rem;
	margin: 1rem auto;
	border-radius: .5rem;
	border: .2rem solid var(--font-color);
}

.clients {
	th {
	font-weight: bold;
	padding: .2rem;
	border-bottom: 0 var(--font-color);
	}
	td {padding: .2rem;}
}

.left {width: 25%;}
.middle {width: 15%;}

.right {
	width: 60%;
	padding-left: .2rem;
}

.end {border-bottom: 0;} 

.begin {
	border-right: 0;
	border-left: 0;
} 

	/* jq modal display */


.signupOverlay {
/* styles to override jquery modal box */
	color: var(--white);
	background: rgba(0,0,0,0.8);
	display: none;
	width: 100vw;
	min-height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 102;
	padding: .5rem 1rem;
	animation: 400ms ease-in-out 0ms 1 forwards fadeIn;
}

.addFlex {
	display: flex;
	flex-direction: column;
}

.modalContainer {
	max-width: 500px;
	width: 100%;
	text-align: center;
	align-content: space-around;
	margin: 0 auto;
}

.modalimgwrapper {
	max-width: 300px;
	width: 80%;
	text-align: center;
	margin: 0 auto;
}

.blocker {z-index: 150 !important;}

.closeSignup {

	color: var(--white);
	font-size: 2rem;
	font-weight: bold;
	cursor: grab;
}

.closerow {
	width: 100%;
	position: relative;
    padding: 2vh 2vw;
}

	/* menu and nav */

.nolnir {
	filter: drop-shadow(5px 5px transparent);
	&:hover {filter: drop-shadow(5px 5px var(--pink));}
	a {
	color: var(--font-color);
		&:hover {
			color: var(--font-color);
			filter: drop-shadow(5px 5px var(--purple));
		}
	}
}

.landingbox {
	margin: 0 auto;
	padding: 0 .5rem;
	width: 60%;
	.row:nth-of-type(odd){
		li:nth-of-type(odd)  {
			button {
				background-color: var(--landingbtnone);
				color: var(--landingbtnfont);
			}
			button:hover, button:active {
				background-color: var(--landingbgcolor);
				border-color: var(--landingbtnone);
				color: var(--landingfontcolor);
				filter: drop-shadow(5px 5px var(--landingbtnone));
			}
		}
		li:nth-of-type(even)  {
			button {
				background-color: var(--landingbtntwo);
				color: var(--landingbtnfont);
			}
			button:hover, button:active {
				background-color: var(--landingbgcolor);
				border-color: var(--landingbtntwo);
				color: var(--landingfontcolor);
				filter: drop-shadow(5px 5px var(--landingbtntwo));
			}
		}
	}
	.row:nth-of-type(even){
		li:nth-of-type(even)  {
			button {
				background-color: var(--landingbtnone);
				color: var(--landingbtnfont);
			}
			button:hover, button:active {
				background-color: var(--landingbgcolor);
				border-color: var(--landingbtnone);
				color: var(--landingfontcolor);
				filter: drop-shadow(5px 5px var(--landingbtnone));
			}
		}
		li:nth-of-type(odd)  {
			button {
				background-color: var(--landingbtntwo);
				color: var(--landingbtnfont);
			}
			button:hover, button:active {
				background-color: var(--landingbgcolor);
				border-color: var(--landingbtntwo);
				color: var(--landingfontcolor);
				filter: drop-shadow(5px 5px var(--landingbtntwo));
			}
		}
	}
}


.landingcarousel {
	text-align: center; 
	height: 100vh;
	align-content: space-around;
	overflow-y: hidden;

}

.landingboxalt {
	display: none;
	text-align: center;
	margin: 0 auto;
	padding: 0 .5rem;
	width: 60%;
	.row {
			li:nth-of-type(odd)  {
			button {
				background-color: var(--landingbtnone);
				color: var(--landingbtnfont);
			}
			button:hover, button:active {
				background-color: var(--landingbgcolor);
				border-color: var(--landingbtnone);
				color: var(--landingfontcolor);
				filter: drop-shadow(5px 5px var(--landingbtnone));
			}
		}
		li:nth-of-type(even)  {
			button {
				background-color: var(--landingbtntwo);
				color: var(--landingbtnfont);
			}
			button:hover, button:active {
				background-color: var(--landingbgcolor);
				border-color: var(--landingbtntwo);
				color: var(--landingfontcolor);
				filter: drop-shadow(5px 5px var(--landingbtntwo));
			}
		}
	}
}

.landingdarkmode {
	position: fixed;
	left: 3vw;
	top: -10vh;
	animation: 400ms ease-in-out 2s 1 forwards slideDown;
	color: var(--landingfontcolor);
	.nolnir a {
		color: var(--landingfontcolor);
		&:hover { color: var(--landingfontcolor);}
	}
}

.nolnirlanding {
	filter: drop-shadow(40px 0px transparent);
	color: var(--landinglogo);
	font-size: calc(50vw - 5vh);
	overflow-y: hidden;
	line-height: .55;
	margin: 0 auto;
	text-align: center;
	&:hover {filter: drop-shadow(-40px 0px var(--pink));}
	a {
		color: var(--landinglogo);
		&:hover {
			color: var(--landinglogo);
			filter: drop-shadow(-40px 0px var(--landingbtntwo));
		}
	}
}

.nolnirlandingalt {
	filter: drop-shadow(0px 0px var(--landingbgcolor));
	&:hover {filter: drop-shadow(0px 0px var(--pink));}
	a {
		color: var(--landinglogo);
		&:hover {
			color: var(--pink);
			filter: drop-shadow(0px 0px var(--blue));
		}
	}
}

.nav {
	position: relative;
	top: .2em;
	margin: auto;
	padding: .2em;
	width: 100%;
	background-color: var(--contentbg);
	a {color: var(--font-color);}
}

.navcolumn {
	margin: auto;
	padding: .5em;
	float: left;
}

.lcol {width: 15%;}
.rcol {width: 15%;}
.cencol {width: 70%;}

.overlay {
	height: 0;
	width: 100%;
	overflow: hidden;
	display: flex;
	position: fixed;
	z-index: 101;
	left: 0;
	top: 0;
	background-color: var(--overlaybg);
	transition: 0.5s;
}

.menu {
	position: absolute;
	overflow-y: scroll;
	overflow-x: hidden;
	scrollbar-width: none;
	margin: 2vh auto 0 3vw;
	a{color: var(--font-color);}
	blockquote{margin: 1.5vh auto;}
}

.closebtn {
	position: absolute;
	top: 2vh;
	right: 1vw;
	color: var(--font-color);
	z-index: 102;
	a {
		color: var(--font-color);
		&:hover{cursor: grab;}
	}
}

.openbtn {
	width: initial;
	&:hover{cursor: grab;}
}

	/* begin footer and socials */

.footer {
	margin: 1em auto 3em;
	padding: .5em;
	background-color: transparent;
}


.landingsocials {
	background-color: transparent;
	width: 100%;
	position: fixed;
	right: 1vw;
	padding: 0 .5rem;
	margin: auto;
	text-align: right;
	bottom: -10vh;
	animation: 400ms ease-in-out 2s 1 forwards slideUp;
	a {
		color: var(--landingfontcolor);
		&:hover{
			color: var(--landingfontcolor);
			filter: drop-shadow(5px 5px var(--pink));
		}
	}
	li {
		display: inline-block;
		padding: 0 .2em;
		margin: auto;
		font-size: 1.2em;
		&:hover {
				display: inline-block;
				margin: auto;
				filter: drop-shadow(5px 5px var(--purple));
		}
	}
}

.socials {
	background-color: transparent;
	width: 100%;
	text-align: right;
	position: absolute;
	right: 1vw;
	bottom: 3vh;
	a {
		color: var(--font-color);
		&:hover{
			color: var(--font-color);
			filter: drop-shadow(5px 5px var(--pink));
		}
	}
	li {
		display: inline-block;
		padding: 0 .2em;
		margin: auto;
		font-size: calc(1em - .3vw);
		&:hover {
				display: inline-block;
				margin: auto;
				filter: drop-shadow(5px 5px var(--purple));
		}
	}
}

.navsocials {
	background-color: transparent;
	width: 100%;
	padding: 1vh .5em 0;
	margin: auto;
	a {
		color: var(--font-color);
		&:hover{
			color: var(--font-color);
			filter: drop-shadow(5px 5px var(--pink));
		}
	}
	li {
		display: inline-block;
		padding: 0 .8vw;
		margin: auto;
		font-size: 1.5em;
		&:hover {
				display: inline-block;
				margin: auto;
				filter: drop-shadow(5px 5px var(--purple));
		}
	}
}

	/* log banners */

.logbtn {
	padding: .7em;
	width: 100%;
	height: 100px;
}

.logcradlepage {
	aspect-ratio: 1;
	width: 3rem;
	margin: 0 0.2rem;
}

#buttons {
	/* for the character filter */ 
	
	button:nth-of-type(4n + 1) {
		background-color: var(--pink);
		color: var(--contentbg);
		&:hover, &.active {
			background-color: var(--contentbg);
			border-color: var(--pink);
			color: var(--pink);
			filter: drop-shadow(5px 5px var(--pink));
		}
	}
	/* first of a 4 cycle */

	button:nth-of-type(4n + 2) {
		background-color: var(--purple);
		color: var(--contentbg);
		&:hover, &.active {
			background-color: var(--contentbg);
			border-color: var(--purple);
			color: var(--purple);
			filter: drop-shadow(5px 5px var(--purple));
		}
	}
	/* second of a 4 cycle */

	button:nth-of-type(4n + 3) {
		background-color: var(--blue);
		color: var(--contentbg);
		&:hover, &.active {
			background-color: var(--contentbg);
			border-color: var(--blue);
			color: var(--blue);
			filter: drop-shadow(5px 5px var(--blue));
		}
	}
	/* third of a 4 cycle */
	
	button:nth-of-type(4n + 4) {
		background-color: var(--blkbuttonbg);
		color: var(--blkbuttontxt);
		&:hover, &.active {
			background-color: var(--blkbuttontxt);
			border-color: var(--blkbuttonbg);
			color: var(--blkbuttonbg);
			filter: drop-shadow(5px 5px var(--blkbuttonbg));
		}
	}
	/* fourth of a 4 cycle */

}



/* for button links */
	a:nth-of-type(4n + 1), li:nth-of-type(4n + 1) {
		button:not(.logbtn), .filterbtn {
			background-color: var(--pink);
			color: var(--contentbg);
			&:hover, &.active {
				background-color: var(--contentbg);
				border-color: var(--pink);
				color: var(--pink);
				filter: drop-shadow(5px 5px var(--pink));
			}
		}
	}
	/* first of a 4 cycle */
	a:nth-of-type(4n + 2), li:nth-of-type(4n + 2) {
		button:not(.logbtn), .filterbtn {
			background-color: var(--purple);
			color: var(--contentbg);
			&:hover, &.active {
				background-color: var(--contentbg);
				border-color: var(--purple);
				color: var(--purple);
				filter: drop-shadow(5px 5px var(--purple));
			}
		}
	}
	/* second of a 4 cycle */
	a:nth-of-type(4n + 3), li:nth-of-type(4n + 3) {
		button:not(.logbtn), .filterbtn {
			background-color: var(--blue);
			color: var(--contentbg);
			&:hover, &.active {
				background-color: var(--contentbg);
				border-color: var(--blue);
				color: var(--blue);
				filter: drop-shadow(5px 5px var(--blue));
			}
		}
	}
	/* third of a 4 cycle */
	a:nth-of-type(4n + 4), li:nth-of-type(4n + 4) {
		button:not(.logbtn), .filterbtn {
			background-color: var(--blkbuttonbg);
			color: var(--blkbuttontxt);
			&:hover, &.active {
				background-color: var(--blkbuttontxt);
				border-color: var(--blkbuttonbg);
				color: var(--blkbuttonbg);
				filter: drop-shadow(5px 5px var(--blkbuttonbg));
			}
		}
	}
	/* fourth of a 4 cycle */

.logbtntxt {
	filter: drop-shadow(5px 5px var(--black));
}

.genlogbtn {
	color: var(--white);
    background-image: url('/assets/placeholder.png');
	background-position: center top;
	&:hover {background-position: right center;}
	h4{
	font-family: 'Sigmar One', sans-serif;
	font-weight: 400;
	font-style: normal;
	}
}

.notelogbtn {
	color: var(--white);
    background-image: url('/assets/placeholder.png');
	background-position: center top;
	&:hover {background-position: right center;}
	h4{
		font-family: 'Madimi One', sans-serif;
		font-weight: 400;
		font-style: normal;
		text-transform: lowercase;
	}
}

.twaiilogbtn {
	color: var(--white);
    background-image: url('/assets/placeholder.png');
	background-position: center top;
	&:hover {background-position: right center;}
	h4{
		font-family: 'Amatic SC', sans-serif;
		font-style: normal;
		letter-spacing: .2rem;
	}
}

.bpdlogbtn {
	color: var(--white);
    background-image: url('/assets/placeholder.png');
	background-position: center top;
	&:hover {background-position: right center;}
	h4, h5, b {
		font-family: 'Gloria Hallelujah', cursive;
		font-style: normal;
		letter-spacing: .2em;
		line-height: 70%;
	}
}

@media only screen and (max-width: 1300px) {
	.content {width: 85%;}
	.updateImage {
		text-align: center;
		img{width: 70%; aspect-ratio: 1;}
	}

				/* sorting for homepage news articles */
	.newsArticles, .websiteHistory, .aboutPageSections  {
		/* set to be a flex container so that it can be aligned for alternating articles */
		hr {display: block;}
		&.row {
			/* reverse direction for odd numbered articles*/
			&:nth-of-type(odd), :not(.contactSection) {
				flex-direction: inherit;
				.articleColumn, .column {
					/* flex containers will auto align based on missing space, so this right aligns it */
					hr{margin-left: 0;}
					text-align: inherit;}
			}
			&:nth-of-type(even), :not(.contactSection) {
				.articleColumn, .column {
					/* flex containers will auto align based on missing space, so this right aligns it */
					hr{margin-left: 0;}
					text-align: inherit;}
			}
			&.contactSection {
				display: flex;
				flex-direction: column-reverse;
			}
		}
		.column {width:100%;}
	}
	.row {display: inline-block; margin: .5rem auto;}
	.column {width: 100%;}
	.row li.abtbtn, .abtbtn {width: 50%;}
	.nolnirlanding {font-size: calc(45vh + 3vw);padding: 0 5%;}
	.articleWrapper {
		width: 80%;
		.row {display: inline-flex;}
	}
	.gallerysizer {width: 24.5%;}
	.galleryimg {width: 24.5%;}
	.panel {display: none;}
	.characters {img {height: 12rem;}}
	.affiliaterow {text-align: center;}
	.closebtn {
		right: 3vw;
	}
	.socials {
		right: 3vw;
	}
}

@media only screen and (max-width: 1000px) {
	.articleWrapper {width: 100%;}
	.column {width: 100%;}
	.row {
		& li {
			&.landingbtn {
				display: block;
				width: 100%;
				margin: 1rem auto;
			}
		}
	}
	.landingbox {display: none;}
	.landingboxalt {display: block;}
	.filtercontent button {width: 40%;}
	.content {width: 95%;}
	.navsocials li, .landingsocials li, .socials li {padding: 0 .1em;}
	button {font-size: 1.3em;}
	.nolnirlanding {font-size: calc(45vh + 2vw);padding: 0 4%;}
	.archiveWrapper {width: 100%;}
	.gallerysizer {width: 33.3%;}
	.gallerygutter {width: 0%;}
	.galleryimg {width: 33.3%;}
	.characters {img {height: 13rem;}}
}

@media only screen and (max-height: 630px) {
	.socials {
		opacity: 0;
		z-index: -100;
	}
}