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