:root {
	--accent-purple: #848cdd;
	--background: #dbe6ff;
	/* --accent-purple: black; */
	/* --background: #d6d6d6; */
	--link: #2c44c7;
	/* --link: #990923; */
	--link-hover: #848cdd;
	--post-header: #5b5b5b;
}

@font-face {
	font-family: FiraCode_WOFF2;
	src: url('/assets/fonts/Fira_Code/FiraCode-Regular.woff2');
}

@font-face {
	font-family: FiraCode_TTF;
	src: url('/assets/fonts/Fira_Code/FiraCode-Regular.ttf');
}


@font-face {
	font-family: FiraSans_TTF;
	src: url('/assets/fonts/Fira_Code/FiraCode-Regular.ttf');
}

@font-face {
	font-family: FiraSans_WOFF2;
	src: url('/assets/fonts/Fira_Sans/FiraSans-Regular.woff2');
}

@media (min-width: 1100px) {
	body {
		margin: 1em auto;
		width: 70%;
	}
}

* {
	box-sizing: border-box;
	font-family: FiraSans_WOFF2, FiraSans_TTF, sans-serif;
	background-color: var(--background);
	color: black;
}

.mono {
	font-family: FiraCode_WOFF2, FiraCode_TTF, monospace;
}

a {
	text-decoration: none;
}

hr {
	color: var(--accent-purple);
	margin-bottom: 10px;
	margin-top: 0;
	border: 2px solid;
}

li {
	list-style-type: none;
}

.navbar .links, .mode-toggle {
	display: inline;
}

.links div {
	text-align: center;
	display: inline-block;
	height: 0;
	border-width: 0 20px 20px 20px;
	border-color: transparent transparent var(--accent-purple) transparent;
	border-style: solid;
}

.links div.active {
	border-color: transparent transparent white transparent;
}

.links div a {
	background-color: transparent;
	color: white;
}

.links div.active a {
	color: black;
}

.blogstuff {
	float: right;
	display: inline-block;
}

.blogstuff img {
	height: 100%;
	vertical-align: middle;
}

.main {
	margin-bottom: 10px;
}

.main h1 {
	margin: 0;
}

.main h2 {
	margin-top: 5px;
	margin-bottom: 5px;
}

.main a, .footer a, .blogstuff a {
	text-decoration: none;
	font-weight: bold;
	color: var(--link);
}

.main a:hover, .footer a:hover, .blogstuff a:hover {
	color: var(--link-hover);
}

.post-title {
	margin-top: 10px;
	margin-bottom: 6px;
}

.post-description {
	margin-top: 6px;
}

.post-date {
	margin-top: 0px;
	font-size: 18px;
	color: var(--post-header);
}

.post h2 {
	font-size: 26px;
}

.post h3 {
	font-size: 22px;
	margin-top: 2px;
	margin-bottom: 0px;
}

.post p {
	margin-top: 6px;
}