1. /*
  2.     Elements: Page
  3.     ---
  4.     Default markup for page level elements
  5. */
  6. /*
  7.     Fonts
  8.     ---
  9.     @font-face declarations
  10. */
  11.  
  12. @font-face {
  13.     font-family: "Inter UI";
  14.     font-weight: 400;
  15.     src: url("../fonts/Inter-UI-Regular.woff2") format("woff2");
  16. }
  17.  
  18. @font-face{
  19.     font-family: "Inter UI";
  20.     font-weight: 400;
  21.     src: url("../fonts/Inter-UI-Bold.woff2") format("woff2");
  22. }
  23.  
  24. @font-face{
  25.     font-family: "Droid Serif";
  26.     font-weight: 400;
  27.     src: url("../fonts/DroidSerif-Regular-webfont.woff") format("woff");
  28. }
  29.  
  30. @font-face{
  31.     font-family: "Droid Serif";
  32.     font-weight: 400;
  33.     font-style: italic;
  34.     src: url("../fonts/DroidSerif-italic-webfont.woff") format("woff");
  35. }
  36.  
  37. @font-face{
  38.     font-family:"Droid Serif";
  39.     font-weight: 700;
  40.     src:url("../fonts/DroidSerif-Bold-webfont.woff") format("woff");
  41. }
  42.  
  43. @font-face{
  44.     font-family: "Droid Serif";
  45.     font-weight: 700;
  46.     font-style: italic;
  47.     src: url("../fonts/DroidSerif-BoldItalic-webfont.woff") format("woff")
  48. }
  49.  
  50. html {
  51.     font-size: 16px;
  52.     line-height: 1.5;
  53.     /* font-family: "Inter UI", "Helvetica Neue", Helvetica, arial, sans-serif*/
  54.     font-family: "Droid Serif", Georgia, serif;
  55.     color: #5C6366;
  56.     -webkit-font-smoothing: antialiased;
  57.     -moz-osx-font-smoothing: grayscale;
  58.     box-sizing: border-box;
  59. }
  60.  
  61. *,
  62. *:before,
  63. *:after {
  64.     box-sizing: inherit;
  65. }
  66.  
  67. body {
  68.     margin: 0 auto;
  69. }
  70.  
  71. /*
  72.  * Remove text-shadow in selection highlight:
  73.  * https://twitter.com/miketaylr/status/12228805301
  74.  *
  75.  * Customize the background color to match your design.
  76.  */
  77.  
  78. ::selection {
  79.     background: #00E6A1;
  80.     color: white;
  81.     text-shadow: none;
  82. }
  83.  
  84. /*
  85.     Elements: Images
  86.     ---
  87.     Default markup for images to make them responsive
  88. */
  89.  
  90. img {
  91.     max-width: 100%;
  92.     vertical-align: top;
  93. }
  94.  
  95. /*
  96.     Elements: typography
  97.     ---
  98.     Default markup for typographic elements
  99. */
  100. h1,
  101. h2,
  102. h3{
  103.     color: #17181A;
  104.     font-family: "Inter UI", "Helvetica Neue", Helvetica, arial, sans-serif;
  105. }
  106.  
  107. h1 {
  108.     font-size: 36px;
  109.     line-height: 40px;
  110.     margin: 0 0 24px;
  111.     font-family: "Playfair Display", serif;
  112. }
  113.  
  114. *+h2 {
  115.     margin-top: 48px;
  116. }
  117.  
  118. h2{
  119.     font-size: 23px;
  120.     line-height: 32px;
  121.     margin: 0 0 24px;
  122. }
  123.  
  124. h3 {
  125.     font-size: 18px;
  126.     line-height: 24px;
  127.     margin: 0 0 24px;
  128. }
  129.  
  130. h4,
  131. h5,
  132. h6 {
  133.     font-size: 16px;
  134.     line-height: 24px;
  135.     margin: 0 0 24px;
  136. }
  137.  
  138. p,
  139. ol,
  140. ul,
  141. dl,
  142. table,
  143. address,
  144. figure {
  145.     margin: 0 0 24px;
  146. }
  147.  
  148. ul,
  149. ol {
  150.     padding-left: 24px;
  151. }
  152.  
  153. li ul,
  154. li ol {
  155.     margin-bottom: 0;
  156. }
  157.  
  158. blockquote {
  159.     font-style: italic;
  160.     font-size: 23px;
  161.     line-height: 32px;
  162.     margin: 0 0 24px;
  163.     font-family: "Times New Roman", serif;
  164. }
  165.  
  166. blockquote * {
  167.     font-size: inherit;
  168.     line-height: inherit;
  169. }
  170.  
  171. figcaption {
  172.     font-size: 12px;
  173.     line-height: 16px;
  174.     padding-top: 8px;
  175.     color: Grey;
  176. }
  177.  
  178. hr {
  179.     border: 0;
  180.     height: 1px;
  181.     background: LightGrey;
  182.     margin: 0 0 24px;
  183. }
  184.  
  185. a {
  186.     color: #00A1E6;
  187.     transition: all .1s ease-in-out;
  188. }
  189.  
  190. a:visited,
  191. a:active {
  192.     color: #00E6A1;
  193. }
  194.  
  195. a:hover,
  196. a:focus {
  197.     color: #1ABAFF;
  198. }
  199.  
  200. /* Small devices (landscape phones, 576px and up) */
  201.  
  202. @media (min-width: 576px) {}
  203.  
  204. /* Medium devices (tablets, 768px and up) */
  205.  
  206. @media (min-width: 768px) {
  207.     html {
  208.         padding: 48px 48px 24px;
  209.     }
  210.     h1 {
  211.         font-size: 58px;
  212.         line-height: 64px;
  213.     }
  214. }
  215.  
  216. /* Large devices (landscape tablets, desktops, 992px and up) */
  217.  
  218. @media (min-width: 992px) {}
  219.  
  220. /* Extra large devices (large desktops, 1200px and up) */
  221.  
  222. @media (min-width: 1200px) {}
  223.  
  224. /*
  225.     Components: Author
  226. */
  227.  
  228. .c-author {
  229.     display: flex;
  230.     align-items: center;
  231. }
  232.  
  233. .c-author__image{
  234.     width: 56px;
  235.     height: 56px;
  236.     border-radius: 100%;
  237.     margin-right: 16px;
  238. }
  239.  
  240. .c-author__name,
  241. .c-author__meta {
  242.     margin-bottom: 0;
  243. }
  244.  
  245. .c-author__meta{
  246.     font-size: 14px;
  247.     font-family: "Inter UI", "Helvetica Neue", Helvetica, arial, sans-serif;
  248.     line-height: 16px;
  249.     margin-top: 4px;
  250. }
  251.  
  252. .c-author__name{
  253.     font-size: 16px;
  254.     line-height: 16px;
  255. }
  256.  
  257. @media (min-width: 992px) {
  258.     .c-author {
  259.         display: block;
  260.     }
  261.     .c-author__image {
  262.         margin-bottom: 16px;
  263.     }
  264. }
  265. /*
  266.     Components: Article
  267. */
  268.  
  269. .c-article__header,
  270. .c-article__body {
  271.     max-width: 1200px;
  272.     margin: 0 auto;
  273. }
  274.  
  275. .c-article__header {
  276.     padding: 24px 24px 0;
  277. }
  278.  
  279. .c-article__body {
  280.     padding: 0 24px;
  281. }
  282.  
  283. @media (min-width: 768px) {
  284.     .c-article__header {
  285.         padding: 48px 48px 24px;
  286.     }
  287.     .c-article__author {
  288.         padding-bottom: 24px;
  289.     }
  290.     .c-article__body {
  291.         padding: 24px 48px;
  292.     }
  293. }
  294.  
  295. @media (min-width: 992px) {
  296.     .c-article__body {
  297.         display: flex;
  298.         flex-wrap: wrap;
  299.     }
  300.     .c-article__author {
  301.         width: 25%;
  302.         padding-right: 24px;
  303.     }
  304.     .c-article__content {
  305.         width: 75%;
  306.     }
  307. }
  308.  
  309. /*
  310.     Utilities: max-width
  311.     ---
  312.     Utility classes to put specific max widths onto elements.
  313. */
  314.  
  315. .u-max-width-sm {
  316.     max-width: 36em;
  317. }
  318.  
  319. /*
  320.     Print styles.
  321.     ---
  322.     Inlined to avoid the additional HTTP request:
  323.     http://www.phpied.com/delay-loading-your-print-css/
  324. */
  325.  
  326. @media print {
  327.     *,
  328.     *:before,
  329.     *:after {
  330.         background: transparent !important;
  331.         color: #000 !important;
  332.         /* Black prints faster:
  333.                                    http://www.sanbeiji.com/archives/953 */
  334.         box-shadow: none !important;
  335.         text-shadow: none !important;
  336.     }
  337.     a,
  338.     a:visited {
  339.         text-decoration: underline;
  340.     }
  341.     a[href]:after {
  342.         content: " (" attr(href) ")";
  343.     }
  344.     abbr[title]:after {
  345.         content: " (" attr(title) ")";
  346.     }
  347.     /*
  348.      * Don't show links that are fragment identifiers,
  349.      * or use the `javascript:` pseudo protocol
  350.      */
  351.     a[href^="#"]:after,
  352.     a[href^="javascript:"]:after {
  353.         content: "";
  354.     }
  355.     pre {
  356.         white-space: pre-wrap !important;
  357.     }
  358.     pre,
  359.     blockquote {
  360.         border: 1px solid #999;
  361.         page-break-inside: avoid;
  362.     }
  363.     /*
  364.      * Printing Tables:
  365.      * http://css-discuss.incutio.com/wiki/Printing_Tables
  366.      */
  367.     thead {
  368.         display: table-header-group;
  369.     }
  370.     tr,
  371.     img {
  372.         page-break-inside: avoid;
  373.     }
  374.     p,
  375.     h2,
  376.     h3 {
  377.         orphans: 3;
  378.         widows: 3;
  379.     }
  380.     h2,
  381.     h3 {
  382.         page-break-after: avoid;
  383.     }
  384. }