1  * {
  2    margin: 0;
  3    padding: 0;
  4  }
  5  
  6  /* Variables */
  7  :root {
  8    --color-primary: hsl(288, 80%, 25%);
  9    --color-primary-lighter: hsl(288, 80%, 90%);
 10    --color-primary-lightest: hsl(288, 80%, 75%);
 11    --color-green: hsl(153, 90%, 30%);
 12    --color-orange: hsl(18, 100%, 50%);
 13    --color-red: hsl(333, 100%, 40%);
 14    --color-blue: hsl(198, 90%, 40%);
 15    --color-black: #000;
 16    --color-white: #FFF;
 17  }
 18  
 19  /* Primary Elements */
 20  html {
 21    height: 100%;
 22    font-size: .75rem;
 23  }
 24  
 25  body {
 26    color: var(--color-black);
 27    font: 300 1.25rem/1.875rem "Metropolis", sans-serif;
 28    font-synthesis: none;
 29    -moz-hanging-punctuation: first last allow-end;
 30    -ms-hanging-punctuation: first last allow-end;
 31    -webkit-hanging-punctuation: first last allow-end;
 32    hanging-punctuation: first last allow-end;
 33    min-height: 100%;
 34    -moz-text-size-adjust: 100%;
 35    -ms-text-size-adjust: 100%;
 36    -webkit-text-size-adjust: 100%;
 37    text-size-adjust: 100%;
 38  }
 39  
 40  header,
 41  section {
 42    box-sizing: border-box;
 43    margin: 0 auto;
 44    max-width: 47rem;
 45    padding: 1.5rem;
 46  }
 47  
 48  ul,
 49  ol {
 50    list-style-position: outside;
 51    margin: 1.5rem 0 1.5rem 1.5rem;
 52  }
 53  
 54  [dir="rtl"] ul,
 55  [dir="rtl"] ol {
 56    margin: 1.5rem 1.5rem 1.5rem 0;
 57  }
 58  
 59  li {
 60    margin-bottom: .375rem;
 61  }
 62  
 63  header {
 64    color: var(--color-white);
 65  }
 66  
 67  footer {
 68    font-size: .875rem;
 69    text-align: center;
 70    padding: 1.5rem;
 71  }
 72  
 73  footer p {
 74    text-align: center;
 75  }
 76  
 77  blockquote {
 78    border-left: .25rem solid var(--color-primary);
 79    padding-left: 1.25rem;
 80  }
 81  
 82  pre {
 83    padding-left: 1.5rem;
 84    overflow-x: scroll;
 85    white-space: nowrap;
 86  }
 87  
 88  table {
 89    border-collapse: collapse;
 90    border-spacing: 0;
 91    width: 100%;
 92  }
 93  
 94  th {
 95    font-size: inherit;
 96    font-weight: 500;
 97    padding: 0 1.5rem .75rem 0;
 98    text-align: left;
 99  }
100  
101  td,
102  th {
103    vertical-align: initial;
104    white-space: nowrap;
105  }
106  
107  /* Headers */
108  h1 {
109    font-size: 1rem;
110    font-weight: 600;
111    letter-spacing: .125rem;
112    line-height: 3rem;
113    margin: 1.5rem 0;
114    text-align: center;
115    text-transform: uppercase;
116  }
117  
118  h2 {
119    font-size: 2rem;
120    font-weight: 500;
121    line-height: 3rem;
122    margin: 1.5rem 0;
123  }
124  
125  * + h2 {
126    margin-top: 3rem;
127  }
128  
129  h4 {
130    font-weight: normal;
131  }
132  
133  p {
134    -moz-hyphens: auto;
135    -ms-hyphens: auto;
136    -webkit-hyphens: auto;
137    hyphens: auto;
138    margin: 1.5rem 0;
139  }
140  
141  /* Inline Elements */
142  a {
143    color: var(--color-primary);
144    font-weight: 500;
145    text-decoration: none;
146    transition: color 125ms, background-color 125ms;
147  }
148  
149  a:focus,
150  a:hover {
151    color: var(--color-primary-lighter);
152  }
153  
154  a span {
155    color: var(--color-black);
156    font-weight: 300;
157  }
158  
159  strong {
160    font-weight: 400;
161  }
162  
163  code,
164  kbd {
165    font-family: "Metropolis", monospace;
166    letter-spacing: .0625rem;
167  }
168  
169  cite {
170    font-style: italic;
171  }
172  
173  cite::before {
174    content: "— ";
175  }
176  
177  abbr {
178    text-decoration: none;
179  }
180  
181  #veil {
182  }
183  
184  /* Utility Classes */
185  .logo {
186    display: inline-block;
187    height: 2.625rem;
188    margin-right: .75rem;
189    vertical-align: -.8125rem;
190    width: 2.625rem;
191  }
192  
193  .error,
194  .important {
195    color: var(--color-red);
196    font-weight: 600;
197  }
198  
199  .translations td {
200    padding-right: 1.5rem;
201  }
202  
203  .translations td:last-child {
204    vertical-align: middle;
205  }
206  
207  .translations td:nth-last-child(2) {
208    width: 90%;
209  }
210  
211  .data-list {
212    list-style: none;
213    -moz-column-count: 1;
214    -ms-column-count: 1;
215    -webkit-column-count: 1;
216    column-count: 1;
217    -moz-column-fill: balance;
218    -ms-column-fill: balance;
219    -webkit-column-fill: balance;
220    column-fill: balance;
221    margin-left: 0;
222  }
223  
224  .data-list li {
225    overflow: hidden;
226    text-overflow: ellipsis;
227    white-space: nowrap;
228  }
229  
230  .translations dt { display: none; }
231  
232  .icon {
233    background: var(--color-primary);
234    border-radius: .25rem;
235    color: var(--color-white);
236    display: inline-block;
237    font-size: .75rem;
238    font-weight: 600;
239    line-height: 1em;
240    margin-right: .125rem;
241    padding: .25rem .25rem .25rem .375rem;
242    text-transform: uppercase;
243  }
244  
245  .icon-md {
246    background: var(--color-green);
247  }
248  
249  .icon-txt {
250    background: var(--color-orange);
251  }
252  
253  .icon-adoc {
254    background: var(--color-blue);
255  }
256  
257  .icon:hover {
258    background-color: var(--color-primary-lighter);
259    color: var(--color-white);
260  }
261  
262  .formats {
263    font-size: .625rem;
264    font-weight: 600;
265    letter-spacing: .125rem;
266    line-height: .625rem;
267    text-align: center;
268    text-transform: uppercase;
269    white-space: nowrap;
270  }
271  
272  .formats > * {
273    display: inline-block;
274  }
275  
276  header {
277    text-align: center;
278  }
279  
280  header figure {
281    line-height: 3rem;
282    margin-bottom: 1.5rem;
283  }
284  
285  header figcaption {
286    font-size: 1.625rem;
287    font-weight: 500;
288  }
289  
290  header nav ul {
291    display: inline-flex;
292    list-style-type: none;
293    margin: auto;
294  }
295  
296  header nav li {
297    margin: 0.5rem;
298    font-size: 0.9rem;
299  }
300  
301  header nav li:first-child {
302    display: none;
303  }
304  
305  header a {
306    color: #fff;
307    font-weight: 500;
308  }
309  
310  header a:focus,
311  header a:hover {
312    color: var(--color-primary-lightest);
313  }
314  
315  @media (min-width: 30px) {
316  
317    body {
318      border-top: 13rem solid var(--color-primary);
319    }
320  
321    nav {
322      background-color: #444;
323      width: 100%;
324      margin-top: 2rem;
325      border-radius: 5rem;
326      border: 3px solid #eee;
327      text-align: center;
328    }
329  
330    header {
331      margin-top: -11.5rem;
332    }
333  
334    header nav li:first-child {
335      display: initial;
336    }
337  
338    header figcaption {
339      font-size: 2rem;
340    }
341  
342    .logo {
343      height: 3rem;
344      width: 3rem;
345    }
346  }
347  
348  @media (min-width: 640px) {
349    html {
350      font-size: 1rem;
351    }
352  
353    header nav li {
354      font-size: 1rem;
355    }
356  
357    .data-list {
358      -moz-column-count: 2;
359      -ms-column-count: 2;
360      -webkit-column-count: 2;
361      column-count: 2;
362    }
363  }