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		margin: 0;
 53		padding: 50px 30px 0 0;
 54		flex-direction: row;
 55		justify-content: space-between;
 56		list-style-type: none;
 57		border-bottom: $border-nav;
 58	}
 59}
 60
 61h1, h2, h3, h4, h5, h6 {
 62	margin: 0;
 63    color: $color-main-blue;
 64	font-family: $font-title;
 65    font-weight: 500;
 66}
 67
 68.post {
 69    padding: 1em;
 70    margin: 1em 0;
 71    //background: $color-main-grey;
 72    border-radius: 25px 25px 25px 0px;
 73    border: 1px solid $color-main-grey;
 74    word-wrap: break-word;
 75    small p {
 76        display: inline;
 77    }
 78    p {
 79        img {
 80            display: block;
 81            max-width: 100%;
 82            margin: 0 auto;
 83            border-radius: 1em;
 84        }
 85    }
 86}
 87
 88.post-page .post-header {
 89    ul {
 90        margin: 0;
 91        padding: 0;
 92        display: flex;
 93        flex-direction: row;
 94        list-style-type: none;
 95        li {
 96            margin-right: 0.5em;
 97            a {
 98                background: $color-main-grey;
 99                border-radius: 5px;
100                padding: 2px;
101            }
102        }
103    }
104}
105
106
107blockquote {
108    margin: 0.5em;
109    padding: 1em;
110    background: $color-main-grey-dark;
111    border-width: 2px 2px 2px 5px;
112    border-color: $color-main-grey;
113    border-style: solid;
114    border-radius: 0.5em;
115}
116
117code {
118    font-family: $code-font;
119    font-size: 0.9em;
120    &.language-plaintext.highlighter-rouge {
121        background: $color-darker-grey;
122        padding: 2px;
123        border-radius: 5px;
124    }
125}
126div.language-plaintext.highlighter-rouge {
127    overflow-x: auto;
128    background: $color-main-grey;
129    padding-left: 0.5em;
130    border-radius: 5px;
131}
132
133audio {
134    width: 100%;
135    border-radius: 25px;
136}
137
138footer {
139    padding-top: 0.5em;
140	border-top: $border-nav;
141	text-align: center;
142	font: 75% $body-font;
143	p {
144		margin: 0;
145	}
146}
147
148@media only screen and (max-width: 700px) {
149	nav {
150		margin-bottom: 5vh;
151		ul {
152			width: 100%;
153			padding: 0;
154			padding-top: 30px;
155			position: relative;
156			top: 5vh;
157		}
158		img {
159			position: absolute;
160			top: 0;
161		}
162	}
163}
164
165@media (prefers-color-scheme: dark) {
166    html {
167        background: $color-dark-bg;
168    }
169    body {
170        color: $color-main-bg;
171    }
172    nav {
173        ul {
174            border-bottom: $border-dark;
175        }
176    }
177    code.language-plaintext {
178        background: $color-darker-grey;
179    }
180    div.language-plaintext.highlighter-rouge {
181        background: $color-darker-grey;
182    }
183    .post {
184        //background: $color-dark-grey;
185        border: 1px solid $color-dark-grey;
186    }
187    .post-page .post-header ul li a {
188        background: $color-dark-grey;
189    }
190
191    footer {
192        border-top: $border-dark;
193    }
194    blockquote {
195        background: $color-nav-current;
196        border-color: $color-dark-grey;
197    }
198}