1@font-face {
  2    font-family: 'Open Sans';
  3    font-style: normal;
  4    font-weight: 300;
  5    src: url('assets/fonts/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
  6    src: local('Open Sans Light'), local('OpenSans-Light'),
  7    url('/assets/fonts/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  8    url('/assets/fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
  9    url('/assets/fonts/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
 10    url('/assets/fonts/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
 11    url('/assets/fonts/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
 12}
 13@font-face {
 14    font-family: 'Open Sans';
 15    font-style: italic;
 16    font-weight: 300;
 17    src: url('/assets/fonts/open-sans-v15-latin-300italic.eot'); /* IE9 Compat Modes */
 18    src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
 19    url('/assets/fonts/open-sans-v15-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 20    url('/assets/fonts/open-sans-v15-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
 21    url('/assets/fonts/open-sans-v15-latin-300italic.woff') format('woff'), /* Modern Browsers */
 22    url('/assets/fonts/open-sans-v15-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
 23    url('/assets/fonts/open-sans-v15-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
 24}
 25@font-face {
 26    font-family: 'Inconsolata';
 27    font-style: normal;
 28    font-weight: 400;
 29    src: url('/assets/fonts/inconsolata-v16-latin-regular.eot'); /* IE9 Compat Modes */
 30    src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
 31    url('/assets/fonts/inconsolata-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 32    url('/assets/fonts/inconsolata-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
 33    url('/assets/fonts/inconsolata-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
 34    url('/assets/fonts/inconsolata-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
 35    url('/assets/fonts/inconsolata-v16-latin-regular.svg#Inconsolata') format('svg'); /* Legacy iOS */
 36}
 37@font-face {
 38    font-family: 'Inconsolata';
 39    font-style: normal;
 40    font-weight: 700;
 41    src: url('/assets/fonts/inconsolata-v16-latin-700.eot'); /* IE9 Compat Modes */
 42    src: local('Inconsolata Bold'), local('Inconsolata-Bold'),
 43    url('/assets/fonts/inconsolata-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 44    url('/assets/fonts/inconsolata-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
 45    url('/assets/fonts/inconsolata-v16-latin-700.woff') format('woff'), /* Modern Browsers */
 46    url('/assets/fonts/inconsolata-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
 47    url('/assets/fonts/inconsolata-v16-latin-700.svg#Inconsolata') format('svg'); /* Legacy iOS */
 48}
 49
 50/* =Base */
 51body {
 52    font-family: 'Open Sans';
 53    color: $iron;
 54    background-color: $dorian;
 55}
 56
 57a {
 58    color: $iron;
 59    font-weight: bold;
 60    text-decoration: none;
 61
 62    &:hover {
 63        text-decoration: underline;
 64    }
 65}
 66
 67.contact {
 68    font-weight: normal;
 69    font-size: 40px;
 70    line-height: 52px;
 71    text-decoration: none;
 72    text-align: center;
 73}
 74
 75.contact:hover {
 76    color: #BEBEBE;
 77}
 78
 79p {
 80    font-size: 20px;
 81    line-height: 32px;
 82}
 83
 84p.center {
 85    text-align: center;
 86}
 87
 88ul {
 89    font-size: 17px;
 90    line-height: 27px;
 91}
 92
 93ol {
 94    font-size: 17px;
 95    line-height: 27px;
 96}
 97
 98img {
 99    margin: 40px auto;
100    display: block;
101    max-width: 100%;
102}
103.flex-cards {
104    display: flex;
105    justify-content: center;
106    background-color: #333333;
107
108}
109.flex-container > div {
110    width: 100%;
111    margin: 10px;
112}
113.card {
114    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
115    margin: 5px;
116    transition: 0.3s;
117    border-radius: 5px;
118    width: 30%;
119    background: #4f4f4fff;
120    padding: 15px;
121    font-size: 15px;
122    text-align: center;
123}
124div.card p {
125    font-size: 17px;
126    text-align: left;
127    line-height: 27px;
128}
129.card:hover {
130    box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
131}
132.button {
133    border-radius: 8px;
134    border: 0px;
135    color: #4f4f4fff;
136    background-color: white;
137    padding: 16px 32px;
138    text-align: center;
139    text-decoration: none;
140    display: inline-block;
141    font-size: 16px;
142    margin: 4px 2px;
143    -webkit-transition-duration: 0.4s;
144    transition-duration: 0.4s;
145    cursor: pointer;
146    border: 2px solid #fff;
147}
148.button:hover {
149    background-color: #4f4f4fff;
150    color: #FFFFFF;
151}
152blockquote {
153    letter-spacing: 1px;
154    margin:0px;
155    margin-top: 40px;
156    margin-bottom: 20px;
157    padding: 0px;
158    text-align: center;
159    position: relative;
160
161    footer {
162        position: absolute;
163        bottom: -35px;
164        font-size: 15px;
165        color: $iron;
166        letter-spacing: 0px;
167        left:0px;
168        right: 0px;
169
170        &:before { content: "** "; }
171        &:after { content: " **"; }
172    }
173
174    p {
175        display: inline;
176        font-size: 20px;
177        color: $cloudy;
178        font-weight: 400;
179        &:before { content: "“ "; }
180        &:after { content: " ”"; }
181    }
182}
183
184strong {
185    color: $iron;
186}
187
188/* =Header */
189.wrapper {
190    max-width: 800px;
191    margin: 100px auto;
192}
193
194.header {
195    overflow: hidden;
196    font-family: 'Inconsolata';
197}
198
199.navigation {
200    float:left;
201}
202
203.logo {
204    font-size: 50px;
205    font-weight: 700;
206    color: $iron;
207    display: block;
208}
209
210.menu {
211    color: $cloudy;
212    font-size: 18px;
213    margin:0px;
214    margin-top: 6px;
215    padding: 0px;
216    list-style-type: none;
217}
218
219.menu__entry {
220    display: inline-block;
221    margin-right: 35px;
222
223    &:last-child {
224        margin-right: 0px;
225    }
226}
227
228.menu__entry a {
229    font-weight: 400;
230}
231
232.social-links {
233    float:right;
234    font-size: 24px;
235    color: $cloudy;
236    list-style-type: none;
237}
238
239.social-links__entry {
240    display: inline-block;
241    margin-left: 10px;
242}
243
244/* =Titles */
245.page-title {
246    margin-top:100px;
247    margin-bottom:125px;
248    text-align: center;
249    font-family: 'Inconsolata';
250}
251
252.page-title__text {
253    font-weight: 700;
254    font-size: 70px;
255}
256
257.page-title__subtitle {
258    font-weight: 400;
259    font-family: 'Inconsolata';
260    font-size: 22px;
261    color: $cloudy;
262}
263
264.post-title {
265    margin-bottom: 110px;
266    font-family: 'Inconsolata';
267}
268
269.post-title__text {
270    font-size: 40px;
271}
272
273.post-title__subtitle {
274    font-size: 20px;
275}
276
277/* =Post teasers */
278
279.list-posts {
280    list-style-type: none;
281    font-family: 'Inconsolata';
282    padding: 0px;
283}
284
285.post-teaser {
286    margin-bottom: 45px;
287    font-weight: 700;
288    font-family: 'Inconsolata';
289}
290
291.post-teaser__title {
292    font-size: 22px;
293    color: $iron;
294}
295
296.post-teaser__date {
297    font-size: 16px;
298    float: right;
299    vertical-align: middle;
300    color: $cloudy;
301}
302
303.empty-post-list {
304    font-size: 22px;
305    font-weight: 700;
306    color: $iron;
307    text-align: center;
308}
309
310/* =Explore */
311.explore {
312    text-align: center;
313    font-family: 'Inconsolata';
314    color: $cloudy;
315    margin-top: 140px;
316}
317
318.explore__devider {
319    font-size: 18px;
320    letter-spacing: 8.18px;
321}
322
323.explore__label {
324    font-size: 14px;
325    margin-top: 15px;
326    font-family: 'Inconsolata';
327}
328
329.categories {
330    list-style-type: none;
331    font-family: 'Inconsolata';
332    margin-top: 15px;
333    padding: 0px;
334}
335
336.categories__item {
337    display: inline-block;
338    font-weight: 700;
339    font-size: 18px;
340}
341
342.categories__item a {
343    color: $iron;
344    font-family: 'Inconsolata';
345}
346
347.categories__item:after {
348    content: "/";
349    margin-left: 6px;
350    color: $cloudy;
351}
352
353.categories__item:last-child:after {
354    content: "";
355    margin-left: 0px;
356}
357
358
359/* =Post page */
360.about {
361    color: $cloudy;
362    margin-top: 70px;
363    text-align: center;
364    line-height: 24px;
365}
366
367.about__devider {
368    font-size: 20px;
369    margin-bottom: 50px;
370    letter-spacing: 9.09px;
371}
372
373.about__text {
374    font-size: 18px;
375}
376
377#disqus_thread {
378    margin-top: 100px;
379}
380
381@media (max-width: 800px) {
382    /* =Base */
383    p {
384        font-size: 16px;
385        line-height: 1.6;
386    }
387
388    .wrapper {
389        width: 80%;
390    }
391
392    .navigation,
393    .social-links {
394        @include centered-block();
395    }
396
397    .social-links {
398        font-size: 30px;
399        margin-top: 35px;
400    }
401
402    .page-title {
403        margin-top: 80px;
404        margin-bottom: 60px;
405    }
406
407    .page-title__text {
408        font-size: 40px;
409    }
410
411    .page-title__subtitle {
412        font-size: 18px;
413    }
414
415    .post-teaser__title {
416        font-size: 18px;
417        @include centered-block();
418    }
419
420    .post-teaser__date {
421        font-size: 16px;
422        margin-top: 10px;
423        float: none;
424        @include centered-block();
425    }
426
427    .explore {
428        margin-top: 80px;
429    }
430
431    .post-title__text {
432        font-size: 28px;
433    }
434
435    .post-title__subtitle {
436        font-size: 18px;
437    }
438}