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
 63.content a {
 64    text-decoration: underline;
 65}
 66
 67p {
 68    font-size: 20px;
 69    line-height: 32px;
 70}
 71
 72p.center {
 73    text-align: center;
 74}
 75
 76ul {
 77    font-size: 17px;
 78    line-height: 27px;
 79}
 80
 81ol {
 82    font-size: 17px;
 83    line-height: 27px;
 84}
 85
 86img {
 87    margin: 40px auto;
 88    display: block;
 89    max-width: 100%;
 90}
 91.flex-wrapper {
 92    display: flex;
 93    justify-content: center;
 94    background-color: #333333;
 95}
 96.flex-cards {
 97    width: 100%;
 98    display: flex;
 99    flex-wrap: wrap;
100    background-color: #333;
101    justify-content: center;
102}
103.card {
104    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
105    margin: 5px;
106    transition: 0.3s;
107    border-radius: 5px;
108    width: 28.3%;
109    background: #4f4f4fff;
110    padding: 15px;
111    font-size: 15px;
112    text-align: center;
113}
114div.card p {
115    font-size: 17px;
116    text-align: left;
117    line-height: 27px;
118}
119.card:hover {
120    box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
121}
122.crypto-card {
123    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
124    margin: 5px;
125    transition: 0.3s;
126    border-radius: 5px;
127    width: 35%;
128    background: #ffffffff;
129    padding: 15px;
130    font-size: 15px;
131    text-align: center;
132    color: #333333;
133    word-wrap: break-word;
134}
135div.crypto-card p {
136    font-size: 17px;
137    text-align: center;
138    line-height: 27px;
139}
140.crypto-card:hover {
141    box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
142}
143.button {
144    border-radius: 8px;
145    border: 0px;
146    color: #4f4f4fff;
147    background-color: white;
148    padding: 16px 32px;
149    text-align: center;
150    text-decoration: none;
151    display: inline-block;
152    font-size: 16px;
153    margin: 4px 2px;
154    -webkit-transition-duration: 0.4s;
155    transition-duration: 0.4s;
156    cursor: pointer;
157    border: 2px solid #fff;
158}
159.button:hover {
160    background-color: #4f4f4fff;
161    color: #FFFFFF;
162}
163.contact-card {
164    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
165    background: #4f4f4fff;
166    margin: 5px;
167    transition: 0.3s;
168    border-radius: 5px;
169    width: 20%;
170    text-align: center;
171}
172div.contact-card h1 {
173    font-size: 50px;
174    text-align: center;
175    line-height: 0px;
176}
177div.contact-card h2 {
178    font-size: 17px;
179    line-height: 27px;
180}
181.contact-card:hover {
182    box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
183}
184blockquote {
185    letter-spacing: 1px;
186    margin:0px;
187    margin-top: 40px;
188    margin-bottom: 20px;
189    padding: 0px;
190    text-align: center;
191    position: relative;
192
193    footer {
194        position: absolute;
195        bottom: -35px;
196        font-size: 15px;
197        color: $iron;
198        letter-spacing: 0px;
199        left:0px;
200        right: 0px;
201
202        &:before { content: "** "; }
203        &:after { content: " **"; }
204    }
205
206    p {
207        display: inline;
208        font-size: 20px;
209        color: $cloudy;
210        font-weight: 400;
211        &:before { content: "“ "; }
212        &:after { content: " ”"; }
213    }
214}
215
216strong {
217    color: $iron;
218}
219
220/* =Header */
221.wrapper {
222    max-width: 70%;
223    margin: 100px auto;
224}
225
226.header {
227    overflow: hidden;
228    font-family: 'Inconsolata';
229}
230
231.navigation {
232    float:left;
233}
234
235.logo {
236    font-size: 50px;
237    font-weight: 700;
238    color: $iron;
239    display: block;
240}
241
242.menu {
243    color: $cloudy;
244    font-size: 18px;
245    margin:0px;
246    margin-top: 6px;
247    padding: 0px;
248    list-style-type: none;
249}
250
251.menu__entry {
252    display: inline-block;
253    margin-right: 35px;
254
255    &:last-child {
256        margin-right: 0px;
257    }
258}
259
260.menu__entry a {
261    font-weight: 400;
262}
263
264.social-links {
265    float:right;
266    font-size: 24px;
267    color: $cloudy;
268    list-style-type: none;
269}
270
271.social-links__entry {
272    display: inline-block;
273    margin-left: 10px;
274}
275
276/* =Titles */
277.page-title {
278    margin-top:100px;
279    margin-bottom:75px;
280    text-align: center;
281    font-family: 'Inconsolata';
282}
283
284.page-title__text {
285    font-weight: 700;
286    font-size: 70px;
287}
288
289.page-title__subtitle {
290    font-weight: 400;
291    font-family: 'Inconsolata';
292    font-size: 22px;
293    color: $cloudy;
294}
295
296.post-title {
297    margin-bottom: 110px;
298    font-family: 'Inconsolata';
299}
300
301.post-title__text {
302    font-size: 40px;
303}
304
305.post-title__subtitle {
306    font-size: 20px;
307}
308
309/* =Post teasers */
310
311.list-posts {
312    list-style-type: none;
313    font-family: 'Inconsolata';
314    padding: 0px;
315}
316
317.post-teaser {
318    font-family: 'Inconsolata';
319}
320
321.post-teaser p {
322    margin-bottom: 55px;
323    font-weight: 200;
324    font-family: 'Open Sans';
325    font-size: 15px;
326    font-style: none;
327}
328
329.post-teaser__title {
330    font-size: 25px;
331    color: $iron;
332}
333
334.post-teaser__date {
335    font-size: 17px;
336    float: right;
337    vertical-align: middle;
338    color: $cloudy;
339}
340
341.empty-post-list {
342    font-size: 22px;
343    font-weight: 700;
344    color: $iron;
345    text-align: center;
346}
347
348/* =Explore */
349.explore {
350    text-align: center;
351    font-family: 'Inconsolata';
352    color: $cloudy;
353    margin-top: 140px;
354}
355
356.explore__devider {
357    font-size: 18px;
358    letter-spacing: 8.18px;
359}
360
361.explore__label {
362    font-size: 14px;
363    margin-top: 15px;
364    font-family: 'Inconsolata';
365}
366
367.categories {
368    list-style-type: none;
369    font-family: 'Inconsolata';
370    margin-top: 15px;
371    padding: 0px;
372}
373
374.categories__item {
375    display: inline-block;
376    font-weight: 700;
377    font-size: 18px;
378}
379
380.categories__item a {
381    color: $iron;
382    font-family: 'Inconsolata';
383}
384
385.categories__item:after {
386    content: "/";
387    margin-left: 6px;
388    color: $cloudy;
389}
390
391.categories__item:last-child:after {
392    content: "";
393    margin-left: 0px;
394}
395
396
397/* =Post page */
398.about {
399    color: $cloudy;
400    margin-top: 70px;
401    text-align: center;
402    line-height: 24px;
403}
404
405.about__devider {
406    font-size: 20px;
407    margin-bottom: 50px;
408    letter-spacing: 9.09px;
409}
410
411.about__text {
412    font-size: 18px;
413}
414
415#disqus_thread {
416    margin-top: 100px;
417}
418@media (max-width: 1000px) {
419    .contact-card {
420        width: 28%;
421    }
422}
423@media (max-width: 800px) {
424    /* =Base */
425    p {
426        font-size: 16px;
427        line-height: 1.6;
428    }
429
430    .wrapper {
431        width: 80%;
432    }
433
434    .navigation,
435    .social-links {
436        @include centered-block();
437    }
438
439    .social-links {
440        font-size: 30px;
441        margin-top: 35px;
442    }
443
444    .page-title {
445        margin-top: 80px;
446        margin-bottom: 60px;
447    }
448
449    .page-title__text {
450        font-size: 40px;
451    }
452
453    .page-title__subtitle {
454        font-size: 18px;
455    }
456
457    .post-teaser__title {
458        font-size: 18px;
459        @include centered-block();
460    }
461
462    .post-teaser__date {
463        font-size: 16px;
464        margin-top: 10px;
465        float: none;
466        @include centered-block();
467    }
468
469    .explore {
470        margin-top: 80px;
471    }
472
473    .post-title__text {
474        font-size: 28px;
475    }
476
477    .post-title__subtitle {
478        font-size: 18px;
479    }
480    .card {
481        width: 40%;
482    }
483    .contact-card {
484        width: 30%;
485    }
486    .crypto-card {
487        width: 70%;
488    }
489}
490@media (max-width: 620px) {
491    .card {
492        width: 80%;
493    }
494    .contact-card {
495        width: 45%;
496    }
497    .crypto-card {
498        width: 70%;
499    }
500}
501@media (max-width: 400px) {
502    .card {
503        width: 100%;
504    }
505    .contact-card {
506        width: 100%;
507    }
508    .crypto-card {
509        width: 100%;
510    }
511}