:root {
	/* Images */

	/*Put your entire header background image CSS here */
	--header-background: url(https://s3am0th1skies.neocities.org/images/blogbanner.png) center no-repeat;

	/*Hamburger menu icons*/
	--burgericon: url(/assets/burger.svg); /* Path to burger vector */
	--closeicon: url(/assets/close.svg); /* Path to close vector */

	/*Fonts*/
	--body-font: "Bree Serif"; /* Body text font */
	--header-font: "Spicy Rice"; /* Font for headers */

	/* Colors */
	/* If you want a transparent background for any element, set the value to none */

	--background: url(https://s3am0th1skies.neocities.org/purplestars.gif); /*Main background color*/
	--textcolor: #210038; /*Body text color*/

	--mainbg: linear-gradient(
		180deg,
		#f9f0ff,
		#f7eeff,
		#f4ecff,
		#f1eaff,
		#eee8ff,
		#eae6ff,
		#e7e5ff,
		#e3e3ff
	); /*Content background color*/
	--mainlink: #4700a5; /*Content link color*/
	--mainlinkhover: #5d1d5f; /*Content link hover color*/
	--borders: #210038;
	/*Header text colors*/
	--h1color: #210038;
	--h2color: #210038;
	--h3color: #210038;
	--h4color: #210038;

	--navbg: linear-gradient(
		180deg,
		#f9f0ff,
		#f7eeff,
		#f4ecff,
		#f1eaff,
		#eee8ff,
		#eae6ff,
		#e7e5ff,
		#e3e3ff
	); /*Content background color*/
	--navheader: #210038; /*Sidebar header color*/
	--navborder: none; /*If you don't want a border under the headers in the menu, change this to none*/

	--navlink: #ffffff; /*Sidebar link color*/
	--navlinkbg: linear-gradient(
		180deg,
		#aa90f0,
		#a484ea,
		#9e77e4,
		#996add,
		#945dd6,
		#9050cf,
		#8b41c7,
		#8730bf
	); /*Menu link background*/
	--navlinkhover: #fff; /*Sidebar link hover color*/
	--navlinkbghover: #5d1d5f; /*Sidebar link hover background*/
	--navcolor: #ffffff; /*Color of hamburger menu icon*/

	--formbg: #ebebeb; /*Form element background*/
	--formtext: #666; /*Form element text color*/

	--overlay: rgb(0, 0, 0, 0.5); /*Overlay when hamburger menu is open*/
}

.bree-serif-regular {
	font-family: "Bree Serif", serif;
	font-weight: 400;
	font-style: normal;
}

.spicy-rice-regular {
	font-family: "Spicy Rice", serif;
	font-weight: 400;
	font-style: normal;
}

* {
	margin: 0;
	padding: 0;
}

body {
	background: var(--background);
	color: var(--textcolor);
	font: 1rem var(--body-font);
}

#container {
	max-width: 850px;
	padding: 10px;
	margin: 25px auto;
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

#main-header {
	height: 222px;
	flex: 1 0 100%;
	background: var(--header-background);
	background-size: cover;
	border-width: 5px;
	border-radius: 20px;
	border: 3px solid #3c1e74;
	box-shadow: 0px 0px 12px 0px #ffffff;
}

hr.rounded {
	border-top: 4px solid #210038;
	margin-top: 8px;
	margin-bottom: 8px;
	border-radius: 5px;
}

article {
	padding: 20px;
	background: var(--mainbg);
	flex: 1 1 calc(70% - 45px);
	border-width: 5px;
	border-radius: 20px;
	border: 3px solid #3c1e74;
	box-shadow: 0px 0px 12px 0px #ffffff;
}

main {
	padding: 20px;
	background: var(--mainbg);
	flex: 1 1 calc(70% - 45px);
	border-width: 5px;
	border-radius: 20px;
	border: 3px solid #3c1e74;
	box-shadow: 0px 0px 12px 0px #ffffff;
}

main a {
	color: var(--mainlink);
}

main a:hover,
main a:focus {
	color: var(--mainlinkhover);
}

main p {
	margin: 0.5em 0px 0.5em 0px;
	line-height: 1.5;
}

main h1 {
	font: 2em var(--header-font);
	color: var(--h1color);
}

main h2 {
	font: 1.7em var(--header-font);
	color: var(--h2color);
}

main h3 {
	font: 1.4em var(--header-font);
	color: var(--h3color);
}

main h4 {
	font: 0.9em var(--header-font);
	font-style: italic;
}

main ul {
	list-style: inside;
}

main ul li ul {
	margin-left: 15px;
}

main input,
textarea,
select,
button {
	background: var(--formbg);
	color: var(--formtext);
	border: 1px solid;
	font: 1em var(--body-font);
	padding: 5px;
	margin: 5px;
	align-content: center;
}

#sidebar {
	flex: 1 1 20%;
}

.item {
	padding: 8px;
	background: var(--navbg);
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
	margin-bottom: 5px;
	height: max-content;
	border-width: 5px;
	border-radius: 20px;
	border: 3px solid #3c1e74;
	box-shadow: 0px 0px 12px 0px #ffffff;
}

.menu h2 {
	font: 1.5rem var(--header-font);
	border-bottom: 1px solid var(--navborder);
	color: var(--navheader);
	text-align: center;
}

.menu ul {
	list-style: none;
	display: inline;
	margin: 0;
}

.menu ul li {
	display: block;
}

.menu a {
	display: block;
	text-decoration: none;
	padding: 7px;
	color: var(--navlink);
	background: var(--navlinkbg);
	font: 1rem var(--body-font);
	margin: 4px 0px 6px 0px;
	text-decoration: none;
	text-align: center;
	border-radius: 20px;
	border: 3px solid #3c1e74;
	box-shadow: 0px 0px 12px 0px #ffffff;
}

.menu a:hover,
.menu a:focus {
	color: var(--navlinkhover);
	background: var(--navlinkbghover);
}

footer {
	background: var(--mainbg);
	padding: 15px;
	padding-block-start: 1rem;
	border-block: var(--line);
	font-size: var(--meta-font-size);
	[rel="return"]::before {
		content: "\2191 \a0"; /* up arrow + non-breaking space */
	}
	text-align: center;
	flex: 1 0 calc(100% - 30px);
	border-width: 5px;
	border-radius: 20px;
	border: 3px solid #3c1e74;
	box-shadow: 0px 0px 12px 0px #ffffff;
}

#contact-links {
	& > li:not(:last-child)::after {
		content: "\a0 |\a0"; /* non-breaking space + pipe + non-breaking space */
	}
}

img {
	display: block;
	margin-inline: auto;
	height: 38%;
	width: auto;
	object-fit: cover;
}
figure {
	margin-inline: var(--gap);
}
figcaption {
	text-align: center;
	blockquote + &::before {
		content: "\2014 \a0"; /* em dash + non-breaking space */
	}
}
.gallery {
	--gallery-cols: 1;
	display: grid;
	grid-template-columns: repeat(var(--gallery-cols), 1fr);
	gap: calc(2rem / var(--gallery-cols));
	padding-left: 0;
	list-style-type: "";
	&:has(:nth-child(2)) {
		--gallery-cols: 2;
	}
	&:has(:nth-child(5)) {
		--gallery-cols: 3;
	}
	&:has(:nth-child(10)) {
		--gallery-cols: 4;
	}
}
iframe {
	max-inline-size: 100%;
	display: block;
	margin-block: 1rem;
	border: var(--line);
}

#post-tags {
	margin-block: 0;
	& > li:not(:last-child)::after {
		content: ",\a0"; /* comma + non-breaking space */
	}
	a::before {
		content: "#";
	}
}
#post-nav > ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
	padding-inline-start: 0;
	list-style-type: "";
	& > :first-child > a::before {
		content: "\2190 \a0"; /* left arrow + non-breaking space */
	}
	& > :last-child {
		text-align: right;
		a::after {
			content: "\2192 \a0"; /* right arrow + non-breaking space */
		}
	}
}
/* POST LISTS */

.post-list {
	padding-inline-start: var(--gap);
	list-style-type: "";
	text-indent: calc(-1 * var(--gap));
	font-size: var(--interface-font-size);
}
#tag-index {
	padding-inline-start: 0;
	list-style-type: "";
	details {
		margin-block: 0;
	}
	[open] {
		margin-block-end: 1rem;
	}
	summary {
		font-size: var(--interface-font-size);
	}
}
/* Burger menu styles */

#burger {
	display: none;
	width: 100%;
	position: fixed;
	top: 0;
}

#burger summary {
	list-style-type: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	color: var(--background);
	padding: 5px;
	background: var(--background);
}

#burger summary::before,
#burger[open] > summary::before {
	height: 40px;
	width: 40px;
	background: var(--navcolor);
}

#burger summary::-webkit-details-marker {
	display: none;
}

#burger summary::before {
	content: "";
	mask-image: var(--burgericon);
	-webkit-mask-image: var(--burgericon);
	mask-size: 40px;
	-webkit-mask-size: 40px;
}

#burger[open] > summary::before {
	content: "";
	mask-image: var(--closeicon);
	-webkit-mask-image: var(--closeicon);
	mask-size: 40px;
	-webkit-mask-size: 40px;
}

#burger[open] {
	position: fixed;
	background: var(--overlay);
}

.skip a {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip a:focus {
	position: static;
	width: auto;
	height: auto;
}

#burger-menu {
	height: 100vh;
	overflow: auto;
	z-index: 1000;
	background: var(--navbg);
	width: 200px;
}

#burger-menu .item {
	margin: 0;
	padding: 10px;
}

/* Skip to content button */
#skip a {
	position: absolute;
	display: inline-block;
	left: 0px;
	top: -1000px;
	overflow: hidden;
	transition: top 0.5s ease;
	background: var(--mainbg);
	color: var(--mainlink);
	z-index: 1001;
	padding: 5px;
}

#skip a:focus {
	top: 0;
	transition: top 0.5s ease;
}

@media screen and (max-width: 600px) {
	main {
		flex-basis: 100%;
	}

	#sidebar {
		display: none;
	}

	#burger {
		display: block;
	}

	footer {
		margin-top: 0px;
	}
}