$grey-dark: #2e3440;
$grey-vdark: darken($grey-dark, 5);
$grey-medium: #3b4252;
$grey-light: #4c566a;
$white-dark: #d8dee9;
$white-light: #eceff4;
$blue: #88c0d0;
$blue-med: #81a1c1;
$blue-dark: #5e81ac;

$text-default: $white-light;
$primary: $blue;
$secondary: $blue-med;


body {
	.container {
		max-width: 900px;
		margin-left: auto;
		margin-right: auto;

		.blog-main {
			max-width: 750px;
			margin-left: auto;
			margin-right: auto;

			.blog-content {
				border-top: 1px solid $grey-dark;
				margin-top: 0.6em;
			}

		}
	}

	color: $text-default;
	background-color: $grey-vdark;
	font-family: 'Fira Code',
	monospace;

	@supports (font-variation-settings: normal) {
		font-family: 'Fira Code VF', monospace;
	}


	.nav {
		width: 100%;

		padding-bottom: 0.6em;
		margin-bottom: 0.6em;
		border-bottom: 1px $grey-medium solid;

		a,
		a:visited {
			color: $primary !important;
		}
	}

	a {
		color: $primary;

		&:visited {
			color: $secondary;
		}
	}

	h1,
	h2,
	h3,
	h4 {
		margin-bottom: 0;
		margin-top: 0.1em;

	}
}