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-main-grey-dark: #c4c4c4;
  7$color-dark-grey: #1f1f1f;
  8$color-link-idle: #707070;
  9$color-link-hover: #999999;
 10$color-nav-current: #333333;
 11$border-main: 5px solid;
 12$border-nav: $border-main $color-main-grey;
 13$border-dark: $border-main $color-dark-grey;
 14$font-title: Montserrat, sans-serif;
 15$body-font: Lato, sans-serif;
 16
 17html {
 18	background: $color-main-bg;
 19}
 20
 21body {
 22	max-width: 835px;
 23	min-width: 364px;
 24	margin: 20px auto 0 auto;
 25	padding: 8px;
 26	color: $color-dark-bg;
 27	font: 100% $body-font;
 28}
 29a {
 30	color: $color-link-idle;
 31	text-decoration: none;
 32}
 33a:hover {
 34	color: $color-link-hover;
 35}
 36
 37.current {
 38	color: $color-nav-current;
 39}
 40
 41nav {
 42	display: flex;
 43	font: 400 1.5em $font-title;
 44	letter-spacing: -1.2px;
 45
 46	ul {
 47		display: inline-flex;
 48		width: 430px;
 49		height: 32px;
 50		margin: 0;
 51		padding: 50px 30px 0 0;
 52		flex-direction: row;
 53		justify-content: space-between;
 54		list-style-type: none;
 55		border-bottom: $border-nav;
 56	}
 57}
 58
 59h1, h2, h3, h4, h5, h6 {
 60	margin: 0;
 61    color: $color-main-blue;
 62	font-family: $font-title;
 63    font-weight: 500;
 64}
 65
 66.post {
 67    padding: 1em;
 68    margin: 1em 0;
 69    background: $color-main-grey;
 70    border-radius: 25px 25px 25px 0px;
 71    word-wrap: break-word;
 72    p {
 73        margin-top: 0.15em;
 74        img {
 75            display: block;
 76            max-width: 100%;
 77            margin: 0 auto;
 78            border-radius: 1em;
 79        }
 80    }
 81}
 82
 83blockquote {
 84    margin: 0.5em;
 85    padding: 1em;
 86    background: $color-main-grey-dark;
 87    border-width: 2px 2px 2px 5px;
 88    border-color: $color-main-grey;
 89    border-style: solid;
 90    border-radius: 0.5em;
 91}
 92
 93audio {
 94    width: 100%;
 95    border-radius: 25px;
 96}
 97
 98footer {
 99	border-top: $border-nav;
100	text-align: center;
101	font: 75% $body-font;
102	p {
103		margin: 0;
104	}
105}
106
107@media only screen and (max-width: 700px) {
108	nav {
109		margin-bottom: 5vh;
110		ul {
111			width: 100%;
112			padding: 0;
113			padding-top: 30px;
114			position: relative;
115			top: 5vh;
116		}
117		img {
118			position: absolute;
119			top: 0;
120		}
121	}
122}
123
124@media (prefers-color-scheme: dark) {
125    html {
126        background: $color-dark-bg;
127    }
128    body {
129        color: $color-main-bg;
130    }
131    nav {
132        ul {
133            border-bottom: $border-dark;
134        }
135    }
136    .post {
137        background: $color-dark-grey;
138    }
139    footer {
140        border-top: $border-dark;
141    }
142    blockquote {
143        background: $color-nav-current;
144        border-color: $color-dark-grey;
145    }
146}