/* Global content, establishing variables */
:root {
	/* These are the default variables, but they can be changed via the theme selector. */
	--slate: #000606; /* black */
	--eggshell: #fff; /* white */
	--spark: rgb(255, 247, 206);
	--hyperlink: rgb(231, 211, 255);
	--sun: url('../images/whitesun.png');
	--clouds: url('../images/brightclouds.png');
	--mountain: url('../images/mountain.png');
	--sky: linear-gradient(#cfc1d4,#93a1a6);
	--glass: linear-gradient(170deg,rgba(207, 130, 195, 0.85) 0%, rgba(78, 0, 62, 0.85) 100%);
	--blackglass: linear-gradient(170deg,rgba(220, 92, 146, 0.85) 0%, rgba(238, 235, 225, 0.85) 100%);
	--glassrefract: rgba(255, 162, 140, 0.25);
	--glassshine: rgba(249, 238, 195, 0.2);
}
*, .container:before {
	box-sizing: border-box; /* very important for spacing */
	transition: transform 0.5s, filter 0.5s, box-shadow 0.5s; /* see animations below */
}
@font-face {
	font-family: "Merriweather";
	src: url("../style/Merriweather-VariableFont_opsz,wdth,wght.ttf") format("truetype");
}
@font-face {
	font-family: "OpenSans";
	src: url("../style/OpenSans-VariableFont_wdth,wght.ttf") format("truetype");
}
@font-face {
	font-family: "CinzelDecorative";
	src: url("../style/CinzelDecorative-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "Alice";
	src: url("../style/Alice-Regular.ttf") format("truetype");
}
@keyframes hover {
	0% {transform:translateY(0px);}
	25% {transform:translateY(-1px);}
	50% {transform:translateY(-2px);}
	75% {transform:translateY(-1px);}
	100% {transform:translateY(0px);}
}
html {
	background-image: var(--clouds), var(--mountain), var(--sky);
	background-size: auto;
	background-position: bottom;
	background-repeat: repeat-x;
	background-attachment: fixed;
}
html, body {
	font-size: 18px;
	font-family: "Merriweather";
	color: var(--eggshell);
	margin: 0;
	width:100%;
}
.sun {
	/* This is a little trick for animating a fixed background image. */
	/* First, create a fixed (not absolute) <div> with nothing in it. */
	position: fixed;
	overflow: hidden;
	width: 100%;
	height: 335px;
	z-index: -1;
	top: 0;
}
.sun:before {
	/* Then, add an animated pseudo-element to the <div> and give it an absolute position. */
	/* The animated image still acts like a background element. */
	position: absolute;
	content: "";
	width: 100%;
	height: 335px;
	background-image: var(--sun);
	animation:hover 5s linear infinite;
	animation-delay: 0.5s;
	background-size: auto;
	background-position: top;
	background-repeat: no-repeat, repeat-x;
	background-attachment: fixed;
	min-height: 100%;
}



/* Theme Selector */
#themeDiv {
	z-index:2; /* Put the selector above everything else, just in case. */
}
#themeselect {
	font-family: "OpenSans";
	width: 120px;
	color: var(--slate);
}

/* Palpable Content */
p, ul {
	margin: 0;
}
p:not(:last-child) {
	margin-bottom: 15px;
}
ul {
	padding: 0;
	display: flex;
	flex-direction: column;
}
ul > ul {
	margin-left: 30px;
}
li {
	text-align: left;
	list-style: none;
}
a {
	font-size: 18px;
	color: var(--spark);
	word-wrap: break-word;
	text-decoration: none;
}
a:hover { 
	color: var(--hyperlink);
}
hr {
	color: var(--eggshell);
}



/* Flow Content > Sectioning Content */
#core {
	/* The total width of the blog. Organizes the layout. */
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 700px;
	margin: auto;
}

nav {
	/* This is the navigation bar, with links to every other section of the site. */
	/* It needs to be in exactly the same place on every page. */
	z-index: 2;
	position: absolute;
	transform: translate(-120px, 0px);
	display: flex;
	gap: 6px;
	top: 4.5em;
}
nav ul {
	gap: 12px;
	justify-content: left;
	position: relative;
	align-items: flex-end;
	transform: translate(0px, 25px);
}
nav li {
	position: relative;
	width: fit-content;
	height: 31px;
	line-height: 29px;
	text-align: right;
	border-radius: 5px 0px 0px 5px;
}
nav a {
	font-size: 17px;
	color:var(--eggshell);
	text-decoration: none;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.7);
	margin-right: 0px;
	display: inline-block;
	padding-left: 8px;
	padding-right: 6px;
	height: 31px;
}
nav a:after {
	content: url('../images/gem.gif');
	padding-left: 6px;
}
#navdecoration {
	width: 20px;
	height: 314px;
	border-radius: 20px 1px 20px 1px;
}

.container {
	/* Containers are the shells that the main blog is constructed from. 
	They contain headers, footers, articles, and subarticles. */
	gap: 18px;
	flex-direction: row;
	display: flex;
}
.container:before {
	/* The actual style of a container is this little bar on the left. */
	content: '';
	height: inherit;
	min-width: 20px;
	margin-right: -13px;
}
.top {
	/* A class of container, specifically the first one on the page. Creates the top margin. */
	margin-top:4.5em;	
}
.top:before {
	border-radius: 0 50px 0 0;
}
.bottom {
	/* A class of container, specifically the last one on the page. Creates the bottom margin. */
	margin-bottom:2.5em;
}
.bottom:before {
	border-radius: 0 0 50px 0;
}
.snipped {
	/* A class of container that fits its width to the content inside. Makes articles "smaller." */
	width: fit-content;
}
.pop {
	/* A class of container that has its own indentation from the rest of the page. */
	margin-left:25px;
}

header {
	/* Headers sit at the top of the page. Assists screen readers. */
	text-align: center;
	padding-top:0;
	border-radius: 20px 20px 20px 0px;
}
article {
	/* Articles are the main content of the blog. They have full margins and paragraph indents. */
	text-indent: 2em;
}
article img {
	text-indent: 0;
	max-width: 625px;
}
article li {
	line-height: 31px;
}
article li:before {
	content: url('../images/gem.gif');
	padding-right: 6px;
}
.subarticle {
	/* A class of article, subarticles remove the text indent. */
	text-indent: 0;
}
.chatter {
	/* A class of article, chatterboxes turn <li> and <a> elements into 88x31 badges. */
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	flex-direction: column;
}
.chatter ul {
	/* Orienting the badges. */
	flex-direction: row;
	gap: 10px;
	flex-wrap: wrap;
	flex-direction: row;
}
.chatter li {
	/* Creating the badges. */
	color: var(--eggshell);
	list-style: none;
	width: fit-content;
	height: 31px;
	line-height: 31px;
}
.chatter img {
	/* Lock everything to 31px tall. */
	height: 31px;
}
.chatter a {
	/* This makes the links line up with 88x31 badges, very important. */
	display: block;
	height: 31px;
}
.chatter li a, .chatter p {
	padding-left: 5px;
	padding-right: 5px;
	display: flex;
	gap: 5px;
}
.chatter li img {
	margin-left: -5px;
}
footer {
	/* Footers sit at the bottom of the page. Not the same thing as #footer, which is a scripted element. */
	border-radius: 0px 20px 20px 20px;
}
article, header, footer, .subarticle, .chatter {
	/* This section cleans up all of the article types and makes them consistent. */
	text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.9);
	line-height: 31px;
}
article, header, footer, .chatter {
	padding:20px;
}
header, footer, .subarticle, .chatter {
	padding-top:10px;
	padding-bottom:10px;
}

@media only screen and (max-width: 965px) {  /* Mobile screen settings. */
	/* Force the navigation bar to the top of the screen and reorganize it. */
	nav {
		position: relative;
		transform: none;
		width: 100%;
		padding: 5px;
		justify-content: center;
	}
	nav > ul {
		transform: none;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		flex-direction: row;
	}
	#navdecoration {
		display: none; 
	}
}

@media only screen and (max-width: 700px) {  /* Mobile screen settings. */	
	/* Force the containers to fill the screen horizontally. */
	#core {
		width:100%;
	}
	.container {
		flex-direction: column;
	}
	.chatter, .pop {
		margin:0;
	}
	.top, .title {
		text-align: center;
	}
	article, header, footer, .subarticle {
		margin-left:0;
	}
	img {
		max-width: 100% !important; /* This is a hacky solution but it's the best I've got rn. */
	}
}



/* Flow Content > Heading Content */
h1, h2, h3, h4, h5 {
	margin: 0;
	line-height: 1em;
	text-indent: 0;
}
h1 {
	font-size: 2.5em;
	padding-bottom: 10px;
	padding-top: 10px;
}
.title h1 {
	font-size: 3em;
}
h2, h3, h4, h5{
	padding-bottom: 10px;
}
.chatter h2, .chatter h3, .chatter h4, .chatter h5 {
	padding: 0;
}
h6 {
	/* Used for <article>s that do not have a header. */
	padding:0;
}



/* Flow Content > Embedded Content */
iframe {
	/* Used for youtube embeds. For some reason auto-sizing does not work on these. */
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border: 0;
}
.videobox {
	/* The container for videos (iframes). You'd be surprised how hard it is to resize them.  */
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}
.videosize {
	/* Used to make sure iframes don't get too wide. */
	max-width: 540px;
}
.separate {
	/* An additional way to display images, separating them from the body of the article. */
	/* Technically, this turns an image into an article. But I don't think that matters much. */
	height: fit-content;
	width: fit-content;
	padding: 10px;
	padding-bottom: 5px; /* this prevents images from being fitted to their drop-shadow. */
}



/* Media tags and syntax classes */
.center {
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
	text-align: center;
}
.right {
	position: relative;
	float: right;
	margin-left: 10px;
	z-index: 1;
}
.left {
	position: relative;
	float: left;
	margin-right: 10px;
	z-index: 1;
}
.small {
	position: relative;
	float:right;
	z-index: 1;
}
@media only screen and (min-width: 700px) { /* Mobile screen settings. */
	/* Move small images move out of the way. */
	.small {
		max-width: 25%;
		height: auto;
	}
}



/* Glass backgrounds */
nav li, article, header, footer, .subarticle, .chatter, .chatter li, .stamp li {
	background-image: var(--glass);
	/* Glass pane effect. */
}
#navdecoration, .container:before, .separate {
	background-image: var(--blackglass);
	/* Glass pane effect, with support for different colors on the sidebars. */
}


/* "Fake" shadows and highlights (performance light) */
nav li, article, header, footer, .subarticle, .chatter, .stamp li, .container:before {
	box-shadow: 3px 4px 2px rgba(0, 0, 0, 0.5), 
				inset 3px 4px 2px var(--glassrefract), 
				inset 0px 1px 0px 0px var(--glassshine), 
				inset -2px -2px 2px 0px rgba(0, 0, 0, 0.25);
	/* Standard shadow. */
}
#navdecoration, .separate {
	box-shadow: 4px 5px 2px rgba(0, 0, 0, 0.45),
				inset 4px 6px 2px var(--glassrefract),
				inset 0px 1px 0px 0px var(--glassshine),
				inset -2px -2px 2px 0px rgba(0, 0, 0, 0.25);
	/* Extended shadow. */
}
#navdecoration:hover, nav li:hover, .separate:hover, .container:hover:before {
	box-shadow: 7px 10.5px 2px rgba(0, 0, 0, 0.45),
				inset 7px 10.5px 2px var(--glassrefract),
				inset 0px 1px 0px 0px var(--glassshine),
				inset -2px -2px 2px 0px rgba(0, 0, 0, 0.25);
	/* Lifted shadow. */
}
article img, .chatter li, .chatter img {
	box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.3),
				inset 2px 3px 2px var(--glassrefract),
				inset 0px 1px 0px 0px var(--glassshine),
				inset -2px -2px 2px 0px rgba(0, 0, 0, 0.25);
	filter: none;
	/* Light shadow (glass on glass). */
}
.chatter li:hover, .chatter img:hover {
	box-shadow: 5px 7.5px 2px rgba(0, 0, 0, 0.3),
				inset 5px 7.5px 2px var(--glassrefract),
				inset 0px 1px 0px 0px var(--glassshine),
				inset -5px -5px 2px 0px rgba(0, 0, 0, 0.05);
	filter: none;
	/* lifted light shadow. */
}



/* Filter-based shadows (performance heavy) */
.separate img, .center, .right, .left, .small {
	filter: drop-shadow(4px 6px 2px rgba(0, 0, 0, 0.4));
	box-shadow: none;
	/* A real filter is used on images to get per-pixel shadows on transparent images. */
}
.right:hover, .left:hover, .small:hover {
	filter: drop-shadow(7px 10.5px 2px rgba(0, 0, 0, 0.3));
	/* It matches the box-shadow shadows pretty well. */
}
article li:before, nav a:after {
	filter: drop-shadow(3px 5px 1px rgba(0, 0, 0, 0.2));
	/* Same thing for bullet points, which can't have text-shadows. */
}



/* Transform animations */
.separate {
	transform: perspective(250px) rotate3d(0, 10, 0, -10deg) translate(-2px, -2px);
	/* Rotated by default. */
}
.chatter li:hover, .separate:hover, .right:hover, .left:hover, .small:hover {
	transform: scale(1.1) perspective(250px) translate(0px, -2px);
	/* Standard animation. */
}
#navdecoration:hover, .container:hover:before {
	transform: translate(-3px, -5px);
	/* Reduced animation. */
}
nav li:hover {
	transform: scale(1.1) perspective(250px) rotate3d(1, 10, 0, 15deg) translate(-2px, -2px);
	/* Strong perspective animation (right). */
}
.chatter img:hover {
	transform: scale(1.1) perspective(250px) rotate3d(2, 10, 0, -15deg) translate(-2px, -2px);
	/* Strong perspective animation (left). */
}
.separate img:hover {
	transform: none; /* Anti-animation technology. */
}



/* Zonelets integration */
#nextprev {
	text-align: center;
}
#postlistdiv ul {
	font-size: 1.2em;
	padding: 0;
	list-style-type: none;
}
#recentpostlistdiv ul {
	font-size: 1.2em;
	margin:0;
	padding: 0;
	list-style-type: none;
}
#disqus_thread {
	margin-top: 1.6em;
}
.moreposts {
}