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