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 .post-header {
124    ul {
125        display: flex;
126        flex-direction: row;
127        li {
128            margin-right: 0.5em;
129            a {
130                background: $color-main-grey;
131                border-radius: 5px;
132                padding: 2px;
133            }
134        }
135    }
136}
137
138
139blockquote {
140    margin: 0.5em;
141    padding: 1em;
142    background: $color-main-grey-dark;
143    border-width: 2px 2px 2px 5px;
144    border-color: $color-main-grey;
145    border-style: solid;
146    border-radius: 0.5em;
147}
148
149code {
150    font-family: $code-font;
151    font-size: 0.9em;
152    &.language-plaintext.highlighter-rouge {
153        background: $color-main-grey;
154        padding: 2px;
155        border-radius: 5px;
156    }
157}
158div.language-plaintext.highlighter-rouge {
159    overflow-x: auto;
160    background: $color-main-grey;
161    padding-left: 0.5em;
162    border-radius: 5px;
163}
164
165audio {
166    width: 100%;
167    border-radius: 25px;
168}
169
170footer {
171    padding-top: 0.5em;
172	border-top: $border-nav;
173	text-align: center;
174	font: 75% $body-font;
175	p {
176		margin: 0;
177	}
178}
179
180@media only screen and (max-width: 760px) {
181    body p {
182        padding-top: 1em;
183    }
184	nav {
185		margin-bottom: 5vh;
186		ul {
187			width: 100%;
188			padding: 0;
189			padding-top: 30px;
190			position: relative;
191			top: 5vh;
192		}
193		img {
194			position: absolute;
195			top: 0;
196		}
197	}
198    .about {
199        flex-direction: column-reverse;
200        .about-sidebar {
201            display: flex;
202            flex-direction: column;
203            img {
204                width: 128px;
205                margin: 0 auto;
206            }
207        }
208        .about-links {
209            margin-top: 0;
210            p:first-child {
211                margin: 0;
212                padding-top: 0;
213            }
214            ul {
215                display: flex;
216                flex-wrap: wrap;
217                justify-content: flex-start;
218                li {
219                    margin: auto;
220                }
221            }
222        }
223    }
224}
225
226@media (prefers-color-scheme: dark) {
227    html {
228        background: $color-dark-bg;
229    }
230    body {
231        color: $color-main-bg;
232    }
233    nav {
234        ul {
235            border-bottom: $border-dark;
236        }
237    }
238    code.language-plaintext.highlighter-rouge {
239        background: $color-darker-grey;
240    }
241    div.language-plaintext.highlighter-rouge {
242        background: $color-darker-grey;
243    }
244    .post {
245        border: 2px solid $color-dark-grey;
246    }
247    .post-page .post-header ul li a {
248        background: $color-dark-grey;
249    }
250
251    footer {
252        border-top: $border-dark;
253    }
254    blockquote {
255        background: $color-nav-current;
256        border-color: $color-dark-grey;
257    }
258}