1$color-main-bg: #f0f0f0;
  2$color-dark-bg: #070707;
  3$color-main-blue: #397eaf;
  4$color-dark-blue: #2e4054;
  5$color-main-grey: #e1e1e1;
  6$color-dark-grey: #1f1f1f;
  7$color-link-idle: #707070;
  8$color-link-hover: #999999;
  9$color-nav-current: #333333;
 10$border-main: 5px solid $color-main-grey;
 11$border-dark: 5px solid $color-dark-grey;
 12$font-title: sans-serif;
 13$body-font: sans-serif;
 14
 15html {
 16	background: $color-main-bg;
 17}
 18
 19body {
 20	max-width: 835px;
 21	min-width: 364px;
 22	margin: 20px auto 0 auto;
 23	padding: 8px;
 24	color: $color-dark-bg;
 25	font: 100% $body-font;
 26}
 27a {
 28	color: $color-link-idle;
 29	text-decoration: none;
 30}
 31a:hover {
 32	color: $color-link-hover;
 33}
 34
 35.current {
 36	color: $color-nav-current;
 37}
 38
 39nav {
 40	display: flex;
 41	font: 400 1.5em $font-title;
 42	letter-spacing: -1.2px;
 43
 44	ul {
 45		display: inline-flex;
 46		width: 430px;
 47		height: 32px;
 48		margin: 0;
 49		padding: 50px 30px 0 0;
 50		flex-direction: row;
 51		justify-content: space-between;
 52		list-style-type: none;
 53		border-bottom: $border-main;
 54	}
 55}
 56
 57h1, h2, h3, h4, h5, h6 {
 58	margin: 0;
 59	font: 200% $font-title;
 60	color: $color-main-blue;
 61}
 62
 63footer {
 64	border-top: $border-main;
 65	text-align: center;
 66	font: 75% $body-font;
 67	p {
 68		margin: 0;
 69	}
 70}
 71
 72@media only screen and (max-width: 700px) {
 73	nav {
 74		margin-bottom: 5vh;
 75		ul {
 76			width: 100%;
 77			padding: 0;
 78			padding-top: 30px;
 79			position: relative;
 80			top: 5vh;
 81		}
 82		img {
 83			position: absolute;
 84			top: 0;
 85		}
 86	}
 87}
 88
 89@media (prefers-color-scheme: dark) {
 90	html {
 91		background: $color-dark-bg;
 92	}
 93	body {
 94		color: $color-main-bg;
 95	}
 96	nav {
 97		ul {
 98			border-bottom: $border-dark;
 99		}
100	}
101	footer {
102		border-top: $border-dark;
103	}
104}