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-darker-grey: #101010;
  9$color-link-idle: #707070;
 10$color-link-hover: #999999;
 11$color-nav-current: #333333;
 12$border-main: 5px solid;
 13$border-nav: $border-main $color-main-grey;
 14$border-dark: $border-main $color-dark-grey;
 15$font-title: Montserrat, sans-serif;
 16$body-font: Lato, sans-serif;
 17$code-font: Fira Code, monospace;
 18
 19html {
 20	background: $color-main-bg;
 21}
 22
 23body {
 24	max-width: 835px;
 25	min-width: 378px;
 26	margin: 20px auto 0 auto;
 27	padding: 8px;
 28	color: $color-dark-bg;
 29	font: 100% $body-font;
 30}
 31a {
 32	color: $color-link-idle;
 33	text-decoration: none;
 34}
 35a:hover {
 36	color: $color-link-hover;
 37}
 38
 39.current {
 40	color: $color-nav-current;
 41}
 42
 43nav {
 44	display: flex;
 45	font: 400 1.5em $font-title;
 46	letter-spacing: -1.2px;
 47
 48	ul {
 49		display: inline-flex;
 50		width: 430px;
 51		height: 32px;
 52		padding: 50px 30px 0 0;
 53		flex-direction: row;
 54		justify-content: space-between;
 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
 66ul {
 67    margin: 0;
 68    padding: 0;
 69    li {
 70        list-style-type:none;
 71    }
 72}
 73
 74.about {
 75    padding: 1em 0;
 76    display: flex;
 77    flex-direction: row;
 78    img#avatar {
 79        border-radius: 100%;
 80        height: 128px;
 81    }
 82    .about-sidebar {
 83        flex: 23%;
 84    }
 85    .about-links {
 86        margin-top: 1em;
 87        .link-icon {
 88            width: 32px;
 89        }
 90        .link-text {
 91            display: inline;
 92            position: relative;
 93            bottom: 0.75em;
 94        }
 95    }
 96    .about-info {
 97        width: 100%;
 98        p:first-child {
 99            margin-top: 0;   
100        }
101    }
102}
103
104.post {
105    padding: 1em;
106    margin: 1em 0;
107    border-radius: 25px 25px 25px 0px;
108    border: 2px solid $color-main-grey;
109    word-wrap: break-word;
110    small p {
111        display: inline;
112    }
113    p {
114        img {
115            display: block;
116            max-width: 100%;
117            margin: 0 auto;
118            border-radius: 1em;
119        }
120    }
121}
122
123.post-page {
124    .post-header {
125        ul {
126            display: flex;
127            flex-direction: row;
128            li {
129                margin-right: 0.5em;
130                a {
131                    background: $color-main-grey;
132                    border-radius: 5px;
133                    padding: 2px;
134                }
135            }
136        }
137    }
138    
139    ul {
140        padding-left: 20px;
141    }
142}
143
144
145blockquote {
146    margin: 0.5em;
147    padding: 1em;
148    background: $color-main-grey-dark;
149    border-width: 2px 2px 2px 5px;
150    border-color: $color-main-grey;
151    border-style: solid;
152    border-radius: 0.5em;
153}
154
155code {
156    font-family: $code-font;
157    font-size: 0.9em;
158    background: $color-main-grey;
159    padding: 2px;
160    border-radius: 5px;
161}
162div.highlight {
163    overflow-x: auto;
164    background: $color-main-grey;
165    padding-left: 0.5em;
166    border-radius: 5px;
167    code {
168        padding: 0;
169    }
170}
171
172audio {
173    width: 100%;
174    border-radius: 25px;
175}
176
177footer {
178    padding-top: 0.5em;
179	border-top: $border-nav;
180	text-align: center;
181	font: 75% $body-font;
182	p {
183		margin: 0;
184	}
185}
186
187@media only screen and (max-width: 760px) {
188    body p {
189        padding-top: 1em;
190    }
191    footer p {
192        padding: 0;
193    }
194	nav {
195		margin-bottom: 5vh;
196		ul {
197			width: 100%;
198			padding: 0;
199			padding-top: 30px;
200			position: relative;
201			top: 5vh;
202		}
203		img {
204			position: absolute;
205			top: 0;
206		}
207	}
208    .about {
209        flex-direction: column-reverse;
210        .about-sidebar {
211            display: flex;
212            flex-direction: column;
213            img {
214                width: 128px;
215                margin: 0 auto;
216            }
217        }
218        .about-links {
219            margin-top: 0;
220            p:first-child {
221                margin: 0;
222                padding-top: 0;
223            }
224            ul {
225                padding-top: 1em;
226                display: flex;
227                flex-wrap: wrap;
228                li {
229                    margin: auto;
230                    padding: 0 0.5em;
231                }
232            }
233        }
234    }
235}
236
237@media (prefers-color-scheme: dark) {
238    html {
239        background: $color-dark-bg;
240    }
241    body {
242        color: $color-main-bg;
243    }
244    nav {
245        ul {
246            border-bottom: $border-dark;
247        }
248    }
249    code {
250        background: $color-darker-grey;
251    }
252    div.highlight {
253        background: $color-darker-grey;
254    }
255    .post {
256        border: 2px solid $color-dark-grey;
257    }
258    .post-page .post-header ul li a {
259        background: $color-dark-grey;
260    }
261
262    footer {
263        border-top: $border-dark;
264    }
265    blockquote {
266        background: $color-nav-current;
267        border-color: $color-dark-grey;
268    }
269}