/* Assets */
	@font-face { 
		font-family: "alte-haas"; 
		src: url("./fonts/AlteHaasGroteskRegular.ttf") format("truetype"); 
		font-weight: normal;
		font-style: normal; 
		font-display: swap; 
	}
	
	@font-face { 
		font-family: "adelia-shawn"; 
		src: url("./fonts/AdeliaShawnRegular.woff2") format("woff2"),
			url("./fonts/AdeliaShawnRegular.woff") format("woff"),
			url("./fonts/AdeliaShawnRegular.ttf") format("truetype");
		font-weight: normal;
		font-style: normal; 
		font-display: swap; 
	}

/* Global Variables */
	:root {
		--light-blurple-1: #D5D3FF;
		--light-blurple-2: #A0A6FF;
		--dark-blurple-1: #6659B2;
		--dark-blurple-2: #443E7F;
		
		--black-1: #1C1B2D;
		--black-2: #171626;
		--black-3: #0B0B11;
		--black-4: #06060A;
		
		--sky-blue: #5998FF;
		--baby-blue: #93C5FF;
		--lilac: #B575FF;
		--periwinkle-grey: #888BAD;
		--periwinkle-gray: var(--periwinkle-grey);
		--dark-grey: #424354;
		--dark-gray: var(--dark-grey);
	}

/* Whole page */
	html {
		/*
		This isn't actually the main background color, this is the footer color.
		The "real" content background color is applied to #main-wrapper.
		*/
		background-color: var(--black-4);
	}

	* {
		box-sizing: border-box;
	}

	body {
		font-family: "alte-haas", verdana;
		font-size: 1.2rem;
		color: var(--light-blurple-1);
		
		margin: 0;
	}
	
	#main-wrapper {
		background: linear-gradient(var(--black-2), var(--black-3));
	}

/* Topbar */
	header {
		text-align: left;
		background: linear-gradient(var(--dark-blurple-1), var(--dark-blurple-2));
		border: thin solid var(--black-2);
	}
	
	#banner-logo {
		position: relative;
		top: 15px;
	}

	#site-title {
		font-family: "adelia-shawn", serif;
		padding: 0px 15px;
		margin: 0px 5px 25px 0px;
	}
	
	#site-title a {
		color: var(--light-blurple-1);
		text-decoration: none;
	}
	
	#banner-logo-hover {
		display: none;
		position: absolute;
		bottom: 10px;
		left: 0;
	}
	
	#site-title:hover a {
		color: white;
	}
	
	#site-title:hover #banner-logo-hover {
		display: block;
	}

	#topbar-nav {
		background: linear-gradient(var(--light-blurple-1), var(--light-blurple-2));
		color: white;
		
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	
	/* Topbar navigation button */
	#topbar-nav p {
		text-align: center;
		font-weight: bold;
		padding: 5px 0;
		margin: 0;
	}

	#topbar-nav p:hover {
		background: linear-gradient(white, var(--light-blurple-1));
	}
	
	#topbar-nav a {
		padding: 5px 20px;
	}
	
	#topbar-nav a{
		color: var(--black-4);
		text-decoration: none;
	}
	
	#topbar-nav a:hover{
		text-decoration: underline;
	}

/* Content */
	#page-title {
		text-align: center;
	}

	main {
		background-color: var(--black-1);
		
		max-width: 900px;
		width: 100%;
		padding: 1px 30px 30px 30px;
		
		margin: 0 auto;
	}

/* Footer */
	footer {
		padding: 1px 20px;
	}

/* Basic Elements */
	a:link {
		color: var(--sky-blue);
	}

	a:visited {
		color: var(--lilac);
	}

	a:hover {
		color: var(--baby-blue);
	}

	pre:has(code) {
		background-color: #13121E;
		border-radius: 0.2em;
		padding: 0.6em;
	}
	
	hr {
		border-color: var(--light-blurple-1);
		margin: 20px 0;
	}
	
	aside {
		background-color: var(--black-2);
		padding: 0.5em 1em;
		margin: 10px 0;
	}
	
	figure {
		display: flex;
		flex-flow: column;
		width: min-content;
		float: right;
		margin: 0 20px;
	}
	
	small {
		color: var(--periwinkle-grey);
	}

/* Custom Elements */
	figcaption, .caption {
		font-size: 0.8rem;
		color: var(--periwinkle-grey);
		margin: 5px 0 10px 0;
	}
	
	.bar, .stat-bar {
		background-color: var(--black-4);
		width: 100%;
		border: solid thin var(--dark-blurple-2);
	}
	
	.stat-bar {
		margin: 0 0 5px 0;
	}
	
	.blurple-fill {
		height: 100%;
		padding: 5px;
		background-color: var(--light-blurple-1);
		color: var(--black-4);
	}
	
	aside > *, infobox > *, .compact > * {
		margin: 0.5em auto;
	}
	
	.form {
		color: var(--light-blurple-1);
		background: var(--black-4);
	}
	
	.infobox {
		float: right;
		width: fit-content;
		background-color: var(--black-2);
		padding: 0.5em 1em;
		margin: 10px 0;
	}

/* Behavior */
	.parent {
		position: relative;
		top: 0;
		left: 0;
	}

/* Blog Posts */
	.post {
		border: 1px solid var(--periwinkle-gray);
		padding: 10px;
		margin: 10px;
	}
	
	.post h2 {
		margin: 0 0 5px 0;
	}
	
	.date, .tags {
		color: var(--periwinkle-gray);
	}

	/* Centered modal box */
	.modal {
		display: none;
		position: fixed;
		z-index: 10;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}
	
	.modal-content {
		background: var(--black-1);
		max-width: 600px;
		width: 90%;
		padding: 20px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		box-shadow: 4px 4px 4px 4px var(--black-4);
	}

	/* Close button (X) */
	.close {
	  float: right;
	  cursor: pointer;
	  font-size: 20px;
	  position: relative;
	  top: -10px;
	}

	.modal-content .titlebar {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.modal-content textarea {
		height: 150px; 
	}

	/* Form inputs */
	.modal-content input,
	.modal-content textarea,
	.modal-content button {
	  max-width: 100%;
	  width: 100%;
	  box-sizing: border-box;
	}

/* Rules */
	@media (max-width: 800px) {
		#postcontainer {
			width: 100dvw;
		}
	}