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: 364px;
 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            height: 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	nav {
182		margin-bottom: 5vh;
183		ul {
184			width: 100%;
185			padding: 0;
186			padding-top: 30px;
187			position: relative;
188			top: 5vh;
189		}
190		img {
191			position: absolute;
192			top: 0;
193		}
194	}
195    .about {
196        .about-info {
197            padding: 0 2%;
198        }
199    }
200}
201
202@media (prefers-color-scheme: dark) {
203    html {
204        background: $color-dark-bg;
205    }
206    body {
207        color: $color-main-bg;
208    }
209    nav {
210        ul {
211            border-bottom: $border-dark;
212        }
213    }
214    code.language-plaintext.highlighter-rouge {
215        background: $color-darker-grey;
216    }
217    div.language-plaintext.highlighter-rouge {
218        background: $color-darker-grey;
219    }
220    .post {
221        border: 2px solid $color-dark-grey;
222    }
223    .post-page .post-header ul li a {
224        background: $color-dark-grey;
225    }
226
227    footer {
228        border-top: $border-dark;
229    }
230    blockquote {
231        background: $color-nav-current;
232        border-color: $color-dark-grey;
233    }
234}