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    footer p {
185        padding: 0;
186    }
187	nav {
188		margin-bottom: 5vh;
189		ul {
190			width: 100%;
191			padding: 0;
192			padding-top: 30px;
193			position: relative;
194			top: 5vh;
195		}
196		img {
197			position: absolute;
198			top: 0;
199		}
200	}
201    .about {
202        flex-direction: column-reverse;
203        .about-sidebar {
204            display: flex;
205            flex-direction: column;
206            img {
207                width: 128px;
208                margin: 0 auto;
209            }
210        }
211        .about-links {
212            margin-top: 0;
213            p:first-child {
214                margin: 0;
215                padding-top: 0;
216            }
217            ul {
218                padding-top: 1em;
219                display: flex;
220                flex-wrap: wrap;
221                li {
222                    margin: auto;
223                    padding: 0 0.5em;
224                }
225            }
226        }
227    }
228}
229
230@media (prefers-color-scheme: dark) {
231    html {
232        background: $color-dark-bg;
233    }
234    body {
235        color: $color-main-bg;
236    }
237    nav {
238        ul {
239            border-bottom: $border-dark;
240        }
241    }
242    code.language-plaintext.highlighter-rouge {
243        background: $color-darker-grey;
244    }
245    div.language-plaintext.highlighter-rouge {
246        background: $color-darker-grey;
247    }
248    .post {
249        border: 2px solid $color-dark-grey;
250    }
251    .post-page .post-header ul li a {
252        background: $color-dark-grey;
253    }
254
255    footer {
256        border-top: $border-dark;
257    }
258    blockquote {
259        background: $color-nav-current;
260        border-color: $color-dark-grey;
261    }
262}