/******************************************************************************
*
* Font Families
*
* Define custom font families to use with your site!
*
******************************************************************************/

/* Courier Prime Regular */
@font-face {
	font-family: "Courier Prime";
	src: url("/fonts/CourierPrime-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

/* Courier Prime Bold */
@font-face {
	font-family: "Courier Prime";
	src: url("/fonts/CourierPrime-Bold.ttf") format("truetype");
	font-weight: bold;
	font-style: normal;
}

/* Courier Prime Italic */
@font-face {
	font-family: "Courier Prime";
	src: url("/fonts/CourierPrime-Italic.ttf") format("truetype");
	font-weight: normal;
	font-style: italic;
}

/* Courier Prime Bold Italic */
@font-face {
	font-family: "Courier Prime";
	src: url("/fonts/CourierPrime-BoldItalic.ttf") format("truetype");
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: "Jacquarda Bastarda 9";
	src: url("/fonts/JacquardaBastarda9-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Yarndings 12";
	src: url("/fonts/Yarndings12-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

/******************************************************************************
*
* CSS Variables
*
* Tweak the values of these options to change how your site looks!
*
******************************************************************************/

:root {
	--border-width: 5px;
	--border-radius: 5px;

	/* colors */
	--dark-purple: #13092D;
	--pink: #ED64F5;
	--blue: #0d00ff;
	--white: #EEF0ED;
	--dark-yellow: #f0fc05;
	--light-yellow: #fcfc05;
	--dark-red: #ff2200;
	--light-red: #ff0044;

	/* fonts */
	--default-font-size: 12pt;
	--courier-prime: "Courier Prime", monospace;
	--jacquarda: "Jacquarda Bastarda 9", serif;
	--yarndings: "Yarndings 12";

	/* Customization Options */
	--body-bg-image: url("/_img/webimages/background1.png");
	--body-bg-size: 550px;
	--body-bg-color: var(--dark-purple);
	--body-font: var(--courier-prime);
	--body-text-color: var(--pink);

	--navbar-border-color: var(--dark-yellow);

	--sidebar-width: 240px;
	--sidebar-border-color: var(--blue);

	--main-content-height: 570px;
	--main-border-color: var(--dark-yellow);

	--footer-border-color: var(--dark-yellow);
}


/******************************************************************************
*
* Styles for generic HTML elements
*
******************************************************************************/

a {
	color: var(--pink);
	font-weight: bold;
}

h1 {
	color: var(--pink);
	font-size: 1.618rem;
}

h2, h3 {
	color: var(--dark-yellow);
}

strong {
	color: var(--blue);
}


/******************************************************************************
*
* Helper Classes
*
* If I find myself applying the same single rule to a lot of classes, I'll
* create a "helper" class that you can slap in the classlist for any element.
* Here, for example, I've created a helper class that easily sets an
* element's width to 100% called 'w-100'.
*
******************************************************************************/

.w-100 {
	width: 100%;
}

.mt-0 {
	margin-top: 0!important;
}

.mb-0 {
	margin-bottom: 0!important;
}

.tal {
	text-align: left;
}

.tac {
	text-align: center;
}

.tar {
	text-align: right;
}

.yellow {
	color: var(--dark-yellow);
}

.border-box {
	box-sizing: border-box;
}


/******************************************************************************
*
* Classes for special items
*
* One object that's often re-used is the star divider, which is basically a
* div with two of the same image in it, used for separating sections in
* articles.
*
******************************************************************************/

.stardiv {
	display: flex;
	flex-direction: row;
	justify-content: center;

	width: 100%;

	margin: 2rem 0;

	overflow: hidden;

	text-align: center;
}

.stardiv img {
	width: 400px;
	min-width: 400px;
	max-width: 400px;
}

.stardiv img:nth-of-type(2) {
	/* hardcoded offset to make the repeating pattern look right */
	margin-left: 12px;
}

/* first line indent makes blog posts look a bit nicer */
/* use with <p class="indent"></p> */
p.indent {
	text-indent: 1rem;
}

/* These boxes are used on the "more about me" and "status" pages */
.pinkbox {
	background-color: #fce8ef;
	border: 2px solid var(--dark-yellow);
}

.yellowbox {
	background-color: #fcf9cc;
	border: 2px solid var(--pink);
}


/******************************************************************************
*
* Styles for elements that will only appear once in the document
*
* Objects like <body> and <div id="container> should only appear once...
*
******************************************************************************/

body {
	margin: 0;
	padding: 0;

	font-family: var(--body-font);

	/* I like to set a font size of 12pt on the body, then use `rem` for sizing. */
	/* This way, if we decide to change the font size in the future, a lot of */
	/* other ratios will automatically scale. */
	font-size: var(--default-font-size);

	color: var(--body-text-color);

	background-image: var(--body-bg-image);
	background-size: var(--body-bg-size);
	background-color: var(--body-bg-color);
}

/* #container is what holds all the content  */
#container {
	max-width: 1200px;
	margin: 0 auto;
}


/******************************************************************************
*
* Styles for elements that hold the main content of the pages
*
******************************************************************************/

/* The ULTRALOVEHEAVEN banner image at the top of the page */
#banner {
	margin-top: 0.618rem;
	margin-bottom: calc(0.618rem / 2);
}

#banner img {
	width: 100%;
	max-height: 150px;

	border: var(--border-width) solid var(--blue);
	border-radius: var(--border-radius);
	background-color: var(--white);
}

/* The horizontal navbar at the top of the page (Home/About/etc.) */
#top-nav {
	height: 40px;
	width: 100%;

	margin-bottom: 0.618rem;

	border: var(--border-width) solid var(--navbar-border-color);
	border-radius: var(--border-radius);
	background-color: var(--blue);
}

#top-nav ul {
	/*
	* Instead of messing around with padding, we can just use flexbox and set
	* the element to 100% vertical and horizontal width to achieve perfect
	* centered alignment of the contained items.
	*/
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: center;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;

	list-style-type: none;
}

#top-nav ul li a {
	color: var(--light-yellow);
	font-weight: bold;
	text-decoration: none;
}

#top-nav ul li a:hover {
	color: var(--dark-red);
	text-decoration: underline;
}

/* Container for the left sidbar and main content */
#content-wrapper {
	display: flex;
	flex-direction: row;

	margin-bottom: 0.618rem;
}

/* Force the height of the left sidebar and main content */
main, #sidebar {
	min-height: var(--main-content-height);
	height: var(--main-content-height);
	max-height: var(--main-content-height);
}

/* Left-hand sidebar (Moomin, guestbook link, etc.) */
#sidebar {
	display: flex;
	flex-direction: column;
	justify-content: center;

	width: var(--sidebar-width);
	min-width: var(--sidebar-width);
	max-width: var(--sidebar-width);

	/* I use pixels instead of rems here because the boxes are sized with pixels */
	margin-right: 10px;

	padding: 1rem 1.618rem;

	overflow: hidden;

	background-color: var(--light-red);
	border: var(--border-width) solid var(--sidebar-border-color);
	border-radius: var(--border-radius);

	/**
	* I like setting font sizes in points instead of pixels. Probably just a
	* supersition on my part.
	*/
	font-size: 10pt;
}

#sidebar h1 {
	margin: 1rem 0;
	padding: 0;

	color: var(--dark-yellow);
	font-size: 32pt;
}

#sidebar-info {
	margin-bottom: 1.618rem;
	padding: 1rem;
	background-color: var(--dark-purple);
	border: 2px solid var(--dark-yellow);
}

#sidebar-info ul {
	padding-left: 0.618rem;
}

#sidebar-info .sparkles {
	font-size: 6pt;
	text-wrap: nowrap;
}

main {
	/* flex-grow: 1 allows the item to fill out the rest of the space in the flex grid */
	flex-grow: 1;

	background-color: var(--dark-purple);

	border: var(--border-width) solid var(--main-border-color);
	border-radius: var(--border-radius);

	overflow: auto;
}

main > article, main > section {
	padding: 0.618rem 1.618rem;
}

footer {
	margin-bottom: 0.618rem;
	padding: 0.5rem;

	color: var(--dark-yellow);
	background-color: var(--blue);

	border: var(--border-width) solid var(--footer-border-color);
	border-radius: var(--border-radius);
}


/******************************************************************************
*
* Styles for smaller screens
* The style information here will take effect on smaller devices like phones.
*
******************************************************************************/
@media only screen and (max-width: 1200px) {
	body {
		padding: 0 0.2rem;
	}

	#banner {
		margin-top: 0.3rem;
	}

	#top-nav {
		height: unset;
	}

	#top-nav ul {
		flex-wrap: wrap;
	}

	#top-nav ul li {
		width: 33%;
		padding: 0.618rem 0;
		text-align: center;
	}

	#content-wrapper {
		flex-direction: column-reverse;
		align-items: center;
		margin-bottom: 0.618rem;
	}

	#sidebar {
		flex-direction: column;
		justify-content: space-around;
		align-items: center;

		width: 100%;
		min-width: unset;
		max-width: unset;

		height: fit-content;
		min-height: unset;
		max-height: unset;

		padding: 1rem 1rem;

		margin-right: 0;
		/* Sidebar comes after main content */
		margin-bottom: 0;

		font-size: inherit;
	}

	#sidebar > div {
		max-width: 400px;
	}

	#sidebar .moomin {
		width: 66%;
		max-width: 400px;
	}

	#sidebar .sparkles {
		font-size: inherit;
	}

	main {
		flex-grow: unset;

		width: 100%;

		max-height: unset;
		height: unset;

		margin-bottom: 0.618rem;
	}
}


/******************************************************************************
*
* custom cursor
* originally sourced from https://cur.cursors-4u.net/holidays/hol-2/hol119.cur
*
******************************************************************************/
* {
	cursor: url("/_img/cursors/hol119.png"), auto !important;
}