$navy: #1D2951;

$red: #C82829;
$orange: #F5871F;
$yellow: #EAB700;
$green: #718C00;
$aqua: #3E999F;
$blue: #4271AE;
$purple: #8959A8;

$background: #FFFFFF;
$current_line: #EFEFEF;
$selection: #D6D6D6;
$foreground: #4D4D4C;
$comment: #8E908C;

@font-face {
	font-family: "math";
	font-size: 16px;
	src: url("latinmodern-math.otf");
}

@font-face {
	font-family: "mono";
	src: url("lmmono10-regular.otf");
}

@font-face {
	font-family: "ital";
	src: url("lmmono10-italic.otf");
}

@font-face {
	font-family: "prop";
	src: url("lmsans10-regular.otf");
}

math {
 	font-size: 20px;
	font-family: math;
}

* {
	box-sizing: border-box;
}

html {
	font-family: prop, sans-serif;
	display: flex;
	justify-content: center;
	background: white;
}

.titlebar {
	display: flex;
	flex-direction: row;
	background: $navy;
}

.titlelink {
	padding: 15px;
	color: white;
	text-decoration: none;
	font-weight: bold;
}

.titlelink:hover {
	color: $navy;
	background: white;
}

.content {
	padding: 15px;
}

body {
	font-size: 18px;
	width: 100%;
	max-width: 800px;
	margin: 30px;
	background: white;
	box-shadow: 2px 2px 60px #0005;
}

@media only screen and (max-width: 800px) {
	body {
		margin: 0px;
		box-shadow: none;
	}
}

.code {
	font-size: 18px;
	font-family: mono, monospace;
}

.code--comment {
	font-family: ital, monospace;
	color: $comment;
}

.code--keyword {
	color: $red;
}

.code--macro {
	color: $purple;
}

.code--constant {
	color: $blue;
}

.code--type {
	color: $purple;
}

.code--string {
	color: $green;
}

.code--function {
	color: $blue;
}