Added a dark mode color scheme.
[WebKit-https.git] / Websites / webkit.org / wp-content / themes / webkit / style.css
1 /*
2 Theme Name: WebKit
3 Theme URI: http://webkit.org/
4 Author: The WebKit Team
5 Author URI: http://webkit.org/
6 Description: Modern, adaptive theme for the WebKit project.
7 Version: 1.0
8 */
9
10 :root {
11     --background-color: hsl(203.6, 100%, 12%);
12     --link-color: hsl(200, 100%, 40%);
13     --text-color: hsl(0, 0%, 20%);
14     --text-color-light: hsl(0, 0%, 87%);
15     --text-color-medium: hsl(0, 0%, 33.3%);
16     --text-color-heading: hsl(0, 0%, 26.7%);
17     --text-color-coolgray: hsl(240, 2.3%, 56.7%);
18     --inverse-text-color: hsl(0, 0%, 100%);
19     --inverse-link-color: hsl(206.7, 100%, 70%);
20
21     --content-background-color: hsl(0, 0%, 96.9%);
22     --horizontal-rule-color: hsl(0, 0%, 86.7%);
23
24     --code-background-color: hsl(0, 0%, 94.9%);
25     --code-border-color: hsl(0, 0%, 90.6%);
26     --code-text-color: hsl(0, 0%, 26.7%);
27
28     --note-background-color: hsl(50, 100%, 94%);
29     --note-border-color: hsl(40, 100%, 90%);
30     --note-text-color: hsl(30, 90%, 35%);
31
32     --foreword-background-color: hsl(0, 0%, 94.1%);
33     --foreword-border-color: hsl(0, 0%, 90.2%);
34     --foreword-text-color: hsl(240, 2.3%, 56.7%);
35
36     --input-border-color: hsl(0, 0%, 83.9%);
37     --input-background-color: hsl(0, 0%, 100%);
38     --button-background-color: hsl(0, 0%, 100%);
39
40     --submit-button-background-color: hsl(199.8, 76.4%, 48.2%);
41     --submit-button-background-gradient: linear-gradient(hsl(199.9, 78.2%, 56.9%), hsl(200, 100%, 40%));
42     --submit-button-text-color: hsl(0, 0%, 100%);
43
44     --pagination-border-color: hsla(0, 0%, 0%, 0.07);
45     --pagination-button-shadow: inset hsla(0, 0%, 0%, 0.07) 0 0 0 1px;
46     --pagination-button-text-color: hsl(0, 0%, 100%);
47
48     --screen-reader-text-focus-color: hsl(198.7, 64.9%, 36.9%);
49     --screen-reader-text-border-color: hsla(0, 0%, 0%, 0.6);
50     --screen-reader-text-background-color: hsl(0, 0%, 94.5%);
51     --screen-reader-text-shadow: 0 0 2px 2px hsla(0, 0%, 0%, 0.6);
52
53     --next-router-background-color: hsl(0, 0%, 98%);
54     --previous-router-background-color: hsl(0, 0%, 95.7%);
55     --router-background-hover-color: hsl(0, 0%, 100%);
56     --router-text-color: hsl(0, 0%, 26.7%);
57     --router-text-color-light: hsl(0, 0%, 40%);
58
59     --tile-background-color: hsl(0, 0%, 100%);
60     --tile-border-color: hsla(0, 0%, 0%, 0.1);
61     --tile-subtle-border-shadow: inset hsla(0, 0%, 0%, 0.1) 0 0 0 1px;
62     --tile-subtle-image-border-shadoww: inset hsla(0, 0%, 0%, 0.1) 0 1px 0 1px;
63
64     --tile-default-background-color: hsl(215.3, 7.9%, 42.2%);
65     --tile-background-color-blue: hsl(200, 100%, 40%);
66     --tile-background-color-green: hsl(79.5, 45.3%, 52%);
67     --tile-background-color-violet: hsl(280, 18%, 57.5%);
68     --tile-background-color-rose: hsl(357.1, 39%, 58.8%);
69     --tile-background-color-orange: hsl(37.1, 100%, 37.5%);
70     --tile-background-color-goldenrod: hsl(45.3, 56.5%, 53.1%);
71     --tile-background-color-purplesafari: hsl(276.7, 36.3%, 51.4%);
72     --tile-background-color-amber: hsl(48, 100%, 50%);
73     --tile-background-vignette: linear-gradient(-180deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.95) 80%, hsla(0, 0%, 100%, 1));
74     --tile-background-vignette-dark: linear-gradient(-180deg, hsla(0, 0%, 0%, 0) 33%, hsla(0, 0%, 0%, 0.85));
75
76     --tag-window-background-color-gray: hsl(0, 0%, 94.9%);
77     --tag-window-vignette: linear-gradient(-180deg, hsla(0, 0%, 94.9%, 0) 25%, hsla(0, 0%, 94.9%, 1) 65%);
78
79     --submenu-background-color: hsla(0, 0%, 100%, 0.95);
80     --submenu-shadow: 0px 3px 20px 0px hsla(0, 0%, 0%, 0.1);
81     --submenu-border-color: hsl(0, 0%, 90.6%);
82     --header-menu-shadow: 0px 5px 5px hsla(0, 0%, 0%, 0.1);
83     --header-menu-background-color: hsla(0, 0%, 100%, 0.8);
84
85     --tile-background-color-amber: hsl(48, 100%, 50%);
86     --tile-background-color-twitter: hsl(197.9, 70.6%, 53.3%);
87     --gray-tile-text-color: hsl(232.8, 100%, 37.5%);
88
89     --article-border-color: hsl(0, 0%, 90.6%);
90     --article-scrollable-border-color: hsl(0, 0%, 80%);
91     --figure-caption-rule-color: hsl(0, 0%, 80%);
92     --toc-border-color: hsl(0, 0%, 83.9%);
93     --table-top-rule-color: hsl(0, 0%, 73.3%);
94     --table-rule-color: hsl(0, 0%, 87.8%);
95     --figure-mattewhite-background-color: hsl(0, 0%, 100%);
96
97     --syntax-color-keyword: hsl(292.5, 100%, 26.7%);
98     --syntax-color-keyword-operator: hsl(357.5, 100%, 33.1%);
99     --syntax-color-builtin: hsl(309.6, 85.8%, 35.9%);
100     --syntax-color-keyword-type: hsl(17.6, 80.4%, 44.1%);
101     --syntax-color-preprocessor: hsl(60, 20%, 50%);
102     --syntax-color-comment: hsl(180, 6.9%, 60.4%);
103     --syntax-color-comment-doc: hsl(186.3, 8.3%, 55.1%);
104     --syntax-color-identifier: hsl(209.6, 71.4%, 38.4%);
105     --syntax-color-string: hsl(70.8, 93%, 22.4%);
106     --syntax-color-escaped: hsl(0, 0%, 66.7%);
107     --syntax-color-number: hsl(194.5, 14.1%, 40.2%);
108     --syntax-color-attribute: hsl(44.8, 53.2%, 33.5%);
109     --syntax-color-attribute-value: hsl(1.4, 79.8%, 42.7%);
110     --syntax-color-operator: hsl(0, 0%, 53.3%);
111     --syntax-color-whitespace-background-color: hsl(0, 0%, 20%);
112     --syntax-color-doctype: hsl(0, 0%, 75.3%);
113     --syntax-color-error-border: hsl(0, 100%, 50%);
114     --syntax-color-property: hsl(295.7, 76.8%, 32.2%);
115     --syntax-color-xml-comment: hsl(120, 100%, 22.7%);
116     --syntax-color-xml-meta: hsl(180, 50%, 40%);
117     --syntax-color-css-property: hsl(309.6, 85.8%, 35.9%);
118     --syntax-color-css-selector: hsl(0, 0%, 0%);
119     --syntax-color-css-number: hsl(248.1, 100%, 40.6%);
120
121     --code-selection-background-color: hsl(212.3, 97.8%, 81.8%);
122 }
123
124 @media(prefers-color-scheme:dark) {
125     :root {
126         --background-color: hsl(203.6, 100%, 12%);
127         --link-color: hsl(206.7, 100%, 70%);
128         --text-color: hsl(240, 1.3%, 84.5%);
129         --text-color-light: hsl(0, 0%, 33.3%);
130         --text-color-medium: hsl(0, 0%, 51%);
131         --text-color-heading: hsl(120, 100%, 99.8%);
132         --text-color-coolgray: hsl(240, 2.3%, 56.7%);
133         --inverse-text-color: hsl(0, 0%, 100%);
134         --inverse-link-color: hsl(206.7, 100%, 70%);
135
136         --content-background-color: hsl(120, 2%, 9%);
137         --horizontal-rule-color: hsl(0, 0%, 33.3%);
138
139         --code-background-color: hsl(120, 1%, 19.4%);
140         --code-border-color: hsl(0, 0%, 26.7%);
141         --code-text-color: hsl(180, 6.9%, 84.5%);
142
143         --note-background-color: hsl(31.9, 20.5%, 33.1%);
144         --note-border-color: hsl(31.9, 20.5%, 42%);
145         --note-text-color: hsl(48.7, 55.2%, 75.5%);
146
147         --foreword-background-color: hsl(120, 1%, 19.4%);
148         --foreword-border-color: hsl(0, 0%, 26.7%);
149         --foreword-text-color: hsl(120, 1.3%, 55%);
150
151         --input-border-color: hsl(0, 0%, 26.7%);
152         --input-background-color: hsl(0, 0%, 0%);
153         --button-background-color: hsl(120, 2%, 14%);
154
155         --submit-button-background-color: hsl(199.8, 76.4%, 48.2%);
156         --submit-button-background-gradient: linear-gradient(hsl(199.9, 78.2%, 56.9%), hsl(200, 100%, 40%));
157         --submit-button-text-color: hsl(0, 0%, 100%);
158
159         --pagination-border-color: hsla(0, 0%, 100%, 0.1);
160         --pagination-button-shadow: inset hsla(0, 0%, 50%, 0.1) 0 0 0 1px;
161         --pagination-button-text-color: hsl(0, 0%, 100%);
162
163         --screen-reader-text-focus-color: hsl(198.7, 64.9%, 36.9%);
164         --screen-reader-text-border-color: hsla(0, 0%, 0%, 0.6);
165         --screen-reader-text-background-color: hsl(0, 0%, 94.5%);
166         --screen-reader-text-shadow: 0 0 2px 2px hsla(0, 0%, 0%, 0.6);
167
168         --next-router-background-color: hsl(120, 6.7%, 4.9%);
169         --previous-router-background-color: hsl(120, 4%, 8%);
170         --router-background-hover-color: hsl(0, 0%, 0%);
171         --router-text-color: hsl(120, 100%, 99.8%);
172         --router-text-color-light: hsl(30, 1%, 62%);
173
174         --tile-background-color: hsl(120, 2%, 12%);
175         --tile-border-color: hsl(0, 0%, 29%);
176         --tile-subtle-border-shadow: inset hsla(0, 0%, 50%, 0.1) 0 0 0 1px;
177         --tile-subtle-image-border-shadoww: inset hsla(0, 0%, 100%, 0.1) 0 1px 0 1px;
178
179         --tile-default-background-color: hsl(215.3, 7.9%, 42.2%);
180         --tile-background-color-blue: hsl(200, 100%, 40%);
181         --tile-background-color-green: hsl(79.5, 45.3%, 52%);
182         --tile-background-color-violet: hsl(280, 18%, 57.5%);
183         --tile-background-color-rose: hsl(357.1, 39%, 58.8%);
184         --tile-background-color-orange: hsl(37.1, 100%, 37.5%);
185         --tile-background-color-goldenrod: hsl(45.3, 56.5%, 53.1%);
186         --tile-background-color-purplesafari: hsl(276.7, 36.3%, 51.4%);
187         --tile-background-color-amber: hsl(48, 100%, 50%);
188         --tile-background-vignette: linear-gradient(-180deg, hsla(120, 2%, 12%, 0%), hsla(120, 2%, 12%, 0.95) 80%, hsla(120, 2%, 12%, 1));
189         --tile-background-vignette-dark: linear-gradient(-180deg, hsla(0, 0%, 0%, 0) 33%, hsla(0, 0%, 0%, 0.85));
190
191         --tag-window-background-color-gray: hsl(0, 0%, 94.9%);
192         --tag-window-vignette: linear-gradient(-180deg, hsla(0, 0%, 94.9%, 0) 25%, hsla(0, 0%, 94.9%, 1) 65%);
193
194         --submenu-background-color: hsla(0, 0%, 0%, 0.95);
195         --submenu-shadow: 0px 3px 20px 0px hsla(0, 0%, 20%, 0.1);
196         --submenu-border-color: hsl(0, 0%, 15%);
197         --header-menu-shadow: 0px 5px 5px hsla(0, 0%, 0%, 0.1);
198         --header-menu-background-color: hsla(0, 0%, 0%, 0.8);
199
200         --tile-background-color-amber: hsl(48, 100%, 50%);
201         --tile-background-color-twitter: hsl(197.9, 70.6%, 53.3%);
202         --gray-tile-text-color: hsl(232.8, 100%, 37.5%);
203
204         --article-border-color: hsl(120, 4.1%, 19.2%);
205         --article-scrollable-border-color: hsl(120, 4.1%, 19.2%);
206         --figure-caption-rule-color: hsl(0, 0%, 80%);
207         --toc-border-color: hsl(0, 0%, 83.9%);
208         --table-top-rule-color: hsl(0, 0%, 73.3%);
209         --table-rule-color: hsl(0, 0%, 87.8%);
210         --figure-mattewhite-background-color: hsl(0, 0%, 0%);
211
212         --syntax-color-keyword: hsl(299.2, 58.7%, 51.6%);
213         --syntax-color-keyword-operator: hsl(6.8, 69.4%, 57.6%);
214         --syntax-color-builtin: hsl(279.2, 84.3%, 57.6%);
215         --syntax-color-keyword-type: hsl(28.1, 72.2%, 46.5%);
216         --syntax-color-preprocessor: hsl(43.9, 51.4%, 58.8%);
217         --syntax-color-comment: hsl(0, 0%, 51%);
218         --syntax-color-comment-doc: hsl(186.3, 8.3%, 55.1%);
219         --syntax-color-identifier: hsl(210.2, 70.7%, 46.9%);
220         --syntax-color-string: hsl(119.2, 34.3%, 57.6%);
221         --syntax-color-escaped: hsl(0, 0%, 44%);
222         --syntax-color-number: hsl(200, 100%, 40%);
223         --syntax-color-attribute: hsl(43.9, 51.4%, 58.8%);
224         --syntax-color-attribute-value: hsl(28.1, 72.2%, 46.5%);
225         --syntax-color-operator: hsl(180, 6.9%, 60.4%);
226         --syntax-color-whitespace-background-color: hsl(0, 0%, 20%);
227         --syntax-color-doctype: hsl(0, 0%, 42%);
228         --syntax-color-error-border: hsl(0, 100%, 20%);
229         --syntax-color-property: hsl(299.2, 58.7%, 51.6%);
230         --syntax-color-xml-comment: hsl(119.2, 34.3%, 57.6%);
231         --syntax-color-xml-meta: hsl(180, 50%, 40%);
232         --syntax-color-css-property: hsl(309.6, 85.8%, 35.9%);
233         --syntax-color-css-selector: hsl(240, 1.3%, 84.5%);
234         --syntax-color-css-number: hsl(200, 100%, 40%);
235
236         --code-selection-background-color: hsl(214.2, 42.9%, 32.9%);
237     }
238 }
239
240 /** Resets **/
241 html, body, div, span, object, iframe,
242 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
243 a, abbr, acronym, address, big, cite, code,
244 del, dfn, em, img, ins, kbd, q, samp,
245 small, strike, strong, sub, sup, tt, var,
246 dl, dt, dd, ol, ul, li,
247 fieldset, form, label, legend,
248 table, caption, tbody, tfoot, thead, tr, th, td,
249 article, aside, canvas, details,
250 figure, figcaption, footer, header, hgroup,
251 menu, nav, output, section, summary,
252 time, mark, audio, video {
253     margin: 0;
254     padding: 0;
255     border: 0;
256     font: inherit;
257     vertical-align: baseline;
258 }
259 /* HTML5 display-role reset for older browsers */
260 article, aside, details, figcaption, figure,
261 footer, header, hgroup, menu, nav, section {
262     display: block;
263 }
264 html {
265     font-family: "SF Hello", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
266     font-size: 62.5%;
267     font-synthesis: none;
268 }
269 body {
270     font-size: 1.7rem;
271     font-weight: 400;
272     line-height: 1.52947;
273     letter-spacing: -0.021rem;
274     background-color: hsl(203.6, 100%, 12%);
275     background-color: var(--background-color);
276     color: hsl(0, 0%, 20%);
277     color: var(--text-color);
278 }
279 ol, ul {
280     list-style: none;
281 }
282 dl {
283     margin: 2rem 0;
284 }
285 dt {
286     font-weight: bold;
287 }
288 dd {
289     margin: 0 3rem;
290 }
291 blockquote, q {
292     quotes: none;
293 }
294 blockquote:before, blockquote:after,
295 q:before, q:after {
296     content: '';
297     content: none;
298 }
299 table {
300     border-collapse: collapse;
301     border-spacing: 0;
302 }
303 p:empty {
304     display: none;
305 }
306 a {
307     text-decoration: none;
308     transition: color 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* ease-out-exponential */
309 }
310 a:hover {
311     text-decoration: underline;
312 }
313 a,
314 a > code,
315 a[name]:hover {
316     color: hsl(200, 100%, 40%);
317     color: var(--link-color);
318 }
319
320 h1 a:hover {
321     text-decoration: none;
322 }
323 hr {
324     border: none;
325     border-bottom: 1px solid hsl(0, 0%, 86.7%);
326     border-bottom-color: var(--horizontal-rule-color);
327 }
328 strong {
329     font-weight: 600;
330 }
331 em {
332     font-style: italic;
333     font-weight: 300;
334 }
335 sup {
336     vertical-align: super;
337     font-size: smaller;
338     line-height: 1;
339 }
340 code {
341     font-family: "SF Mono", "Menlo", monospace;
342     font-size: 80%;
343     padding: 0 0.5rem;
344     border-radius: 2px;
345     border: 1px solid hsl(0, 0%, 90.6%);
346     border-color: var(--code-border-color);
347     background-color: hsl(0, 0%, 94.9%);
348     background-color: var(--code-background-color);
349     color: hsl(0, 0%, 26.7%);
350     color: var(--code-text-color);
351 }
352
353 main {
354     background-color: hsl(0, 0%, 96.9%);
355     background-color: var(--content-background-color);
356 }
357
358 /** Accessibility Helpers **/
359 a[name] {
360     display: inline-block;
361     position: relative;
362     top: -3rem;
363     color: hsl(0, 0%, 86.7%);
364     color: var(--text-color-light);
365     width: 0;
366     text-decoration: none;
367 }
368
369 p > a[name]::before {
370     content: "#";
371     margin-left: -1.7rem;
372     position: relative;
373     top: 3rem;
374     color: hsl(240, 2.3%, 56.7%);
375     color: var(--text-color-coolgray);
376     transition: color 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 500ms ease-in; /* ease-out-exponential */
377     opacity: 0.3;
378 }
379
380 a[name]:hover {
381     text-decoration: none;
382 }
383
384 a[name]:hover::before {
385     color: hsl(200, 100%, 40%);
386     color: var(--link-color);
387 }
388
389 p:hover > a[name]::before {
390     opacity: 1;
391 }
392
393 h1,
394 h2,
395 h3,
396 h4,
397 h5,
398 h6 {
399     text-rendering: optimizeLegibility;
400 }
401
402 h1 a[name],
403 h2 a[name],
404 h3 a[name],
405 h4 a[name],
406 h5 a[name],
407 h6 a[name] {
408     display: block;
409     visibility: hidden;
410 }
411
412 input[type=text] {
413     display: inline-block;
414     box-sizing: border-box;
415     vertical-align: top;
416     height: 4.2rem;
417     padding-top: 3px;
418     margin-bottom: 3rem;
419     padding-left: 1.5rem;
420     padding-right: 1.5rem;
421     text-align: left;
422     border-radius: 4px;
423     border: 1px solid hsl(0, 0%, 83.9%);
424     border-color: var(--input-border-color);
425     background-color: hsl(0, 0%, 100%);
426     background-color: var(--input-background-color);
427     background-clip: padding-box;
428     color: hsl(0, 0%, 20%);
429     color: var(--text-color);
430     font-family: "SF Hello", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
431     font-weight: 400;
432     font-size: 2rem;
433     line-height: 1.33333;
434     letter-spacing: normal;
435 }
436
437 input[type=submit] {
438     background-color: hsl(199.8, 76.4%, 48.2%);
439     background-color: var(--submit-button-background-color);
440     background-image: linear-gradient(hsl(199.9, 78.2%, 56.9%), hsl(200, 100%, 40%));
441     background-image: var(--submit-button-background-gradient);
442     border-radius: 4px;
443     color: white;
444     cursor: pointer;
445     font-size: 1.5rem;
446     font-weight: 500;
447     text-align: center;
448     border: 0;
449 }
450
451 .admin-bar a[name] {
452     top: calc(-32px - 3rem);
453 }
454
455 .admin-bar p > a[name]::before {
456     top: calc(32px + 3rem);
457 }
458
459 .screen-reader-text {
460     clip: rect(1px, 1px, 1px, 1px);
461     position: absolute !important;
462     height: 1px;
463     width: 1px;
464     overflow: hidden;
465 }
466
467 .screen-reader-text:focus {
468     background-color: hsl(0, 0%, 94.5%);
469     background-color: var(--screen-reader-text-background-color);
470     box-shadow: 0 0 2px 2px hsla(0, 0%, 0%, 0.6);
471     box-shadow: var(--screen-reader-text-shadow);
472     color: hsl(198.7, 64.9%, 36.9%);
473     color: var(--screen-reader-text-focus-color);
474     border-radius: 3px;
475     clip: auto !important;
476     display: block;
477     font-size: 14px;
478     font-size: 0.875rem;
479     font-weight: bold;
480     height: auto;
481     left: 5px;
482     line-height: normal;
483     padding: 15px 23px 14px;
484     text-decoration: none;
485     top: 5px;
486     width: auto;
487     z-index: 100000; /* Above WP toolbar. */
488 }
489
490 /** Page Layout **/
491 .page-width {
492     max-width: 1140px;
493     margin: 0 auto;
494 }
495
496 /** Header **/
497 header {
498     overflow: visible;
499     width: 100vw;
500     max-width: 100%;
501     padding-top: 1.5rem;
502     margin: 0;
503     position: relative;
504     z-index: 500;
505 }
506
507 .home header {
508     background-color: transparent;
509     transition: background 500ms ease-out, border 250ms ease-out;
510 }
511
512 @supports ( -webkit-backdrop-filter: blur(10px) ) {
513
514     .home header {
515         background-color: transparent;
516         backdrop-filter: blur(0px);
517         -webkit-backdrop-filter: blur(0px);
518     }
519
520     .sub-menu-layer {
521         backdrop-filter: blur(10px);
522         -webkit-backdrop-filter: blur(10px);
523     }
524 }
525
526 .nextrouter .link,
527 a.readmore {
528     background: url('images/chevron.svg') right no-repeat;
529     background-position-y: 0.6rem;
530     background-size: 0.5rem;
531     padding-right: 1rem;
532 }
533
534 a.download {
535     background: url('images/download.svg') right no-repeat;
536     padding-right: 4rem;
537 }
538
539 /** Pagination **/
540 .pagination {
541     text-align: center;
542     margin: 3rem auto 0;
543 }
544
545 .pagination::after {
546     content: ' ';
547     display: table;
548     padding-bottom: 3rem;
549 }
550
551 .pagination .page-numbers,
552 .pagination .menu-item a {
553     display: inline-block;
554     padding: 0.3rem 1rem 0.5rem;
555     background-color: hsl(0, 0%, 100%);
556     background-color: var(--button-background-color);
557     border-radius: 4px;
558     box-shadow: inset hsla(0, 0%, 0%, 0.07) 0 0 0 1px;
559     box-shadow: var(--pagination-button-shadow);
560     height: 2rem;
561     font-size: 1.7rem;
562     line-height: 1.29412;
563     font-weight: 400;
564     letter-spacing: -0.021em;
565 }
566
567 .pagination .menu-item a {
568     box-shadow: none;
569     border: 1px solid hsla(0, 0%, 0%, 0.07);
570     border-color: var(--pagination-border-color);
571 }
572
573 .pagination .page-numbers:not(.current, .dots):hover {
574     text-decoration: none;
575     background-color: hsl(200, 100%, 40%);
576     background-color: var(--link-color);
577     color: hsl(0, 0%, 100%);
578     color: var(--inverse-text-color);
579 }
580
581 .pagination .dots,
582 .pagination .page-numbers.current {
583     background-color: transparent;
584     box-shadow: none;
585 }
586
587 .pagination .prev-post,
588 .pagination .next-post {
589     min-width: 25%;
590 }
591
592 .pagination .prev-post {
593     text-align: right;
594 }
595
596 .pagination .next-post {
597     text-align: left;
598 }
599
600 .pagination .prev-post span,
601 .pagination .next-post span {
602     display: block;
603     font-size: 1.4rem;
604     font-weight: normal;
605 }
606
607 .connected.pagination .menu-item {
608     display: table-cell;
609 }
610
611 .connected.pagination .menu-item:hover a {
612     background-color: hsl(0, 0%, 98%);
613     background-color: var(--next-router-background-color);
614     box-shadow: hsla(206.7, 100%, 70%, 0.3) 0 0 5px 0px;
615     text-decoration: none;
616     border-radius: 4px;
617 }
618
619 .connected.pagination .menu-item:first-child a {
620     border-top-right-radius: 0px;
621     border-bottom-right-radius: 0px;
622     border-right-width: 0px;
623 }
624 .connected.pagination .menu-item:last-child a {
625     border-top-left-radius: 0px;
626     border-bottom-left-radius: 0px;
627 }
628
629 .connected.pagination .menu-item.current-menu-item a,
630 .connected.pagination .menu-item.current-menu-item:hover a
631 .connected.pagination .menu-item.current-menu-item a:hover {
632     background-color: transparent;
633     color: var(--text-color);
634     box-shadow: none;
635     text-decoration: none;
636 }
637
638 .menu-feature-pages-container {
639     display: inline-block;
640 }
641
642 /* Front page next button */
643 .pagination .next-button {
644     display: inline-block;
645     min-width: calc(33.33% - 3rem);
646     padding: 0.5rem 1rem 0.7rem;
647 }
648
649 .nextrouter {
650     position: relative;
651     background-color: hsl(0, 0%, 98%);
652     background-color: var(--next-router-background-color);
653     padding: 0;
654     width: 100vw;
655     left: 50%;
656     transform: translateX(-50%);
657 }
658
659 .nextrouter.previous {
660     text-align: right;
661     background-color: hsl(0, 0%, 95.7%);
662     background-color: var(--previous-router-background-color);
663 }
664
665 .nextrouter:hover,
666 .nextrouter.previous:hover {
667     background-color: hsl(0, 0%, 100%);
668     background-color: var(--router-background-hover-color);
669     transition: background-color 300ms ease-out;
670 }
671
672 .nextrouter .bodycopy {
673     max-width: 1140px;
674     margin: 0 auto;
675 }
676
677 .nextrouter a {
678     display: block;
679     cursor: pointer;
680     color: hsl(0, 0%, 26.7%);
681     color: var(--router-text-color);
682     width: 66%;
683     margin: 0 auto;
684 }
685
686 .nextrouter a:hover {
687     text-decoration: none;
688 }
689
690 .nextrouter-copy {
691     padding: 10rem 0 9.5rem 0;
692     font-size: 3.2rem;
693     font-weight: 500;
694     line-height: 1.09375;
695     letter-spacing: 0.011rem;
696 }
697
698 .nextrouter .label {
699     font-size: 2.2rem;
700     line-height: 1;
701     font-weight: 300;
702     letter-spacing: 0.016rem;
703     color: hsl(0, 0%, 40%);
704     color: var(--router-text-color-light);
705     display: block;
706     margin-bottom: 1.8rem;
707 }
708
709 .nextrouter .title {
710     display: block;
711 }
712
713 .nextrouter .link {
714     clear: left;
715     display: inline-block;
716     font-size: 1.7rem;
717     font-weight: 400;
718     line-height: 1.52947;
719     letter-spacing: -0.021rem;
720     color: hsl(200, 100%, 40%);
721     color: var(--link-color);
722     background-position-y: 1rem;
723 }
724
725 .nextrouter a:hover .link {
726     text-decoration: underline;
727 }
728
729 /** Footer **/
730 footer {
731     content: "";
732     display: table;
733     clear: both;
734     width: 100%;
735     padding-bottom: 1.65rem;
736     box-sizing: border-box;
737 }
738
739 footer .menu {
740     font-size: 1.3rem;
741 }
742
743 /** Tiles **/
744 .tiles {
745     font-size: 0;
746     display: -webkit-flex;
747     display: flex;
748     flex-wrap: wrap;
749     justify-content: space-between;
750     box-sizing: border-box;
751     width: 100%;
752 }
753
754 .tile {
755     background-color: hsl(120, 2%, 9%);
756     background-color: var(--tile-background-color);
757     box-shadow: inset hsla(0, 0%, 0%, 0.1) 0 0 0 1px;
758     box-shadow: var(--tile-subtle-border-shadow);
759     display: block;
760     margin: 0 0 15px;
761     position: relative;
762     vertical-align: top;
763     box-sizing: border-box;
764     overflow: hidden;
765 }
766
767 .tile.spacer {
768     background: none;
769     box-shadow: none;
770 }
771
772 .tile-link,
773 .tile-link:hover {
774     text-decoration: none;
775     display: block;
776     position: absolute;
777     top: 0;
778     left: 0;
779     width: 100%;
780     height: 100%;
781     font-size: 0;
782     z-index: 1;
783 }
784
785 .third-tile {
786     width: calc(33.33% - 10px);
787 }
788
789 .two-thirds-tile {
790     width: calc(66.66% - 5px);
791 }
792
793 .featured-tile {
794     padding: 0;
795 }
796
797 #icons {
798     display: none;
799 }
800
801 .tile .background-image {
802     position: relative;
803     margin-top: -1px;
804     height: 0;
805     padding-bottom: 80%;
806     overflow: hidden;
807     width: 100%;
808     background-color: hsl(215.3, 7.9%, 42.2%);
809     background-color: var(--tile-default-background-color);
810 }
811
812 .tile .background-image svg {
813     position: relative;
814     top: -12%;
815     width: 209%;
816     height: auto;
817     color: hsl(120, 2%, 9%);
818     color: var(--tile-background-color);
819 }
820
821 .tile .background-image.has-featured-image {
822     transition: filter 1s ease-in;
823     -webkit-filter: saturate(0);
824             filter: saturate(0);
825 }
826
827 .tile:not(.has-post-thumbnail) .featured-image {
828     display: none;
829 }
830
831 .tile.category-web-inspector svg {
832     background-color: hsl(200, 100%, 40%);
833     background-color: var(--tile-background-color-blue);
834 }
835
836 .tile.category-performance svg {
837     background-color: hsl(79.5, 45.3%, 52%);
838     background-color: var(--tile-background-color-green);
839 }
840
841 .tile.category-javascript svg {
842     background-color: hsl(280, 18%, 57.5%);
843     background-color: var(--tile-background-color-violet);
844 }
845
846 .tile.category-css svg {
847     background-color: hsl(357.1, 39%, 58.8%);
848     background-color: var(--tile-background-color-rose);
849 }
850
851 .tile.category-standards svg {
852     top: -20%;
853     background-color: hsl(37.1, 100%, 37.5%);
854     background-color: var(--tile-background-color-orange);
855 }
856
857 .tile.category-contributing svg {
858     background-color: hsl(45.3, 56.5%, 53.1%);
859     background-color: var(--tile-background-color-goldenrod);
860 }
861
862 .tile.category-storage svg {
863     background-color: hsl(280, 18%, 57.5%);
864     background-color: var(--tile-background-color-violet);
865 }
866
867 .tile.category-layout svg {
868     background-color: hsl(357.1, 39%, 58.8%);
869     background-color: var(--tile-background-color-rose);
870 }
871
872 .tile.category-safari-technology-preview svg {
873     background-color: hsl(276.7, 36.3%, 51.4%);
874     background-color: var(--tile-background-color-purplesafari);
875 }
876
877 .tile.category-accessibility svg {
878     top: -8%;
879     background-color: hsl(200, 100%, 40%);
880     background-color: var(--tile-background-color-blue);
881 }
882
883 .tile.category-security svg {
884     background-color: hsl(45.3, 56.5%, 53.1%);
885     background-color: var(--tile-background-color-goldenrod);
886 }
887
888 .tile.category-privacy svg {
889     background-color: hsl(45.3, 56.5%, 53.1%);
890     background-color: var(--tile-background-color-goldenrod);
891 }
892
893 .tile .background-image.loaded {
894     background: none;
895     border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
896     border-color: var(--tile-border-color);
897     -webkit-filter: saturate(1);
898             filter: saturate(1);
899 }
900
901 .tile .featured-image::before {
902     padding-bottom: 80%;
903     content: '';
904     display: block;
905 }
906
907 .tile .featured-image {
908     position: relative;
909     max-height: 450px;
910     background-size: cover;
911     background-position: 50% 50%;
912     background-repeat: no-repeat;
913
914     opacity: 0;
915     transition: opacity 0.4s ease-in;
916 }
917
918 .tile:not(.has-post-thumbnail) .background-image,
919 .tile .background-vignette {
920     box-shadow: inset hsla(0, 0%, 0%, 0.1) 0 1px 0 1px;
921     box-shadow: var(--tile-subtle-image-border-shadow);
922 }
923
924 .has-post-thumbnail .background-image {
925     filter: saturate(0);
926     -webkit-filter: saturate(0);
927     opacity: 0.1;
928 }
929
930 .has-post-thumbnail .background-image.loaded,
931 .tile .background-image.loaded .featured-image {
932     opacity: 1;
933 }
934
935 .featured-tile .background-image {
936     padding-bottom: 60%;
937     margin-bottom: 0;
938 }
939
940 .tile .tile-content {
941     font-size: 1.6rem;
942     line-height: 3rem;
943     max-width: 100%;
944     box-sizing: border-box;
945     padding: 2rem;
946 }
947
948 .featured-tile .tile-content {
949     padding: 0 24px;
950     box-sizing: border-box;
951     position: absolute;
952     transform: none;
953     bottom: 15px;
954     top: auto;
955 }
956
957 .background-vignette {
958     width: 100%;
959     padding-bottom: 60%;
960     position: absolute;
961     top:0;
962     background-image: linear-gradient(-180deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.95) 80%, hsla(0, 0%, 100%, 1));
963     background-image: var(--tile-background-vignette);
964 }
965
966 .tag-window .background-image {
967     background-color: hsl(0, 0%, 94.9%);
968     background-color: var(--tag-window-background-color-gray);
969 }
970
971 .tag-window .background-vignette {
972     background-image: linear-gradient(-180deg, hsla(0, 0%, 94.9%, 0) 25%, hsla(0, 0%, 94.9%, 1) 65%);
973     background-image: var(--tag-window-vignette);
974 }
975
976 .featured-tile.tag-dark.tile {
977     background: black;
978 }
979
980 .featured-tile.tag-dark .background-vignette {
981     background-image: linear-gradient(-180deg, hsla(0, 0%, 0%, 0) 33%, hsla(0, 0%, 0%, 0.85));
982     background-image: var(--tile-background-vignette-dark);
983 }
984
985 .featured-tile.tag-dark .tile-content {
986     color: hsl(0, 0%, 100%);
987     color: var(--inverse-text-color);
988 }
989
990 .featured-tile.tag-dark .tile-content a {
991     color: hsl(206.7, 100%, 70%);
992     color: var(--inverse-link-color);
993 }
994
995 .tag-transparent:not(.featured-tile) .featured-image {
996     box-shadow: none;
997     background-size: contain;
998 }
999
1000 .tag-transparent:not(.featured-tile) .background-image.loaded {
1001     border-bottom: none;
1002 }
1003
1004 .tile-content p {
1005     margin: 0;
1006 }
1007
1008 .tile h1 {
1009     font-size: 2.4rem;
1010     line-height: 1.20849;
1011     font-weight: 500;
1012     letter-spacing: 0.015rem;
1013     text-align: left;
1014     white-space: no-wrap;
1015 }
1016
1017 .tile h2 {
1018     font-size: 2.4rem;
1019     line-height: 1.20849;
1020     font-weight: 200;
1021     text-align: inherit;
1022 }
1023
1024 .tile .summary,
1025 .tile p {
1026     margin-top: 1.65rem;
1027 }
1028
1029 .icon-tile {
1030     text-align: center;
1031     font-size: 2rem;
1032 }
1033
1034 .icon-tile h2 + p {
1035     font-weight: 200;
1036     margin-bottom: 1rem;
1037 }
1038
1039 .icon-tile .icon {
1040     position: relative;
1041     background: url('images/compass.svg') no-repeat;
1042     background-position: 50% 50%;
1043     margin: 0 auto 3rem;
1044     padding: 40%;
1045 }
1046
1047 .icon-tile.download .icon {
1048     background-image: url('images/download.svg');
1049 }
1050
1051 .icon-tile.developer .icon {
1052     background-image: url('images/developer.svg');
1053 }
1054
1055 .icon-tile,
1056 .icon-tile a {
1057     color: hsl(0, 0%, 100%);
1058     color: var(--inverse-text-color);
1059 }
1060
1061 .gray-tile {
1062     background: linear-gradient(rgb(40, 40, 40), rgb(74, 74, 74));
1063     background-image: var(--tile-background-color-gray);
1064 }
1065 .gray-tile {
1066     color: hsl(0, 0%, 100%);
1067     color: var(--inverse-text-color);
1068 }
1069 .gray-tile a {
1070     color: hsl(232.8, 100%, 37.5%);
1071     color: var(--gray-tile-text-color);
1072 }
1073
1074
1075 .amber-tile {
1076     background-color: hsl(48, 100%, 50%);
1077     background-color: var(--tile-background-color-amber);
1078 }
1079 .blue-tile {
1080     background-color: hsl(200, 100%, 40%);
1081     background-color: var(--tile-background-color-blue);
1082 }
1083
1084 .twitter-tile {
1085     background-color: hsl(197.9, 70.6%, 53.3%);
1086     background-color: var(--tile-background-color-twitter);
1087 }
1088
1089 .twitter-tile, .twitter-tile a {
1090     color: white;
1091 }
1092
1093 .tile-content a {
1094     position: relative;
1095     z-index: 200;
1096 }
1097
1098 .twitter-tile .tile-content {
1099     position: relative;
1100     box-sizing: border-box;
1101     font-size: 2rem;
1102     text-align: center;
1103 }
1104
1105 .twitter-tile.text-only {
1106     display: -webkit-flex;
1107     display: flex;
1108     justify-content: center;
1109     text-align: left;
1110 }
1111
1112 .twitter-tile .media {
1113     text-align: center;
1114 }
1115
1116 .twitter-tile.text-only .tile-content {
1117     font-size: 2.5rem;
1118     font-weight: 400;
1119     line-height: 3rem;
1120     align-self: center;
1121     padding-bottom: 6rem;
1122 }
1123
1124 .twitter-tile img {
1125     display: inline-block;
1126     width: auto;
1127     height: auto;
1128     max-width: 100%;
1129     max-height: 256px;
1130 }
1131
1132 .twitter-controls {
1133     padding: 0 1.5rem;
1134     box-sizing: border-box;
1135     width: 100%;
1136     font-size: 1.5rem;
1137     line-height: 3rem;
1138     text-align: center;
1139     font-weight: 600;
1140     position: absolute;
1141     left: 0;
1142     bottom: 15px;
1143     z-index: 200;
1144     display: -webkit-flex;
1145     display: flex;
1146     -webkit-flex-wrap: wrap;
1147     flex-wrap: wrap;
1148     -webkit-justify-content: space-between;
1149     justify-content: space-between;
1150 }
1151
1152 .twitter-controls li {
1153     display: inline-block;
1154     margin: 0 1.3rem;
1155 }
1156
1157 .twitter-controls a {
1158     opacity: 0.66;
1159     transition: opacity 300ms ease-out;
1160 }
1161 .twitter-controls a:hover {
1162     opacity: 1;
1163     text-decoration: none;
1164 }
1165
1166 /** Twitter Icons **/
1167
1168 .twitter-icon {
1169     background: url('images/twitter.svg') no-repeat;
1170     background-size: cover;
1171 }
1172
1173 .icon.twitter-icon {
1174     color: hsl(0, 0%, 100%);
1175     color: var(--inverse-text-color);
1176     position: relative;
1177     margin: 3rem auto 3rem;
1178     width: 1px;
1179     padding: 33%;
1180     opacity: 0.33;
1181 }
1182
1183 .twitter-tile h2 {
1184     text-align: center;
1185 }
1186
1187 .twitter-controls .twitter-icon {
1188     text-indent: -9999em;
1189     display: inline-block;
1190     width: 2.5rem;
1191     height: 2.5rem;
1192 }
1193
1194 .twitter-icon.reply-icon {
1195     background-position-y: 33%;
1196 }
1197
1198 .twitter-icon.retweet-icon {
1199     background-position-y: 66%;
1200 }
1201
1202 .twitter-icon.favorite-icon {
1203     background-position-y: 99%;
1204 }
1205
1206 /** Code Syntax Highlighting **/
1207 pre {
1208     width: calc(100% + 6rem);
1209     overflow: auto;
1210     -webkit-overflow-scrolling: touch;
1211     background-color: hsl(0, 0%, 94.9%);
1212     background-color: var(--code-background-color);
1213     border: 1px solid hsl(0, 0%, 90.6%);
1214     border-color: var(--code-border-color);
1215     border-radius: 2px;
1216     box-sizing: border-box;
1217     padding: 3rem;
1218     margin-left: -3rem;
1219 }
1220
1221 code {
1222     color: hsl(0, 0%, 26.7%);
1223     color: var(--code-text-color);
1224     font-size: 1.6rem;
1225     line-height: 2.5rem;
1226 }
1227
1228 pre code {
1229     border: none;
1230     padding: 0;
1231 }
1232
1233 code .keyword,
1234 code.html .tag {
1235     color: hsl(292.5, 100%, 26.7%);
1236     color: var(--syntax-color-keyword);
1237 }
1238 code .keyword.builtin,
1239 code .keyword.literal {
1240     color: hsl(309.6, 85.8%, 35.9%);
1241     color: var(--syntax-color-builtin);
1242 }
1243 code .keyword.type {
1244     color: hsl(17.6, 80.4%, 44.1%);
1245     color: var(--syntax-color-keyword-type);
1246 }
1247 code .preprocessor {
1248     color: hsl(60, 20%, 50%);
1249     color: var(--syntax-color-preprocessor);
1250 }
1251 code .comment {
1252     color: hsl(180, 6.9%, 60.4%);
1253     color: var(--syntax-color-comment);
1254     float: none;
1255     display: inline;
1256 }
1257 code .comment .doc {
1258     color: hsl(186.3, 8.3%, 55.1%);
1259     color: var(--syntax-color-comment-doc);
1260     font-weight: bold;
1261 }
1262 code .identifier {
1263     color: hsl(209.6, 71.4%, 38.4%);
1264     color: var(--syntax-color-identifier);
1265 }
1266 code .string,
1267 code .char {
1268     color: hsl(70.8, 93%, 22.4%);
1269     color: var(--syntax-color-string);
1270 }
1271 code .escaped {
1272     color: hsl(0, 0%, 66.7%);
1273     color: var(--syntax-color-escaped);
1274 }
1275 code .number,
1276 code .tag {
1277     color: hsl(194.5, 14.1%, 40.2%);
1278     color: var(--syntax-color-number);
1279 }
1280 code .regex,
1281 code .attribute {
1282     color: hsl(44.8, 53.2%, 33.5%);
1283     color: var(--syntax-color-attribute);
1284 }
1285 code .attribute.value {
1286     color: hsl(1.4, 79.8%, 42.7%);
1287     color: var(--syntax-color-attribute-value);
1288 }
1289 code .operator {
1290     color: hsl(0, 0%, 53.3%);
1291     color: var(--syntax-color-operator);
1292 }
1293 code .keyword.operator {
1294     color: hsl(357.5, 100%, 33.1%);
1295     color: var(--syntax-color-keyword-operator);
1296 }
1297 code .whitespace {
1298     background-color: hsl(0, 0%, 20%);
1299     background-color: var(--syntax-color-whitespace-background-color);
1300 }
1301 code .error {
1302     border-bottom: 1px solid hsl(0, 100%, 50%);
1303     border-color: var(--syntax-color-error-border);
1304 }
1305 code .doctype {
1306     color: hsl(0, 0%, 75.3%);
1307     color: var(--syntax-color-doctype);
1308 }
1309 code .property {
1310     color: hsl(295.7, 76.8%, 32.2%);
1311     color: var(--syntax-color-property);
1312 }
1313
1314 code.xml .comment,
1315 code.html .comment {
1316     color: hsl(120, 100%, 22.7%);
1317     color: var(--syntax-color-xml-comment);
1318 }
1319
1320 code.xml .preprocessor .keyword {
1321     color: hsl(60, 20%, 50%);
1322     color: var(--syntax-color-preprocessor);
1323 }
1324 code.xml .meta,
1325 code.xml .meta .keyword {
1326     color: hsl(180, 50%, 40%);
1327     color: var(--syntax-color-xml-meta);
1328 }
1329
1330 code.cpp .preprocessor .identifier {
1331     color: hsl(60, 20%, 50%);
1332     color: var(--syntax-color-preprocessor);
1333 }
1334
1335 pre::-moz-selection,
1336 pre span::-moz-selection {
1337     background-color: hsl(212.3, 97.8%, 81.8%);
1338     background-color: var(--code-selection-background-color);
1339 }
1340
1341 pre::selection, pre span::selection {
1342     background-color: hsl(212.3, 97.8%, 81.8%);
1343     background-color: var(--code-selection-background-color);
1344 }
1345
1346 code.syntax { white-space: normal; }
1347 code.syntax .newlines { white-space: pre; display: block; }
1348
1349 code.css .attribute,
1350 code.css .identifier,
1351 code.css .preprocessor {
1352     color: hsl(309.6, 85.8%, 35.9%);
1353     color: var(--syntax-color-css-property);
1354 }
1355
1356 code.css .keyword {
1357     color: hsl(0, 0%, 0%);
1358     color: var(--syntax-color-css-selector);
1359 }
1360 code.css .number {
1361     color: hsl(248.1, 100%, 40.6%);
1362     color: var(--syntax-color-css-number);
1363 }
1364
1365 /** Post Typography **/
1366
1367 main {
1368     width: 100vw;
1369     max-width: 100%;
1370     overflow-x: hidden;
1371     box-sizing: border-box;
1372     padding: 3rem 0 0;
1373 }
1374
1375 article {
1376     padding-bottom: 3rem;
1377 }
1378
1379 article::after {
1380     clear: both;
1381     content: ' ';
1382     display: table;
1383 }
1384
1385 article h1,
1386 article h1 a {
1387     margin: 0 auto 3rem;
1388     font-size: 5.6rem;
1389     font-weight: 500;
1390     letter-spacing: 0.004rem;
1391     line-height: 1.10746;
1392     text-align: center;
1393     text-decoration: none;
1394     color: hsl(0, 0%, 26.7%);
1395     color: var(--text-color-heading);
1396 }
1397
1398 article h2 {
1399     font-size: 3.2rem;
1400     line-height: 1.09375;
1401     font-weight: 500;
1402     letter-spacing: -0.011rem;
1403     margin: 4rem 0 1rem;
1404 }
1405
1406 article h3 {
1407     font-size: 2.4rem;
1408     line-height: 1.09375;
1409     font-weight: 500;
1410     letter-spacing: -0.011rem;
1411 }
1412
1413 article h4 {
1414     font-size: 2.2rem;
1415     line-height: 1.09375;
1416     font-weight: 500;
1417 }
1418
1419 article h5 {
1420     font-size: 2rem;
1421     line-height: 1.09375;
1422     font-weight: 500;
1423 }
1424
1425 article h6 {
1426     font-size: 1.7rem;
1427     line-height: 1.09375;
1428     font-weight: 500;
1429 }
1430
1431 article h3,
1432 article h4,
1433 article h5,
1434 article h6 {
1435     margin-bottom: 0.5rem;
1436 }
1437
1438 article h2 + h3,
1439 article h3 + h4,
1440 article h4 + h5,
1441 article h5 + h6 {
1442     margin-top: 0;
1443 }
1444
1445 article p,
1446 article div > img,
1447 article pre,
1448 article hr {
1449     margin-bottom: 3rem;
1450 }
1451
1452 article .byline p {
1453     font-size: 1.5rem;
1454     line-height: 3rem;
1455     margin-bottom: 0;
1456     color: hsl(240, 2.3%, 56.7%);
1457     color: var(--text-color-coolgray);
1458 }
1459
1460 article .byline .date {
1461     font-weight: 900;
1462 }
1463
1464 article .byline .author {
1465     white-space: nowrap;
1466
1467 }
1468
1469 article table {
1470     font-size: 1.6rem;
1471     border-collapse: collapse;
1472     border-spacing: 0;
1473     margin: 3rem 0;
1474     width: 100%;
1475 }
1476
1477 article thead, article tfoot {
1478     border-top: 1px solid hsl(0, 0%, 73.3%);
1479     border-top-color: var(--table-top-rule-color);
1480     border-bottom: 1px solid hsl(0, 0%, 87.8%);
1481     border-bottom-color: var(--table-rule-color);
1482 }
1483
1484 article tr {
1485     border-top: 1px solid hsl(0, 0%, 87.8%);
1486     border-color: var(--table-rule-color);;
1487 }
1488
1489 article tr:first-child {
1490     border-top: 0 none;
1491 }
1492
1493 article th {
1494     font-weight: bold;
1495     vertical-align: bottom;
1496     text-align: left;
1497
1498 }
1499 article td, th {
1500     padding: 1.754386%;
1501 }
1502 article th:first-child {
1503     padding-left: 0;
1504 }
1505
1506 article ol,
1507 article ul {
1508     padding-left: 3rem;
1509     margin: 3rem 0;
1510 }
1511
1512 article ol {
1513     list-style-type: decimal;
1514 }
1515
1516 article ul {
1517     list-style-type: square;
1518 }
1519
1520 article ul ul,
1521 article ul ol,
1522 article ol ul,
1523 article ol ol {
1524     margin-top: 0;
1525     margin-bottom: 0;
1526 }
1527
1528 article blockquote {
1529     width: 100vw;
1530     height: auto;
1531     padding: 0 3rem;
1532     left: 50%;
1533     position: relative;
1534     margin-left: -50vw;
1535     box-sizing: border-box;
1536     font-weight: 200;
1537     font-size: 3rem;
1538     line-height: 4.2rem;
1539     text-align: center;
1540     color: hsl(240, 2.3%, 56.7%);
1541     color: var(--text-color-coolgray);
1542 }
1543 article blockquote > * {
1544     max-width: 1140px;
1545     margin-left: auto;
1546     margin-right: auto;
1547 }
1548
1549 article blockquote:first-child {
1550     width: 100%;
1551     text-align: left;
1552     margin: 0 auto;
1553     left: 0;
1554     padding: 0;
1555 }
1556
1557 .post .bodycopy > p:last-child:after {
1558     content: " \220E"; /* Tombstone */
1559     color: hsl(0, 0%, 33.3%);
1560     color: var(--text-color-medium);
1561 }
1562
1563 article div.note {
1564     margin-left: -3rem;
1565     margin-right: -3rem;
1566     padding: 3rem;
1567     background-color: hsl(50, 100%, 94%);
1568     background-color: var(--note-background-color);
1569     border: 1px solid hsl(40, 100%, 90%);
1570     border-color: var(--note-border-color);
1571     color: hsl(30, 90%, 35%);
1572     color: var(--note-text-color);
1573     border-radius: 3px;
1574     margin-bottom: 3rem;
1575     box-sizing: normal;
1576 }
1577
1578 article .foreword {
1579     padding: 1.6rem 2.2rem 1.6rem;
1580     line-height: 2.6rem;
1581     background-color: hsl(0, 0%, 94.1%);
1582     background-color: var(--foreword-background-color);
1583     border: 1px solid hsl(0, 0%, 90.2%);
1584     border-color: var(--foreword-border-color);
1585     color: hsl(240, 2.3%, 56.7%);
1586     color: var(--foreword-text-color);
1587     border-radius: 3px;
1588     margin-bottom: 3rem;
1589     box-sizing: normal;
1590     font-size: 1.6rem;
1591     font-style: italic;
1592 }
1593
1594 article .two-columns {
1595     columns: 2;
1596     column-gap: 6rem;
1597     margin: 3rem 0;
1598 }
1599
1600 article .two-columns h2,
1601 article .two-columns h3,
1602 article .two-columns h4,
1603 article .two-columns h5,
1604 article .two-columns h6 {
1605     break-after: avoid-column; /* https://bugs.webkit.org/show_bug.cgi?id=148814 */
1606 }
1607
1608 article .two-columns p {
1609     break-inside: avoid-column;
1610 }
1611
1612 /** Post Layout **/
1613
1614 article .byline {
1615     float: left;
1616     width: 191px;
1617     text-align: right;
1618     padding-right: 4rem;
1619     box-sizing: border-box;
1620 }
1621
1622 article .bodycopy {
1623     width: 66%;
1624     margin: 0 auto;
1625     position: relative;
1626 }
1627
1628 article .aligncenter .wp-caption-text {
1629     right: -50%;
1630 }
1631
1632 article .alignleft {
1633     float: left;
1634     margin: 1.5rem 1.5rem 1.5rem 0;
1635 }
1636
1637 article .aligncenter {
1638     clear: both;
1639     display: block;
1640     margin: 0 auto 3rem;
1641 }
1642
1643 article div.aligncenter {
1644     position: relative;
1645     float: right;
1646     right: 50%;
1647 }
1648
1649 article div.aligncenter img {
1650     position: relative;
1651     right: -50%;
1652 }
1653
1654 article .alignright {
1655     float: right;
1656     margin: 1.5rem 0 1.5rem 1.5rem;
1657 }
1658
1659 article .alignnone {
1660     display: block;
1661     float: none;
1662 }
1663
1664 article .alignnone.size-full {
1665     width: 100vw;
1666     height: auto;
1667     left: 50%;
1668     position: relative;
1669     -webkit-transform: translate(-50vw, 0);
1670     transform: translate(-50vw, 0);
1671 }
1672
1673 article .abovetitle {
1674     margin-top: -0.4em;
1675 }
1676
1677 article .pull-left {
1678     float: left;
1679     margin: 1.5rem 1.5rem 1.5rem -25%;
1680 }
1681
1682 article .pull-right {
1683     float: right;
1684     margin: 1.5rem -25% 1.5rem 1.5rem;
1685 }
1686
1687 article .cliptop {
1688     border-top: 1px solid hsl(0, 0%, 86.7%);
1689     border-color: var(--horizontal-rule-color);
1690 }
1691
1692 article .clipbottom {
1693     border-bottom: 1px solid hsl(0, 0%, 86.7%);
1694     border-color: var(--horizontal-rule-color);
1695 }
1696
1697 article .clipright {
1698     border-right: 1px solid hsl(0, 0%, 86.7%);
1699     border-color: var(--horizontal-rule-color);
1700 }
1701
1702 article .clipleft {
1703     border-left: 1px solid hsl(0, 0%, 86.7%);
1704     border-color: var(--horizontal-rule-color);
1705 }
1706
1707 article .mattewhite {
1708     background-color: hsl(0, 0%, 100%);
1709     background-color: var(--figure-mattewhite-background-color);
1710     border-top: 1px solid hsl(0, 0%, 90.6%);
1711     border-bottom: 1px solid hsl(0, 0%, 90.6%);
1712     border-color: var(--article-border-color);
1713     padding-top: 3rem;
1714     padding-bottom: 3rem;
1715 }
1716
1717 article .mattewhite:not(.widescreen) {
1718     border: 1px solid hsl(0, 0%, 90.6%);
1719     border-color: var(--article-border-color);
1720     padding: 3rem;
1721     margin-left: -3rem;
1722     margin-right: -3rem;
1723 }
1724
1725 article .mattewhite.tightwad {
1726     padding: 0;
1727 }
1728
1729 /** Article Figures **/
1730
1731 article figure {
1732     margin-bottom: 3rem;
1733     text-align: center;
1734 }
1735 article figure > img {
1736     display: inline-block;
1737     max-width: 100%;
1738     max-height: 540px;
1739     height: auto;
1740     width: auto;
1741 }
1742
1743 figure.widescreen {
1744     position: relative;
1745     width: 100vw;
1746     left: 50%;
1747     transform: translate(-50%);
1748 }
1749
1750 figure.widescreen img,
1751 figure.widescreen figcaption {
1752     display: block;
1753     margin: 0 auto;
1754 }
1755
1756 figure.widescreen figcaption {
1757     margin-top: 3rem;
1758 }
1759
1760 figure.widescreen video {
1761     max-height: 420px;
1762     max-width: 66%;
1763 }
1764
1765 figure.table {
1766     -webkit-overflow-scrolling: touch;
1767     width: calc(100% + 6rem);
1768     overflow: auto;
1769     border: 1px solid hsl(0, 0%, 90.6%);
1770     border-color: var(--code-border-color);
1771     background-color: hsl(0, 0%, 94.9%);
1772     background-color: var(--code-background-color);
1773     border-radius: 3px;
1774     box-sizing: border-box;
1775     padding: 3rem;
1776     margin-left: -3rem;
1777 }
1778
1779 article video.alignleft,
1780 article video.alignright {
1781     max-width: 50%;
1782 }
1783
1784 article .alignleft:first-child,
1785 article .alignright:first-child {
1786     margin-top: 0.5rem;
1787     margin-bottom: 0.5rem;
1788 }
1789
1790 article figcaption {
1791     text-align: left;
1792     margin-top: 1.5rem;
1793     line-height: 1.5;
1794     max-width: 970px;
1795     padding-left: 1.5rem;
1796     box-sizing: border-box;
1797     font-size: 1.3rem;
1798     font-weight: 400;
1799     color: hsl(0, 0%, 33.3%);
1800     color: var(--text-color-medium);
1801     position: relative;
1802 }
1803
1804 article figcaption::before {
1805     left: 1.5rem;
1806     width: 15%;
1807     height: 100%;
1808     bottom: 2.5rem;
1809     border-top: 1px solid hsl(0, 0%, 80%);
1810     border-color: var(--figure-caption-rule-color);
1811     content: '';
1812     opacity: 1;
1813     display: inline-block;
1814     box-sizing: border-box;
1815     position: absolute;
1816 }
1817
1818 figure.aligncenter figcaption {
1819     text-align: center;
1820     padding-left: 0;
1821 }
1822
1823 figure.aligncenter figcaption::before {
1824     margin: 0 auto;
1825     width: 20%;
1826     left: 50%;
1827     transform: translate(-50%);
1828 }
1829
1830 article .clipbottom + p + figcaption {
1831     margin-top: 1rem;
1832 }
1833
1834 article .clipbottom + p + figcaption::before {
1835     width: 0;
1836 }
1837
1838 /** Page Layout **/
1839 article.page h1 {
1840     text-align: left;
1841     width: 66%;
1842 }
1843
1844 .page .bodycopy h1 {
1845     width: 100%;
1846 }
1847
1848 /** Load Effects **/
1849
1850 @keyframes fade-in {
1851     from {
1852         opacity: 0;
1853     }
1854
1855     to {
1856         opacity: 1;
1857     }
1858 }
1859
1860 @-webkit-keyframes fade-in {
1861     from {
1862         opacity: 0;
1863     }
1864
1865     to {
1866         opacity: 1;
1867     }
1868 }
1869
1870 @keyframes fade-in-move-down {
1871     from {
1872         opacity: 0;
1873         -webkit-transform: translateY(-3rem);
1874         transform: translateY(-3rem)
1875     }
1876
1877     to {
1878         opacity: 1;
1879         -webkit-transform: translateY(0);
1880         transform: translateY(0)
1881     }
1882 }
1883
1884 @-webkit-keyframes fade-in-move-down {
1885     from {
1886         opacity: 0;
1887         -webkit-transform: translateY(-3rem);
1888         transform: translateY(-3rem)
1889     }
1890
1891     to {
1892         opacity: 1;
1893         -webkit-transform: translateY(0);
1894         transform: translateY(0)
1895     }
1896 }
1897
1898 article,
1899 .feature-status-page {
1900     -webkit-animation: fade-in-move-down 0.7s;
1901     animation: fade-in-move-down 0.7s;
1902 }
1903
1904 .tile {
1905     -webkit-animation: fade-in 0.4s;
1906     animation: fade-in 0.4s;
1907 }
1908
1909 /** Page Table of Contents **/
1910
1911 .table-of-contents {
1912     float: right;
1913     box-sizing: border-box;
1914     padding: 2.5rem 0 0 0;
1915     margin: 0 0 2.5rem 3rem;
1916
1917     max-width: 33%;
1918     z-index: 5;
1919     font-size: 1.4rem;
1920     line-height: 1.20849;
1921     border-top: 1px solid hsl(0, 0%, 83.9%);
1922     border-color: var(--toc-border-color);
1923 }
1924
1925 article .table-of-contents label {
1926     font-size: 1.7rem;
1927     font-weight: 500;
1928     margin-bottom: 1.65rem;
1929 }
1930
1931 .table-of-contents ul {
1932     margin: 0;
1933     list-style: none;
1934     margin-top: 1.65rem;
1935 }
1936
1937 .table-of-contents .list > ul {
1938     padding-left: 0;
1939 }
1940
1941 .table-of-contents ul li {
1942     margin-bottom: 1.65rem;
1943 }
1944
1945 .table-of-contents ul li:last-child {
1946     margin-bottom: 0;
1947 }
1948
1949 .table-of-contents ul li > ul {
1950     margin-top: 1.65rem;
1951 }
1952
1953 .with-toc pre:nth-child(-n+6),
1954 #post-4132 pre:nth-child(-n+10) {
1955     width: 55%;
1956     z-index: -1;
1957 }
1958
1959 /** Logo **/
1960 .site-logo {
1961     float: left;
1962     font-size: 3rem;
1963     line-height: 1.04167;
1964     letter-spacing: 0.015rem;
1965     font-weight: 500;
1966     text-rendering: optimizeLegibility;
1967     display: inline-block;
1968     background: url('images/webkit.svg') no-repeat;
1969     padding: 1rem 0 1rem 5.5rem;
1970     color: hsl(0, 0%, 100%);
1971     color: var(--inverse-text-color);
1972 }
1973
1974 .hero .logo {
1975     background-image: url('images/webkit.svg');
1976 }
1977
1978 /** Status Page **/
1979
1980 .feature-header:after,
1981 .property-header:after {
1982     display: inline-block;
1983     content: "";
1984     background: url('images/menu-down.svg') no-repeat 50%;
1985     background-size: 2rem;
1986 }
1987
1988 /** Navigation **/
1989
1990 .label-toggle {
1991     cursor: pointer;
1992 }
1993
1994 header nav {
1995     text-align: right;
1996 }
1997
1998 /* Hide menu toggle checkboxes */
1999 input.menu-toggle {
2000     visibility: hidden;
2001     position: absolute;
2002     top: 0;
2003     left: 0;
2004 }
2005
2006 footer {
2007
2008 }
2009
2010 footer nav {
2011     padding: 1.65rem 0 0;
2012 }
2013
2014 header nav li {
2015     display: inline-block;
2016     padding: 1.5rem 0 1.5rem 3rem;
2017 }
2018
2019 footer nav li {
2020     display: inline-block;
2021     position: relative;
2022     padding: 0 0 1.5rem 3rem;
2023 }
2024
2025 footer nav li:first-child {
2026     padding-left: 0;
2027 }
2028
2029 header nav a,
2030 .sub-menu a,
2031 footer nav a {
2032     position: relative;
2033     display: inline-block;
2034     text-decoration: none;
2035     font-size: 1.4rem;
2036     line-height: 1.5455;
2037     letter-spacing: -0.015rem;
2038     letter-spacing: 0;
2039     cursor: pointer;
2040     font-weight: 500;
2041     color: hsl(0, 0%, 20%);
2042     color: var(--text-color);
2043 }
2044
2045 header nav a,
2046 footer nav a {
2047     color: hsl(0, 0%, 100%);
2048     color: var(--inverse-text-color);
2049 }
2050
2051 header nav a:hover,
2052 footer nav a:hover {
2053     color: hsl(200, 100%, 40%);
2054     color: var(--link-color);
2055     text-decoration: none;
2056 }
2057
2058 header .menu-item-has-children .label-toggle::after {
2059     background: url('images/menu-down.svg') no-repeat;
2060     background-size: 1.2rem;
2061     display: inline-block;
2062     padding-right: 1.2rem;
2063     padding-top: 0.8rem;
2064     margin-left: 0.5rem;
2065     margin-top: -0.1rem;
2066     content: '';
2067
2068     -webkit-filter: invert(100%);
2069     filter: invert(100%);
2070     perspective: 600;
2071
2072     transition: transform 0.3s ease-out;
2073 }
2074
2075 header .menu-item { /* add bottom dimension to main menu items */
2076     padding-bottom: 2.5rem;
2077 }
2078
2079 .sub-menu-layer {
2080     text-align: center;
2081     padding: 3rem;
2082     box-sizing: border-box;
2083
2084     width: 21rem;
2085     margin-left: -11rem;
2086     margin-top: -99rem;
2087
2088     position: absolute;
2089     top: 7rem;
2090     transform: translateY(-1rem);
2091
2092     background-color: hsla(0, 0%, 100%, 0.95);
2093     background-color: var(--submenu-background-color);
2094     box-shadow: 0px 3px 20px 0px hsla(0, 0%, 0%, 0.1);
2095     box-shadow: var(--submenu-shadow);
2096     border: 1px solid hsl(0, 0%, 90.6%);
2097     border-color: var(--submenu-border-color);
2098     border-radius: 5px;
2099
2100     transition: opacity 0.6s;
2101     opacity: 0;
2102 }
2103
2104 .sub-menu-layer:after, .sub-menu-layer:before {
2105     bottom: 100%;
2106     left: 71%;
2107     border: solid transparent;
2108     content: " ";
2109     height: 0;
2110     width: 0;
2111     position: absolute;
2112     pointer-events: none;
2113
2114 }
2115
2116 .sub-menu-layer:after {
2117     border-bottom-color: hsla(0, 0%, 100%, 0.95);
2118     border-bottom-color: var(--submenu-background-color);
2119     border-width: 10px;
2120     margin-left: -10px;
2121 }
2122
2123 .sub-menu-layer:before {
2124     border-bottom-color: hsla(0, 0%, 100%, 0.95);
2125     border-bottom-color: var(--submenu-background-color);
2126     border-width: 11px;
2127     margin-left: -11px;
2128 }
2129
2130 .sub-menu-layer .menu-item {
2131     padding: 1.5rem 0 0 0;
2132     width: 100%;
2133 }
2134
2135 .sub-menu-layer .menu-item:first-child {
2136     padding: 0;
2137 }
2138
2139 .menu > .menu-item > a:focus ~ .sub-menu,
2140 .menu > .menu-item.open-menu > .sub-menu,
2141 .menu > .menu-item:hover > .sub-menu,
2142 .menu > .menu-item > .menu-toggle:checked + .sub-menu {
2143     display: block;
2144     box-sizing: border-box;
2145     z-index: 1;
2146     opacity: 1;
2147     transform: translateY(0);
2148     margin-top: 0;
2149 }
2150
2151 /** Accessibility **/
2152
2153 @media (prefers-reduced-motion) {
2154     article,
2155     .feature-status-page {
2156         -webkit-animation: fade-in 0.7s;
2157         animation: fade-in 0.7s;
2158     }
2159 }
2160
2161 /** Screen Breakpoints **/
2162
2163 @media only screen and (max-width: 1180px) {
2164     .page-width {
2165         max-width: 1140px;
2166         padding-left: 2rem;
2167         padding-right: 2rem;
2168     }
2169
2170     article .byline {
2171         width: 60%;
2172         margin: 0 auto;
2173         float: none;
2174         text-align: center;
2175         margin-bottom: 3rem;
2176         padding-right: 0;
2177     }
2178
2179     article .byline p {
2180         display: inline;
2181     }
2182 }
2183
2184 @media only screen and (max-width: 1000px) {
2185     article.page h1 {
2186         width: 90%;
2187         margin-bottom: 3rem;
2188     }
2189
2190     article .byline {
2191         width: 60%;
2192         margin: 0 auto;
2193         float: none;
2194         text-align: center;
2195         margin-bottom: 3rem;
2196     }
2197
2198     article .byline p {
2199         display: inline;
2200     }
2201
2202     article .bodycopy {
2203         width: 90%;
2204     }
2205 }
2206
2207 @media only screen and (max-width: 920px) {
2208     .main-menu.label-toggle {
2209         display: inline-block;
2210         margin: 1.5rem 0 2.5rem;
2211         height: 3rem;
2212         width: 3rem;
2213         background: url('images/menu-down.svg') no-repeat 50%;
2214         cursor: pointer;
2215
2216         transition: transform 0.3s ease-out;
2217
2218         -webkit-filter: invert(100%);
2219         filter: invert(100%);
2220         perspective: 600;
2221         transform: translateZ(10rem);
2222     }
2223
2224     .menu-toggle:checked + .main-menu.label-toggle,
2225     header .menu-item > .menu-toggle:checked + a > .label-toggle::after {
2226         -webkit-transform: rotateX(-180deg);
2227         -moz-transform: rotateX(-180deg);
2228         transform: rotateX(-180deg);
2229         perspective: 600;
2230     }
2231
2232     header .menu {
2233         display: none;
2234         position: absolute;
2235         left: 0;
2236         margin-top: 1px;
2237         padding-top: 3rem;
2238         text-align: left;
2239         width: 100vw;
2240         overflow: hidden;
2241         box-shadow: 0px 5px 5px hsla(0, 0%, 0%, 0.1);
2242         box-shadow: var(--header-menu-shadow);
2243
2244         backdrop-filter: blur(20px);
2245         -webkit-backdrop-filter: blur(10px);
2246         background-color: hsla(0, 0%, 100%, 0.8);
2247         background-color: var(--header-menu-background-color);
2248     }
2249
2250     header nav a {
2251         color: hsl(0, 0, 100%);
2252         color: var(--text-color);
2253     }
2254
2255     header .menu-toggle:checked ~ ul {
2256         display: block;
2257         opacity: 1;
2258     }
2259
2260     header .menu-item-has-children .label-toggle::after {
2261         -webkit-filter: invert(0%);
2262         filter: invert(0%);
2263     }
2264
2265     header .menu-main-menu-container >  ul > li {
2266         width: 100vw;
2267         position: relative;
2268         padding: 0 3rem 3rem;
2269         box-sizing: border-box;
2270         transition: opacity 0.6s;
2271     }
2272
2273     header .menu > .menu-item > .sub-menu {
2274         box-shadow: none;
2275         border-bottom: 1px solid hsl(0, 0%, 90.6%);
2276         border-color: var(--submenu-border-color);
2277     }
2278
2279     header .menu > .menu-item-has-children {
2280         margin-left: 0;
2281     }
2282
2283     header .sub-menu-layer {
2284         text-align: left;
2285         width: 100vw;
2286         left: 50%;
2287         margin-left: -50vw;
2288         border-radius: 0;
2289         border-left: none;
2290         border-right: none;
2291         opacity: 0;
2292         transform: translateY(0);
2293         transition: opacity 0.6s;
2294     }
2295
2296     header .sub-menu-layer:after, .sub-menu-layer:before {
2297         bottom: 100%;
2298         left: 71%;
2299         border: solid transparent;
2300         content: " ";
2301         height: 0;
2302         width: 0;
2303         position: absolute;
2304         pointer-events: none;
2305     }
2306
2307     header .sub-menu-layer:after {
2308         border: none;
2309         margin-left: -10px;
2310     }
2311
2312     header .sub-menu-layer:before {
2313         border: none;
2314         margin-left: -11px;
2315     }
2316
2317     header .menu > .menu-item > .menu-toggle:checked ~ .sub-menu {
2318         position: relative;
2319         top: 1.5rem;
2320         margin-top: 0;
2321     }
2322
2323     footer nav li {
2324         padding: 0 3rem 3rem 0;
2325     }
2326
2327 }
2328
2329 @media only screen and (max-width: 690px) {
2330     article h1 {
2331         font-size: 3.4rem;
2332     }
2333
2334     .featured-tile {
2335         padding: 0;
2336     }
2337
2338     .tile.spacer {
2339         height: 0;
2340         min-height: 0;
2341         margin-bottom: 0;
2342     }
2343
2344     .page-width {
2345         max-width: 100vw;
2346         padding-left: 1rem;
2347         padding-right: 1rem;
2348         overflow: hidden;
2349         box-sizing: border-box;
2350     }
2351
2352     .tile {
2353         min-height: 375px;
2354     }
2355
2356     .third-tile,
2357     .two-thirds-tile {
2358         width: calc(100% - 1px);
2359     }
2360
2361     .icon-tile .icon {
2362         margin-top: -40%;
2363     }
2364
2365     .with-toc pre:nth-child(-n+8),
2366     article pre {
2367         position: relative;
2368         width: 100vw;
2369         left: 50%;
2370         transform: translate(-50%);
2371         margin-left: 0;
2372         border-radius: 0;
2373         border-left: none;
2374         border-right: none;
2375     }
2376
2377     .table-of-contents { /* hug the edge */
2378         right: 0;
2379     }
2380
2381     .pagination .prev-post,
2382     .pagination .next-post {
2383         min-width: auto;
2384         width: 90%;
2385         text-align: right;
2386     }
2387
2388     .pagination .prev-post {
2389         margin-bottom: 1rem;
2390         text-align: left;
2391     }
2392
2393     .nextrouter-copy {
2394         font-size: 2.2rem;
2395     }
2396
2397     article .scrollable {
2398         overflow: auto;
2399         -webkit-overflow-scrolling: touch;
2400         position: relative;
2401         width: 100vw;
2402         left: 50%;
2403         transform: translate(-50%);
2404         margin: 3rem 0;
2405         border: 1px solid hsl(0, 0%, 80%);
2406         border-color: var(--article-scrollable-border-color);
2407         border-left: none;
2408         border-right: none;
2409     }
2410
2411     article video.alignleft,
2412     article video.alignright {
2413         min-width: 30rem;
2414     }
2415
2416     .scrollable .scrollable-padding {
2417         display: inline-block;
2418         padding: 0 3rem;
2419     }
2420 }
2421
2422 @media only screen and (max-width: 600px) {
2423     header {
2424         padding-top: 1rem;
2425     }
2426
2427     .site-logo {
2428         font-size: 4rem;
2429         padding-left: 6.4rem;
2430     }
2431
2432     header nav .main-menu.label-toggle {
2433         margin-top: 2rem;
2434         margin-bottom: 2rem;
2435     }
2436
2437     #wpadminbar {
2438         position: absolute;
2439     }
2440
2441     .table-of-contents {
2442         /* Collapse */
2443         height: 7rem;
2444         overflow: hidden;
2445         border-bottom-width: 1px;
2446         border-bottom-style: solid;
2447
2448         /* one-column */
2449         width: 100vw;
2450         max-width: 100%;
2451         position: relative;
2452         float: none;
2453         padding-bottom: 2.5rem;
2454         margin: 0 0 3rem 0;
2455     }
2456
2457     .menu-toggle:checked ~ .table-of-contents {
2458         height: auto;
2459     }
2460
2461     .table-of-contents label {
2462         display: block;
2463     }
2464
2465     .table-of-contents label:after {
2466         display: inline-block;
2467         content: "";
2468         background: url('images/menu-down.svg') no-repeat 50%;
2469         background-size: 1rem;
2470         width: 2rem;
2471         height: 2rem;
2472         position: absolute;
2473         transition: transform 0.3s ease-out;
2474         perspective: 600;
2475     }
2476
2477     .menu-toggle:checked ~ .table-of-contents label:after {
2478         -webkit-transform: rotateX(-180deg);
2479         -moz-transform: rotateX(-180deg);
2480         transform: rotateX(-180deg);
2481     }
2482
2483     .table-of-contents h6 {
2484         margin-bottom: 3rem;
2485     }
2486
2487     .with-toc pre:nth-child(-n+6),
2488     #post-4132 pre:nth-child(-n+8) {
2489         width: 100vw;
2490     }
2491
2492     article video.alignleft,
2493     article video.alignright {
2494         max-width: 100%;
2495         min-width: none;
2496         width: 100%;
2497     }
2498
2499     article .alignleft:first-child,
2500     article .alignright:first-child {
2501         margin-bottom: 3rem;
2502     }
2503
2504 }
2505
2506 @media only screen and (max-width: 415px) {
2507
2508     .nextrouter-copy {
2509         font-size: 1.7rem;
2510         letter-spacing: -0.016rem;
2511     }
2512 }
2513
2514 @media only screen and (max-height: 415px) {
2515
2516     .home .site-logo {
2517         opacity: 1;
2518         margin-top: 0;
2519     }
2520
2521     header,
2522     .home header {
2523         padding-top: 1rem;
2524     }
2525
2526     @supports(padding:max(0px)) {
2527         header,
2528         header .menu,
2529         .home header,
2530         .home .hero .content,
2531         .feature-filters,
2532         #content,
2533         #nightly,
2534         footer {
2535             box-sizing: border-box;
2536             padding-left: env(safe-area-inset-left);
2537             padding-right: env(safe-area-inset-right);
2538         }
2539
2540         header .menu .menu-item > .sub-menu {
2541             border: none;
2542             background: none;
2543         }
2544
2545         .sub-menu-layer {
2546             padding: 0 3rem;
2547         }
2548
2549         .sub-menu-layer .menu-item:first-child,
2550         .sub-menu-layer .menu-item {
2551             padding: 0 0 1.5rem 1.5rem;
2552         }
2553
2554     }
2555
2556     .tile {
2557         overflow: hidden;
2558     }
2559
2560     .tile .background-image {
2561         padding-bottom: 33%;
2562     }
2563
2564     .tile .background-image svg {
2565         top: -65%;
2566     }
2567
2568
2569     .table-of-contents {
2570         height: 9rem;
2571         overflow: hidden;
2572         margin-right: -10%;
2573     }
2574
2575     .menu-toggle:checked ~ .table-of-contents {
2576         height: auto;
2577     }
2578
2579     .table-of-contents label {
2580         display: block;
2581     }
2582
2583     .table-of-contents label:after {
2584         display: inline-block;
2585         content: "";
2586         background: url('images/menu-down.svg') no-repeat 50%;
2587         background-size: 1rem;
2588         width: 2rem;
2589         height: 2rem;
2590         position: absolute;
2591         transition: transform 0.3s ease-out;
2592         perspective: 600;
2593     }
2594
2595     .menu-toggle:checked ~ .table-of-contents label:after {
2596         -webkit-transform: rotateX(-180deg);
2597         -moz-transform: rotateX(-180deg);
2598         transform: rotateX(-180deg);
2599     }
2600
2601     .table-of-contents h6 {
2602         margin-bottom: 3rem;
2603     }
2604
2605     .with-toc pre:nth-child(-n+6),
2606     #post-4132 pre:nth-child(-n+8) {
2607         width: 100vw;
2608     }
2609 }
2610
2611 @media(prefers-color-scheme:dark) {
2612     article .invert-brightness,
2613     figure img {
2614         filter: url(#invertLightness);
2615     }
2616
2617     .preserve-color, video {
2618         filter: brightness(0.7);
2619         transition: filter 0.3s ease-out;
2620     }
2621
2622     .preserve-color:hover,
2623     figure:hover .preserve-color,
2624     figure:hover video,
2625     video:hover {
2626         filter: brightness(1);
2627     }
2628
2629     .nextrouter .link,
2630     a.readmore {
2631         background-image: url('images/chevron-dark.svg');
2632     }
2633 }
2634
2635 #template {
2636     background-image: url('images/template.svg');
2637 }
2638
2639 #compass {
2640     background-image: url('images/compass.svg');
2641 }
2642
2643 .search-input {
2644     background-image: url('images/search.svg');
2645 }
2646
2647 .filters-toggle-button {
2648     background-image: url('images/filter.svg');
2649 }