diff --git a/content/posts/development/lovely-dangerous-things-redhat.md b/content/posts/development/lovely-dangerous-things-redhat.md index fd4333c..0d4246a 100644 --- a/content/posts/development/lovely-dangerous-things-redhat.md +++ b/content/posts/development/lovely-dangerous-things-redhat.md @@ -4,7 +4,7 @@ date: 2022-02-27 20:47 modified: 2022-03-07 22:47 category: development tags: [tekton, go, kubernetes, openshift, redhat, intern, golang, openshift-pipelines] -description: This blog is a descreptive account of the development of Minimal Tekton Server. This is highly technical in nature, so please make sure that you have sufficient knowledge about Golang, Docker, Kubernetes and TektonCD. You can refer to my [previous blog]("https://avinal.space/posts/development/i-am-loving-it-redhat.html") to know about these topics. +description: 'This blog is a descreptive account of the development of Minimal Tekton Server. This is highly technical in nature, so please make sure that you have sufficient knowledge about Golang, Docker, Kubernetes and TektonCD. You can refer to my [previous blog]("https://avinal.space/posts/development/i-am-loving-it-redhat.html") to know about these topics.' --- # Developing Minimal Tekton Server diff --git a/public/fonts/Inter.var.woff2 b/public/fonts/Inter.var.woff2 new file mode 100644 index 0000000..365eedc Binary files /dev/null and b/public/fonts/Inter.var.woff2 differ diff --git a/public/foo-style.css b/public/foo-style.css index abccac5..91e061e 100644 --- a/public/foo-style.css +++ b/public/foo-style.css @@ -1,14 +1,14 @@ @charset "UTF-8"; a, -abbr, +/* abbr, */ acronym, address, applet, -article, +/* article, */ aside, audio, -b, +/* b, */ big, blockquote, canvas, @@ -26,8 +26,8 @@ dt, em, embed, fieldset, -figcaption, -figure, +/* figcaption, */ +/* figure, */ footer, form, /* h1, @@ -39,8 +39,8 @@ h6, */ header, hgroup, html, -i, -iframe, +/* i, */ +/* iframe, */ img, ins, kbd, @@ -59,7 +59,7 @@ q, ruby, s, samp, -section, +/* section, */ small, /* span, */ strike, @@ -1436,7 +1436,7 @@ body { .foo-console, .foo-console .foo-cmd { - font-family: "Share Tech Mono", monospace; + /* font-family: "Share Tech Mono", monospace; */ color: #fff } diff --git a/public/foo-style.min.css b/public/foo-style.min.css new file mode 100644 index 0000000..8df152f --- /dev/null +++ b/public/foo-style.min.css @@ -0,0 +1 @@ +@charset "UTF-8";a, acronym, address, applet, aside, audio, big, blockquote, canvas, caption, center, cite, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, footer, form, header, hgroup, html, img, ins, kbd, label, legend, li, mark, menu, nav, object, output, q, ruby, s, samp, small, strike, strong, sub, summary, sup, time, tt, u, ul, var, video {margin: 0;padding: 0;border: 0;font: inherit;vertical-align: baseline }body {margin: 0;padding: 0;border: 0;vertical-align: baseline;line-height: 1 }article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block }ul {list-style: none }blockquote, q {quotes: none }blockquote:after, blockquote:before, q:after, q:before {content: none }.foo-footer ul, .foo-grid {list-style: none;padding: 0;margin: 0 0 0 -24px }.foo-grid__item {display: inline-block;vertical-align: top;width: 100%;box-sizing: border-box }.foo-console, .foo-console .foo-terminal-output .foo-output--column, .foo-grid__item {padding-left: 24px }.foo-console, .foo-console .foo-terminal-output .foo-output--column, .foo-editor {display: inline-block;vertical-align: top;box-sizing: border-box }.foo-grid--rev {direction: rtl;text-align: left }.foo-console .foo-terminal-output .foo-grid--rev>.foo-output--column, .foo-grid--rev>.foo-console, .foo-grid--rev>.foo-editor, .foo-grid--rev>.foo-grid__item {direction: ltr;text-align: left }.foo-grid--full {margin-left: 0 }.foo-console .foo-terminal-output .foo-grid--full>.foo-output--column, .foo-grid--full>.foo-console, .foo-grid--full>.foo-editor, .foo-grid--full>.foo-grid__item {padding-left: 0 }.foo-grid--right {text-align: right }.foo-console .foo-terminal-output .foo-grid--center>.foo-output--column, .foo-console .foo-terminal-output .foo-grid--right>.foo-output--column, .foo-grid--center>.foo-console, .foo-grid--center>.foo-editor, .foo-grid--center>.foo-grid__item, .foo-grid--right>.foo-console, .foo-grid--right>.foo-editor, .foo-grid--right>.foo-grid__item {text-align: left }.foo-grid--center {text-align: center }.foo-console .foo-terminal-output .foo-grid--middle>.foo-output--column, .foo-grid--middle>.foo-console, .foo-grid--middle>.foo-editor, .foo-grid--middle>.foo-grid__item {vertical-align: middle }.foo-console .foo-terminal-output .foo-grid--bottom>.foo-output--column, .foo-grid--bottom>.foo-console, .foo-grid--bottom>.foo-editor, .foo-grid--bottom>.foo-grid__item {vertical-align: bottom }.foo-grid--narrow {margin-left: -12px }.foo-console .foo-terminal-output .foo-grid--narrow>.foo-output--column, .foo-grid--narrow>.foo-console, .foo-grid--narrow>.foo-editor, .foo-grid--narrow>.foo-grid__item {padding-left: 12px }.foo-grid--wide {margin-left: -48px }.foo-console .foo-terminal-output .foo-grid--wide>.foo-output--column, .foo-grid--wide>.foo-console, .foo-grid--wide>.foo-editor, .foo-grid--wide>.foo-grid__item {padding-left: 48px }.foo-one-whole {width: 100% }.foo-five-tenths, .foo-four-eighths, .foo-one-half, .foo-six-twelfths, .foo-three-sixths, .foo-two-quarters {width: 50% }.foo-console .foo-terminal-output .foo-output--column, .foo-four-twelfths, .foo-one-third, .foo-two-sixths {width: 33.333% }.foo-eight-twelfths, .foo-four-sixths, .foo-two-thirds {width: 66.666% }.foo-one-quarter, .foo-three-twelfths, .foo-two-eighths {width: 25% }.foo-nine-twelfths, .foo-six-eighths, .foo-three-quarters {width: 75% }.foo-one-fifth, .foo-two-tenths {width: 20% }.foo-four-tenths, .foo-two-fifths {width: 40% }.foo-six-tenths, .foo-three-fifths {width: 60% }.foo-eight-tenths, .foo-four-fifths {width: 80% }.foo-one-sixth, .foo-two-twelfths {width: 16.666% }.foo-five-sixths, .foo-ten-twelfths {width: 83.333% }.foo-one-eighth {width: 12.5% }.foo-three-eighths {width: 37.5% }.foo-five-eighths {width: 62.5% }.foo-seven-eighths {width: 87.5% }.foo-one-tenth {width: 10% }.foo-three-tenths {width: 30% }.foo-seven-tenths {width: 70% }.foo-nine-tenths {width: 90% }.foo-one-twelfth {width: 8.333% }.foo-five-twelfths {width: 41.666% }.foo-seven-twelfths {width: 58.333% }.foo-eleven-twelfths {width: 91.666% }@media only screen and (max-width:480px) {.foo-palm--one-whole {width: 100% }.foo-palm--five-tenths, .foo-palm--four-eighths, .foo-palm--one-half, .foo-palm--six-twelfths, .foo-palm--three-sixths, .foo-palm--two-quarters {width: 50% }.foo-palm--four-twelfths, .foo-palm--one-third, .foo-palm--two-sixths {width: 33.333% }.foo-palm--eight-twelfths, .foo-palm--four-sixths, .foo-palm--two-thirds {width: 66.666% }.foo-palm--one-quarter, .foo-palm--three-twelfths, .foo-palm--two-eighths {width: 25% }.foo-palm--nine-twelfths, .foo-palm--six-eighths, .foo-palm--three-quarters {width: 75% }.foo-palm--one-fifth, .foo-palm--two-tenths {width: 20% }.foo-palm--four-tenths, .foo-palm--two-fifths {width: 40% }.foo-palm--six-tenths, .foo-palm--three-fifths {width: 60% }.foo-palm--eight-tenths, .foo-palm--four-fifths {width: 80% }.foo-palm--one-sixth, .foo-palm--two-twelfths {width: 16.666% }.foo-palm--five-sixths, .foo-palm--ten-twelfths {width: 83.333% }.foo-palm--one-eighth {width: 12.5% }.foo-palm--three-eighths {width: 37.5% }.foo-palm--five-eighths {width: 62.5% }.foo-palm--seven-eighths {width: 87.5% }.foo-palm--one-tenth {width: 10% }.foo-palm--three-tenths {width: 30% }.foo-palm--seven-tenths {width: 70% }.foo-palm--nine-tenths {width: 90% }.foo-palm--one-twelfth {width: 8.333% }.foo-palm--five-twelfths {width: 41.666% }.foo-palm--seven-twelfths {width: 58.333% }.foo-palm--eleven-twelfths {width: 91.666% }}@media only screen and (min-width:481px) and (max-width:1023px) {.foo-lap--one-whole {width: 100% }.foo-lap--five-tenths, .foo-lap--four-eighths, .foo-lap--one-half, .foo-lap--six-twelfths, .foo-lap--three-sixths, .foo-lap--two-quarters {width: 50% }.foo-lap--four-twelfths, .foo-lap--one-third, .foo-lap--two-sixths {width: 33.333% }.foo-lap--eight-twelfths, .foo-lap--four-sixths, .foo-lap--two-thirds {width: 66.666% }.foo-lap--one-quarter, .foo-lap--three-twelfths, .foo-lap--two-eighths {width: 25% }.foo-lap--nine-twelfths, .foo-lap--six-eighths, .foo-lap--three-quarters {width: 75% }.foo-lap--one-fifth, .foo-lap--two-tenths {width: 20% }.foo-lap--four-tenths, .foo-lap--two-fifths {width: 40% }.foo-lap--six-tenths, .foo-lap--three-fifths {width: 60% }.foo-lap--eight-tenths, .foo-lap--four-fifths {width: 80% }.foo-lap--one-sixth, .foo-lap--two-twelfths {width: 16.666% }.foo-lap--five-sixths, .foo-lap--ten-twelfths {width: 83.333% }.foo-lap--one-eighth {width: 12.5% }.foo-lap--three-eighths {width: 37.5% }.foo-lap--five-eighths {width: 62.5% }.foo-lap--seven-eighths {width: 87.5% }.foo-lap--one-tenth {width: 10% }.foo-lap--three-tenths {width: 30% }.foo-lap--seven-tenths {width: 70% }.foo-lap--nine-tenths {width: 90% }.foo-lap--one-twelfth {width: 8.333% }.foo-lap--five-twelfths {width: 41.666% }.foo-lap--seven-twelfths {width: 58.333% }.foo-lap--eleven-twelfths {width: 91.666% }}@media only screen and (max-width:1023px) {.foo-console, .foo-editor, .foo-portable--one-whole {width: 100% }.foo-portable--five-tenths, .foo-portable--four-eighths, .foo-portable--one-half, .foo-portable--six-twelfths, .foo-portable--three-sixths, .foo-portable--two-quarters {width: 50% }.foo-portable--four-twelfths, .foo-portable--one-third, .foo-portable--two-sixths {width: 33.333% }.foo-portable--eight-twelfths, .foo-portable--four-sixths, .foo-portable--two-thirds {width: 66.666% }.foo-portable--one-quarter, .foo-portable--three-twelfths, .foo-portable--two-eighths {width: 25% }.foo-portable--nine-twelfths, .foo-portable--six-eighths, .foo-portable--three-quarters {width: 75% }.foo-portable--one-fifth, .foo-portable--two-tenths {width: 20% }.foo-portable--four-tenths, .foo-portable--two-fifths {width: 40% }.foo-portable--six-tenths, .foo-portable--three-fifths {width: 60% }.foo-portable--eight-tenths, .foo-portable--four-fifths {width: 80% }.foo-portable--one-sixth, .foo-portable--two-twelfths {width: 16.666% }.foo-portable--five-sixths, .foo-portable--ten-twelfths {width: 83.333% }.foo-portable--one-eighth {width: 12.5% }.foo-portable--three-eighths {width: 37.5% }.foo-portable--five-eighths {width: 62.5% }.foo-portable--seven-eighths {width: 87.5% }.foo-portable--one-tenth {width: 10% }.foo-portable--three-tenths {width: 30% }.foo-portable--seven-tenths {width: 70% }.foo-portable--nine-tenths {width: 90% }.foo-portable--one-twelfth {width: 8.333% }.foo-portable--five-twelfths {width: 41.666% }.foo-portable--seven-twelfths {width: 58.333% }.foo-portable--eleven-twelfths {width: 91.666% }}@media only screen and (min-width:1024px) {.foo-desk--one-whole {width: 100% }.foo-desk--five-tenths, .foo-desk--four-eighths, .foo-desk--one-half, .foo-desk--six-twelfths, .foo-desk--three-sixths, .foo-desk--two-quarters {width: 50% }.foo-desk--four-twelfths, .foo-desk--one-third, .foo-desk--two-sixths {width: 33.333% }.foo-desk--eight-twelfths, .foo-desk--four-sixths, .foo-desk--two-thirds {width: 66.666% }.foo-desk--one-quarter, .foo-desk--three-twelfths, .foo-desk--two-eighths {width: 25% }.foo-desk--nine-twelfths, .foo-desk--six-eighths, .foo-desk--three-quarters {width: 75% }.foo-desk--one-fifth, .foo-desk--two-tenths {width: 20% }.foo-desk--four-tenths, .foo-desk--two-fifths {width: 40% }.foo-desk--six-tenths, .foo-desk--three-fifths {width: 60% }.foo-desk--eight-tenths, .foo-desk--four-fifths {width: 80% }.foo-desk--one-sixth, .foo-desk--two-twelfths {width: 16.666% }.foo-desk--five-sixths, .foo-desk--ten-twelfths {width: 83.333% }.foo-desk--one-eighth {width: 12.5% }.foo-desk--three-eighths {width: 37.5% }.foo-desk--five-eighths {width: 62.5% }.foo-desk--seven-eighths {width: 87.5% }.foo-desk--one-tenth {width: 10% }.foo-desk--three-tenths {width: 30% }.foo-desk--seven-tenths {width: 70% }.foo-desk--nine-tenths {width: 90% }.foo-desk--one-twelfth {width: 8.333% }.foo-desk--five-twelfths {width: 41.666% }.foo-desk--seven-twelfths {width: 58.333% }.foo-desk--eleven-twelfths {width: 91.666% }}.foo-cmd .foo-format, .foo-cmd .foo-prompt div, .foo-footer li, .foo-terminal .foo-terminal-output .foo-format, .foo-terminal .foo-terminal-output div span {display: inline-block }.foo-cmd .foo-clipboard {position: absolute;top: 0;left: 0;opacity: .01;width: 2px }.foo-terminal {padding: 10px;position: relative;overflow: hidden }.foo-cmd {padding: 0;margin: 0;height: 1.3em }.foo-cmd .foo-cursor.foo-blink {-webkit-animation: blink 1s infinite steps(1, start);animation: blink 1s infinite steps(1, start) }@-webkit-keyframes blink {0%, to {background-color: #111;color: #f48020 }50% {background-color: #f48020;color: #111 }}@keyframes blink {0%, to {background-color: #111;color: #f48020 }50% {background-color: #f48020;color: #111 }}.foo-cmd .foo-prompt, .foo-terminal .foo-terminal-output div div {display: block;line-height: 14px;height: auto }.foo-cmd .foo-prompt, .foo-cmd span {float: left }.foo-cmd, .foo-terminal {font-family: FreeMono, monospace;color: #aaa;background-color: #000;font-size: 12px;line-height: 14px }.foo-terminal-output>div {min-height: 14px;-ms-word-break: break-all;word-break: break-word;word-wrap: break-word }.foo-cmd .foo-cursor.foo-blink, .foo-cmd .foo-inverted, .foo-terminal .foo-inverted {background-color: #f48020;color: #111 }.foo-terminal .foo-terminal-output div.foo-error, .foo-terminal .foo-terminal-output div.foo-error div {color: red }.foo-tilda {position: fixed;top: 0;left: 0;width: 100%;z-index: 1100 }.foo-clear {clear: both }@font-face {font-family: 'Share Tech Mono';font-style: normal;font-weight: 400;src: url('/website/fonts/share-tech-mono-v15-latin-regular.eot');src: local(''), url('/website/fonts/share-tech-mono-v15-latin-regular.eot?#iefix') format('embedded-opentype'), url('/website/fonts/share-tech-mono-v15-latin-regular.woff2') format('woff2'), url('/website/fonts/share-tech-mono-v15-latin-regular.woff') format('woff'), url('/website/fonts/share-tech-mono-v15-latin-regular.ttf') format('truetype'), url('/website/fonts/share-tech-mono-v15-latin-regular.svg#ShareTechMono') format('svg');}@keyframes blink {0%, to {background-color: transparent }50% {background-color: #f48020 }}@-webkit-keyframes fadeInUp {0% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0) }to {opacity: 1;-webkit-transform: none;transform: none }}@keyframes fadeInUp {0% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0) }to {opacity: 1;-webkit-transform: none;transform: none }}@-webkit-keyframes fadeOutDown {0% {opacity: 1 }to {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0) }}@keyframes fadeOutDown {0% {opacity: 1 }to {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0) }}@-webkit-keyframes flash {0%, 50%, to {opacity: 1 }25%, 75% {opacity: 0 }}@keyframes flash {0%, 50%, to {opacity: 1 }25%, 75% {opacity: 0 }}.foo-fadeInUp, .foo-fadeOutDown {-webkit-animation-duration: .3s;animation-duration: .3s;-webkit-animation-fill-mode: both;animation-fill-mode: both }.foo-fadeOutDown {-webkit-animation-name: fadeOutDown;animation-name: fadeOutDown }.foo-fadeInUp {-webkit-animation-name: fadeInUp;animation-name: fadeInUp }.foo-close, .foo-grab-bg, .foo-grab-bg-h, .foo-resizer i.foo-horizontal, .foo-resizer i.foo-vertical {background-image: url(../img/sprite.png);background-repeat: no-repeat }.foo-grab-bg, .foo-resizer i.foo-vertical {background-position: 0 0;width: 9px;height: 32px }.foo-grab-bg-h, .foo-resizer i.foo-horizontal {background-position: -9px 0;width: 32px;height: 9px }.foo-close {background-position: -9px -9px;width: 18px;height: 18px }@media screen and (-webkit-min-device-pixel-ratio:1), screen and (min--moz-device-pixel-ratio:1), screen and (-o-min-device-pixel-ratio:100/100), screen and (min-device-pixel-ratio:1), screen and (min-resolution:1dppx) {.foo-close, .foo-grab-bg, .foo-grab-bg-h, .foo-resizer i.foo-horizontal, .foo-resizer i.foo-vertical {background-image: url(../img/sprite.png);background-size: 41px 32px }}@media screen and (-webkit-min-device-pixel-ratio:2), screen and (min--moz-device-pixel-ratio:2), screen and (-o-min-device-pixel-ratio:200/100), screen and (min-device-pixel-ratio:2), screen and (min-resolution:2dppx) {.foo-close, .foo-grab-bg, .foo-grab-bg-h, .foo-resizer i.foo-horizontal, .foo-resizer i.foo-vertical {background-image: url(../img/sprite@2x.png);background-size: 41px 32px }}*, :after, :before {box-sizing: border-box }body, html {height: 100% }body {background-color: #2b2d2d;color: #fff;font: 16px/1.2 "Share Tech Mono", monospace;-webkit-font-smoothing: antialiased }.foo-contact, .foo-content {height: 100%;position: relative }.foo-content:after, .foo-content:before {content: ' ';display: table }.foo-content:after {clear: both }.foo-contact {height: 10% }.foo-contact:after, .foo-contact:before {content: ' ';display: table }.foo-contact:after {clear: both }@media only screen and (min-width:1024px) {.foo-logo {border-right: 1px solid #35bdb8;float: left;height: 100%;position: relative;text-align: center;width: 140px }.foo-logo img {margin-top: 25%;width: 55% }}@media only screen and (max-width:1023px) {.foo-logo {float: top;border-bottom: 1px solid #35bdb8;position: relative;text-align: left;}.foo-logo img {margin-left: 3%;margin-top: 3%;margin-bottom: 3%;height: 3%;width: 7%;}}.foo-footer {position: absolute;bottom: 0;color: #999;left: 0;right: 0;height: 50px;z-index: 3;padding: 17px 0 15px;background-color: #3d3d3d;font-size: 16px }.foo-footer ul {margin: 0;padding: 0 0 0 16px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis }.foo-footer li {margin-right: 16px }.foo-footer li:last-child, .foo-shortcuts__legend li:last-child {margin-right: 0 }.foo-btn, .foo-footer a {color: #d7d7d7;text-decoration: none }.foo-footer a:hover {color: #35bdb8 }.foo-console.foo-terminal .foo-animation {overflow: hidden }.foo-console.foo-terminal .foo-animation__frame {font-size: 12px !important;line-height: 14px !important;width: 999em;white-space: pre;display: none }.foo-console.foo-terminal .foo-animation__frame--visible {display: block }.foo-btn {background-color: #ef67a5;color: #111;padding: 0 .1em;border: none;outline: none;font-family: inherit;font-size: inherit;cursor: pointer }.foo-interface {z-index: 1;overflow: hidden;background-color: #111;transition: background-color .15s ease;position: absolute;bottom: 50px;right: 0 }@media only screen and (max-width:1023px) {.foo-interface {top: 140px;left: 0 }}@media only screen and (min-width:1024px) {.foo-interface {top: 0;left: 140px }}.foo-interface.foo-editor--opened {background-color: #2b2d2d }.foo-interface.foo-is-resizing {cursor: col-resize }.foo-interface .foo-console {border: 2px solid transparent }.foo-interface .foo-console:focus {border-color: #f4b400 }.foo-interface .foo-editor .foo-editor__head {border: 2px solid transparent;border-bottom: 1px solid #35bdb8 }.foo-interface .foo-editor .foo-editor__foot {border: 2px solid transparent;border-bottom: 2px solid transparent;border-top: 1px solid #35bdb8 }.foo-interface .foo-editor .foo-editor__content {border-left: 2px solid transparent;border-right: 2px solid transparent }.foo-interface .foo-editor:focus .foo-editor__content, .foo-interface .foo-editor:focus .foo-editor__head {border-left-color: #f4b400;border-right-color: #f4b400 }.foo-interface .foo-editor:focus .foo-editor__head {border-top-color: #f4b400 }.foo-interface .foo-editor:focus .foo-editor__foot {border-left-color: #f4b400;border-right-color: #f4b400;border-bottom-color: #f4b400;border-top: 1px solid #35bdb8 }.foo-console {width: 100%;height: 100%;overflow-y: auto;padding-right: 32px;z-index: 2 }.foo-console::-webkit-scrollbar-track {background-color: #262828 }.foo-console::-webkit-scrollbar {width: 10px;background-color: #5b5b5b;padding: 3px }.foo-console::-webkit-scrollbar-thumb {background-color: #5b5b5b }@media only screen and (max-width:1023px) {.foo-console {padding-right: 10px;padding-bottom: 32px;bottom: 0 }}.foo-editor--opened .foo-console {width: 49% }@media only screen and (max-width:1023px) {.foo-editor--opened .foo-console {width: 100% !important;height: 49% }}@media only screen and (min-width:1024px) {.foo-editor--opened .foo-console {height: 100% !important }}.foo-console, .foo-console .foo-cmd {background-color: #2b2d2d;transition: background-color .15s ease }.foo-console.foo-active, .foo-console.foo-active .foo-cmd {background-color: #111 }.foo-question__options li {padding-left: 36px;position: relative }.foo-question__options li:before {content: "\2B21";position: absolute;left: 6px;top: -1px }.foo-question__options li.foo-option--selected:before {content: "\2B22";color: #00e575 }.foo-question__options li.foo-option--selected:after {content: "\276F";position: absolute;left: -5px;top: 0 }.foo-console, .foo-console .foo-cmd {color: #fff }.foo-console, .foo-console .foo-cmd, .foo-console .foo-cmd .foo-prompt, .foo-console.foo-terminal .foo-terminal-output div div {font-size: 16px;line-height: 1.4 }.foo-console.foo-terminal .foo-terminal-output div div {margin-bottom: 8px }.foo-console .foo-terminal-output .foo-output--prompt, .foo-console .foo-terminal-output .foo-preformatted {white-space: pre-wrap }.foo-console .foo-terminal-output .foo-output--column:nth-child(3n+1) {padding-left: 0 }.foo-console .foo-terminal-output .foo-terminal-list {display: table-row;margin: 20px 0 }.foo-console .foo-terminal-output .foo-list--padded {display: table-cell }.foo-console .foo-terminal-output .foo-list--padded:not(.foo-preformatted) {width: 12ex }.foo-console .foo-terminal-output .foo-list--definition {display: table-cell;position: relative;text-transform: lowercase }.foo-console .foo-terminal-output .foo-list--definition:before {content: '- ';position: absolute;left: -2ex }.foo-output--prompt {word-break: break-all }.foo-console .foo-prompt, .foo-terminal-output .foo-output--prompt span {color: #f48020 }.foo-console .foo-prompt.foo-is-disabled {pointer-events: none;display: none }.foo-console .foo-cmd .foo-cursor {background-color: #f48020;color: #fff }.foo-term-pink {color: #ef67a5 }.foo-console .foo-terminal-output .foo-list--folder, .foo-term-blue {color: #35bdb8 }.foo-term-green {color: #00e575 }.foo-term-orange {color: #f48020 }.foo-term-red {color: #ec1b52 }.foo-term-yellow {color: #f4b400 }.foo-console .foo-prompt+span, .foo-term-white {color: #fff }.foo-term-grey {color: #656565 }.foo-term-story {border-left: 8px solid #ef67a5;color: #35bdb8;padding: 5px 10px;margin: 12px 0 }.foo-editor {height: 100%;opacity: 0;overflow: hidden;padding: 0;position: relative;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;transition: transform .2s ease-in-out, opacity .2s ease-in-out;width: 49%;z-index: 4 }@media only screen and (max-width:1023px) {.foo-editor {height: 49%;width: 100% !important;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0) }}@media only screen and (min-width:1024px) {.foo-editor {height: 100% !important }}.foo-editor.foo-editor--opened {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0) }.foo-editor.foo-editor--dirty .foo-editor__filename:after {content: '*' }.foo-editor.foo-editor--dirty .foo-editor__save:not(.foo-editor__save--disabled) {cursor: pointer;background-color: #ef67a5;color: #2b2d2d }.foo-editor.foo-active .foo-editor__resizer {background-color: #2b2d2d }.foo-editor.foo-active .foo-editor__resizer:hover {background-color: #373a3a }.foo-ace_editor {font-family: "Share Tech Mono", monospace !important;line-height: 1.4 !important;font-size: 16px !important }.foo-ace_scrollbar::-webkit-scrollbar-track {background-color: #262828 }.foo-ace_scrollbar::-webkit-scrollbar {width: 10px;background-color: #5b5b5b;padding: 3px }.foo-ace_scrollbar::-webkit-scrollbar-thumb {background-color: #5b5b5b }.foo-editor__content {position: absolute !important;top: 34px;bottom: 38px;left: 0;right: 0 }.foo-editor__content.foo-ace-monokai, .foo-editor__content.foo-ace-monokai .foo-ace_gutter, .foo-editor__content.foo-ace-monokai .foo-ace_gutter-active-line {background-color: #2b2d2d;transition: background-color .15s ease }.foo-editor__content.foo-ace_editor.foo-ace-monokai .foo-ace_marker-layer .foo-ace_selection {background: #444 }.foo-editor__content.foo-active, .foo-editor__content.foo-active .foo-ace-content {background-color: #111 }.foo-editor__content.foo-active .foo-ace-content .foo-ace_gutter, .foo-editor__content.foo-active .foo-ace_gutter {background-color: #000 !important }.foo-editor__content.foo-ace-monokai.foo-active .foo-ace_gutter-active-line {background-color: #272727 }.foo-editor__content.foo-ace-monokai .foo-ace_comment {color: #86816b }.foo-editor.foo-editor-prompter--active .foo-editor__content {pointer-events: none !important }.foo-editor.foo-editor-prompter--active .foo-editor__content .foo-ace_cursor {display: none }.foo-editor__head {height: 34px;top: 0;border-bottom: 1px solid #35bdb8 }.foo-editor__foot, .foo-editor__head {position: absolute;width: 100%;background-color: #666;padding: 8px 10px }.foo-editor__head__meta-data {overflow: hidden;white-space: nowrap;text-overflow: ellipsis }.foo-editor__close {float: right;cursor: pointer;border: none;outline: none;background-color: transparent;margin: 0 }.foo-editor__save {cursor: default;background-color: transparent;color: #f0f0f0;transition: background-color .2s ease-in-out, color .2s ease-in-out }.foo-editor__save[disabled] {cursor: not-allowed }.foo-editor__foot {top: auto;bottom: 0;border-bottom: none;border-top: 1px solid #35bdb8;z-index: 10;height: 38px;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);transition: -webkit-transform .2s ease-out, opacity .2s ease-out;transition: transform .2s ease-out, opacity .2s ease-out }.foo-editor.foo-editor-prompter--active .foo-editor__foot {opacity: 0;-webkit-transform: translate3d(0, 40px, 0);transform: translate3d(0, 40px, 0) }.foo-error {position: absolute;top: 40%;left: 20%;width: 60%;height: 40%;text-align: center }.foo-error__logo {width: 130px;height: 120px }.foo-error__message {margin-top: 60px;line-height: 1.6 }.foo-error__message a {color: #fff;background-color: #35bdb8;text-decoration: none }.foo-countdown-timer__holder {position: absolute;bottom: 50px;left: 0;z-index: 20 }.foo-countdown-timer .foo-countdown-timer__time {background-color: #666;transition: background-color .15s ease }.foo-countdown-timer__text {background-color: #666 }.foo-countdown-timer--low .foo-countdown-timer__text, .foo-countdown-timer--low .foo-countdown-timer__time {background-color: #ec1b52 }.foo-countdown-timer--low {-webkit-animation: flash 1s .75s 2 normal both;animation: flash 1s .75s 2 normal both }.foo-countdown-timer__time {padding: 9px 8px }.foo-countdown-timer {display: none;width: 139px;text-align: center;position: relative;border-top: 1px solid #2b2d2d;cursor: default }.foo-countdown-timer:first-child {border-top: 0 }.foo-countdown-timer__text {position: absolute;bottom: 0;white-space: nowrap;padding: 9px 10px;z-index: -1;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);transition: -webkit-transform .2s ease-out;transition: transform .2s ease-out }.foo-ie9 .foo-countdown-timer__text {left: -300px }.foo-countdown-timer__time, .foo-prompter {width: 100%;display: block;position: relative;z-index: 2 }.foo-countdown-timer__time:hover+.foo-countdown-timer__text {-webkit-transform: translate3d(130px, 0, 0);transform: translate3d(130px, 0, 0) }.foo-ie9 .foo-countdown-timer__time:hover+.foo-countdown-timer__text {left: 139px }.foo-prompter {position: absolute;bottom: 0;opacity: 1;z-index: 20;padding: 20px;border-top: 1px solid #35bdb8;background-color: #666;color: #fff;transition: all .3s ease-out }.foo-prompter.foo-is-hidden {bottom: -30px;opacity: 0;z-index: -1 }.foo-prompter__text input {font-family: "Share Tech Mono", monospace;font-size: 16px;line-height: 1.2;-webkit-font-smoothing: antialiased;border: none;color: inherit;margin: 0;padding: 0;background-color: transparent;outline-style: none;box-shadow: none }.foo-resizer {display: none;position: relative;height: 100%;width: 2%;background-color: #111;transition: background-color .15s ease;cursor: col-resize;z-index: 10 }.foo-editor--opened .foo-resizer {display: inline-block }.foo-editor--is-active .foo-resizer {background-color: #2b2d2d }.foo-resizer:hover {background-color: #1e1e1e }.foo-resizer i {position: absolute;top: 50%;left: 50% }.foo-resizer i.foo-vertical {margin: -16px 0 0 -5px;cursor: col-resize }.foo-resizer i.foo-horizontal {margin: -5px 0 0 -16px;cursor: row-resize;display: none }@media only screen and (max-width:1023px) {.foo-resizer {width: 100%;height: 2%;cursor: row-resize }.foo-resizer i.foo-vertical {display: none }.foo-editor--opened .foo-resizer, .foo-resizer i.foo-horizontal {display: block }}.foo-shortcuts {position: absolute;bottom: 9px;right: 10px;z-index: 12;font-size: 14px;color: #f0f0f0 }.foo-shortcuts__legend li {display: inline-block;margin-right: 10px }.foo-shortcut.foo-shortcut--control-command:before, .foo-shortcut.foo-shortcut--control:before {content: '^' }.foo-shortcuts--mac .foo-shortcut--control-command:before {content: '\2318' }.foo-support {position: absolute;top: 0;left: 20%;width: 60%;height: 40%;text-align: center }.foo-support__message {margin-top: 60px;line-height: 1.6 }.foo-support__message a {color: #fff;text-decoration: underline }.foo-cf:after, .foo-cf:before {content: ' ';display: table }.foo-cf:after {clear: both } \ No newline at end of file diff --git a/public/index.html b/public/index.html index bb7cd2f..d2f94b4 100644 --- a/public/index.html +++ b/public/index.html @@ -5,8 +5,8 @@ - - + + Document @@ -16,9 +16,6 @@
- - @@ -61,7 +58,6 @@ marked.setOptions({ renderer: renderer, highlight: function (code, lang) { - console.log(Prism.languages); const grammar = Prism.languages[lang]; if (!grammar) { console.warn( @@ -72,29 +68,12 @@ return Prism.highlight(code, grammar, lang); } }) - document.getElementById("insert-here").innerHTML = marked.parse(markdowndata); + document.getElementById("insert-here").innerHTML = marked.parse(markdowndata, function () { + app.ports.isRenderComplete.send(true); + }); // document.getElementById("toc-entries").innerHTML = toc; }); - $(function () { - // copy-btn HTML - var btn = ""; - btn += ''; - btn += ''; - // mount it! - $(".highlight table").before(btn); - var clip = new ClipboardJS('.btn-copy', { - text: function (trigger) { - return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str, it) => str + it.innerText + '\n', '') - } - }); - clip.on('success', function (e) { - e.trigger.setAttribute('aria-label', "Copied!"); - e.clearSelection(); - }) - }); - - \ No newline at end of file diff --git a/public/mdn-style.css b/public/mdn-style.css index 42cbac6..792a111 100644 --- a/public/mdn-style.css +++ b/public/mdn-style.css @@ -1,3 +1,9 @@ +@import url('https://rsms.me/inter/inter.css'); +html { font-family: 'Inter', sans-serif; } +@supports (font-variation-settings: normal) { + html { font-family: 'Inter var', sans-serif; } +} + *, :after, :before { @@ -557,7 +563,7 @@ u { --code-color: var(--plus-code-color); --mark-color: var(--plus-mark-color) } - +/* .category-html { --background-toc-active: var(--html-accent-background-color); --category-color: var(--html-accent-color); @@ -598,9 +604,9 @@ u { --category-color: var(--learn-accent-color); --category-color-background: var(--learn-accent-background-color); --mark-color: var(--api-mark-color) -} +} */ -.mify { +/* .mify { margin-left: .5rem } @@ -634,14 +640,14 @@ u { text-decoration-color: var(--text-link); text-decoration-thickness: .1em; text-underline-offset: .1em -} +} */ @media(forced-colors:active) { .icon { background-color: CanvasText !important } } - +/* .homepage { align-items: center; display: flex; @@ -1173,7 +1179,7 @@ svg.icon { .icon.icon-yes-circle { -webkit-mask-image: url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg); mask-image: url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg) -} +} */ .button, button { @@ -1664,7 +1670,7 @@ button { display: block; right: 2.8rem } - +/* .mandala-container { --mandala-primary: #4e4e4e; --mandala-accent-1: var(--html-accent-color); @@ -2288,7 +2294,7 @@ button { to { opacity: 0 } -} +} */ .generic-loading { align-items: center; @@ -3197,7 +3203,7 @@ li:last-child .submenu a:not(:focus) { .learn-link-container a:hover .submenu-icon.learn { background-color: var(--learn-accent-color) !important } - +/* .submenu-icon.html { background-color: var(--html-accent-engage) } @@ -3239,7 +3245,7 @@ li:last-child .submenu a:not(:focus) { .mdn-plus .mobile-only { display: none } -} +} */ ul.main-menu { grid-gap: 1rem; @@ -3320,7 +3326,7 @@ ul.main-menu.show { } } -.signout-form { +/* .signout-form { padding: .5rem } @@ -3337,8 +3343,8 @@ button.signout-button { button.signout-button:focus, button.signout-button:hover { background-color: var(--background-secondary) -} - +} */ +/* .user-menu { position: relative } @@ -3451,7 +3457,7 @@ button.signout-button:hover { .dropdown-item .button.action.active-menu-item { --button-bg: var(--background-primary); --button-border-color: var(--border-secondary) -} +} */ .top-navigation-main { display: none; @@ -3658,7 +3664,7 @@ button.signout-button:hover { } } -.theme-switcher-menu { +/* .theme-switcher-menu { margin-bottom: .5rem } @@ -3794,7 +3800,7 @@ button.signout-button:hover { white-space: nowrap !important; width: 1px !important } -} +} */ .top-navigation { background-color: var(--background-primary); @@ -3847,8 +3853,8 @@ button.signout-button:hover { .top-navigation .top-navigation-wrap { flex: 0 1 } -} - +} +/* .breadcrumbs-container { align-items: center; display: flex; @@ -4032,7 +4038,7 @@ button.signout-button:hover { .language-menu { right: 0 } -} +} */ .article-actions { margin-left: auto @@ -4399,7 +4405,7 @@ button.signout-button:hover { max-height: 100vh; position: fixed; right: 0; - top: --var(--offset) + /* top: --var(--offset) */ } .sidebar, @@ -4627,7 +4633,7 @@ body { --color-announcement-banner-accent: #ff6d91 } -.light { +/* .light { --text-primary: #1b1b1b; --text-secondary: #4e4e4e; --text-inactive: #9e9e9ea6; @@ -5041,7 +5047,7 @@ body { --text-primary-yellow: #c7b700; color-scheme: dark } -} +} */ .document-page .article-actions-container, .document-page .document-toc-container, @@ -5074,8 +5080,8 @@ body { grid-gap: 3rem; display: grid; gap: 3rem; - grid-template-areas: "sidebar main"; - grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); + /* grid-template-areas: "sidebar main"; */ + /* grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); */ padding-left: 1.5rem; padding-right: 3rem } @@ -5102,8 +5108,8 @@ body { grid-gap: 3rem; display: grid; gap: 3rem; - grid-template-areas: "sidebar main toc"; - grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 15rem); + /* grid-template-areas: "sidebar main toc"; */ + /* grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 15rem); */ padding-left: 1rem; padding-right: 1rem } @@ -5139,7 +5145,7 @@ body { font-stretch: 75% 100%; font-style: oblique 0deg 20deg; font-weight: 1 999; - src: url(/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2) format("woff2 supports variations"), url(/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2) format("woff2-variations") + src: url(/website/fonts/Inter.var.woff2) format("woff2 supports variations"), url(/website/fonts/Inter.var.woff2) format("woff2-variations") } :root { @@ -6172,7 +6178,7 @@ screen and (min-width:688px)and (max-width:768px) { } .notification-card .desktop-only { - display: hidden + display: none } @media screen and (min-width:769px) { @@ -6592,7 +6598,7 @@ article.settings .field-group ul li { grid-gap: 0 1rem; display: grid; gap: 0 1rem; - grid-template-columns: 1fr minmax(5em); + /* grid-template-columns: 1fr minmax(5em); */ margin: 2em 0 } @@ -6849,8 +6855,8 @@ main.contribute section h1:before { content: ""; display: inline-block; height: 1.2em; - -webkit-mask: url(/static/media/m-logo.e19e04547be91a35c8ea.svg) no-repeat 50% 50%; - mask: url(/static/media/m-logo.e19e04547be91a35c8ea.svg) no-repeat 50% 50%; + /* -webkit-mask: url(/static/media/m-logo.e19e04547be91a35c8ea.svg) no-repeat 50% 50%; + mask: url(/static/media/m-logo.e19e04547be91a35c8ea.svg) no-repeat 50% 50%; */ -webkit-mask-size: cover; mask-size: cover; -webkit-transform: translate(-.2em, .2em); diff --git a/public/mdn-style.min.css b/public/mdn-style.min.css new file mode 100644 index 0000000..286ec03 --- /dev/null +++ b/public/mdn-style.min.css @@ -0,0 +1 @@ +@import url('https://rsms.me/inter/inter.css');html {font-family: 'Inter', sans-serif;}@supports (font-variation-settings: normal) {html {font-family: 'Inter var', sans-serif;}}*, :after, :before {box-sizing: border-box }blockquote, body, dd, dl, figure, h1, h2, h3, h4, ol, p, ul {margin: 0 }html {scroll-behavior: smooth }body {text-rendering: optimizeSpeed;font-family: Inter, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;font-family: var(--font-body);font-size: 100%;font-size: var(--base-font-size);line-height: 1.75;line-height: var(--font-content-line-height) }a:not([class]) {-webkit-text-decoration-skip: ink;text-decoration-skip-ink: auto }a {text-decoration: none }img, picture {max-width: 100% }button, input, select, textarea {font: inherit }@media(prefers-reduced-motion:reduce) {html {scroll-behavior: auto }*, :after, :before {-webkit-animation-duration: .01ms !important;animation-duration: .01ms !important;-webkit-animation-iteration-count: 1 !important;animation-iteration-count: 1 !important;scroll-behavior: auto !important;transition-duration: .01ms !important }}.token.cdata, .token.comment, .token.doctype, .token.prolog {color: var(--code-token-comment) }.token.punctuation {color: var(--code-token-punctuation) }.token.attr-name, .token.builtin, .token.class-name, .token.function, .token.inserted, .token.property, .token.selector {color: var(--code-token-attribute-name) }.token.atrule, .token.attr-value {color: var(--code-token-attribute-value) }.token.keyword {color: var(--code-token-tag) }.token.boolean, .token.char, .token.constant, .token.deleted, .token.number, .token.string, .token.symbol, .token.tag {color: var(--code-token-attribute-value) }.token.builtin, .token.inserted, .token.selector, .token.template-string>.token.string {color: var(--code-token-selector) }.token.bold, .token.important {font-weight: 700 }.token.italic {font-style: italic }.token.entity {cursor: help }.notecard {--note-background: var(--background-information);--note-theme: var(--icon-information);background-color: var(--note-background);border: 1px solid var(--border-secondary);border-left: 4px solid var(--note-theme);border-radius: .25rem;border-radius: var(--elem-radius);box-shadow: var(--shadow-01);margin: 1rem 0;padding: 1rem 1rem 1rem 3rem;position: relative }.notecard, .notecard li, .notecard p {color: var(--text-secondary) }.notecard p {line-height: 2;margin: 0 !important }.notecard:before {background-color: var(--note-theme);content: "";display: block;height: 1rem;left: 1rem;-webkit-mask-image: url(/static/media/note-info.0eafb6e7738509bce66e.svg);mask-image: url(/static/media/note-info.0eafb6e7738509bce66e.svg);-webkit-mask-position: center;mask-position: center;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-size: contain;mask-size: contain;position: absolute;top: 1.5rem;width: 1rem }.notecard.inline {font: var(--type-body-s);margin: .5rem;padding: .125rem .375rem .125rem 1.5rem }.notecard.inline:before {display: block;height: .8rem;left: .2rem;top: .1875rem;width: .8rem }.notecard.warning {--note-background: var(--background-warning);--note-theme: var(--icon-warning) }.notecard.warning:before {-webkit-mask-image: url(/static/media/note-warning.d6e4c7b35b5ed187e936.svg);mask-image: url(/static/media/note-warning.d6e4c7b35b5ed187e936.svg) }.notecard.nonstandard {--note-background: var(--background-warning);--note-theme: var(--icon-warning) }.notecard.nonstandard:before {-webkit-mask-image: url(/static/media/nonstandard.d6e4c7b35b5ed187e936.svg);mask-image: url(/static/media/nonstandard.d6e4c7b35b5ed187e936.svg) }.notecard.error, .notecard.negative {--note-background: var(--background-critical);--note-theme: var(--icon-critical) }.notecard.error:before, .notecard.negative:before {-webkit-mask-image: url(/static/media/note-deprecated.0d2643f0c417b3670c49.svg);mask-image: url(/static/media/note-deprecated.0d2643f0c417b3670c49.svg) }.notecard.deprecated {--note-background: var(--background-critical);--note-theme: var(--icon-critical) }.notecard.deprecated:before {-webkit-mask-image: url(/static/media/deprecated.eda3b39bb2bd366d4b2b.svg);mask-image: url(/static/media/deprecated.eda3b39bb2bd366d4b2b.svg) }.notecard.experimental:before {-webkit-mask-image: url(/static/media/experimental.2f9e05f53c6dbee7791c.svg);mask-image: url(/static/media/experimental.2f9e05f53c6dbee7791c.svg) }.notecard.success {--note-background: var(--background-success);--note-theme: var(--icon-success) }.notecard.success:before {-webkit-mask-image: url(/static/media/note-info.0eafb6e7738509bce66e.svg);mask-image: url(/static/media/note-info.0eafb6e7738509bce66e.svg) }.notecard ol, .notecard ul {padding-left: 2rem }.notecard p, .notecard ul {padding-bottom: .5rem }.notecard p:last-child, .notecard ul:last-child {padding-bottom: 0 }.notecard:last-of-type {margin-bottom: 2rem }.notecard:first-of-type {margin-top: 2rem }.notecard>:first-child {margin-top: 0 }.notecard h1, .notecard h2, .notecard h3, .notecard h4, .notecard h5, .notecard h6 {color: var(--text-primary);font: 1rem;font: var(--type-base-font-size-rem);margin-bottom: .5rem }.main-content .notecard a:not(.button), .main-content .notecard code {color: var(--notecard-link-color) }.main-content .notecard a:not(.button):hover, .main-content .notecard code:hover {text-decoration: none }.pagination {align-items: center;display: flex;gap: 1rem;justify-content: center;padding: 1rem 0 }.mdn-form, .pagination-label {font-size: .833rem;font-size: var(--type-smaller-font-size) }.mdn-form {font-family: Inter, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;font-family: var(--font-body);font-weight: 600;font-weight: var(--font-body-strong-weight) }.mdn-form-item {align-items: center;display: flex;flex-wrap: wrap;gap: .5rem;padding-top: 1rem }.mdn-form-item:first-child {padding-top: 0 }.mdn-form-item.is-button-row {display: flex;justify-content: flex-end }.mdn-form-item.is-button-row .button {width: auto }.mdn-form-item [type=text] {background: var(--background-primary);border: 1px solid var(--border-primary);color: var(--text-primary);flex: 1 1 100%;font-size: .833rem;font-size: var(--type-smaller-font-size);min-width: 0;padding: .5rem }.mdn-form-item [type=text]:focus {border: 1px solid var(--button-secondary-border-focus);box-shadow: 0 0 0 3px var(--accent-primary-engage);box-shadow: var(--focus-effect);outline: 0 none }.mdn-form-item label {width: 100% }:root {--font-fallback: BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-body: Inter, var(--font-fallback);--font-heading: Inter, var(--font-fallback);--font-code: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;--base-font-size: 100%;--base-line-height: 1.2;--intermediate-line-height: 1.5;--heading-line-height: var(--base-line-height);--heading-letter-spacing: -0.031rem;--font-content-line-height: 1.75;--font-body-strong-weight: 600;--type-heading-h1-font-size: 2.488rem;--type-heading-h2-font-size: 2.074rem;--type-heading-h3-font-size: 1.728rem;--type-heading-h4-font-size: 1.44rem;--type-heading-h5-font-size: 1.2rem;--type-base-font-size-rem: 1rem;--type-smaller-font-size: 0.833rem;--type-tiny-font-size: 0.694rem;--type-heading-h1-font-size-mobile: 1.802rem;--type-heading-h2-font-size-mobile: 1.602rem;--type-heading-h3-font-size-mobile: 1.424rem;--type-heading-h4-font-size-mobile: 1.266rem;--type-emphasis-m: var(--font-body-strong-weight) var(--type-smaller-font-size) /1.23 var(--font-body);--type-label-s: 600 var(--type-tiny-font-size) /1.2 var(--font-heading);--type-heading-h1: 600 var(--type-heading-h1-font-size-mobile) /var(--heading-line-height) var(--font-heading);--type-heading-h2: 500 var(--type-heading-h2-font-size-mobile) /var(--heading-line-height) var(--font-heading);--type-heading-h3: 300 var(--type-heading-h3-font-size-mobile) /var(--heading-line-height) var(--font-heading);--type-heading-h4: 400 var(--type-heading-h4-font-size-mobile) /var(--heading-line-height) var(--font-heading);--type-heading-h5: 400 var(--type-heading-h5-font-size) /var(--heading-line-height) var(--font-heading);--type-heading-h6: 400 var(--type-base-font-size-rem) /var(--heading-line-height) var(--font-heading);--type-article-p: 400 var(--type-base-font-size-rem) /var(--font-content-line-height) var(--font-body);--max-width: 1440px;--gutter: 1rem;--top-navigation-height: 4rem;--top-navigation-offset: -4rem;--z-index-back: -1;--z-index-top: 9999;--z-index-a11y: 10000;--z-index-mid: 500;--z-index-nav-menu: 200;--z-index-search-results: 101;--z-index-low: 100;--z-index-search-results-home: 99;--elem-radius: 0.25rem;--focus-effect: 0 0 0 3px var(--accent-primary-engage);--form-elem-height: 2rem;--sticky-header-height: 0;--top-nav-height: 4rem;--main-document-header-height: 6rem;--icon-size: 1rem }@media screen and (min-width:769px) {:root {--type-heading-h1: 600 var(--type-heading-h1-font-size) /var(--heading-line-height) var(--font-heading);--type-heading-h2: 500 var(--type-heading-h2-font-size) /var(--heading-line-height) var(--font-heading);--type-heading-h3: 300 var(--type-heading-h3-font-size) /var(--heading-line-height) var(--font-heading);--type-heading-h4: 400 var(--type-heading-h4-font-size) /var(--heading-line-height) var(--font-heading) }}:target {scroll-margin-top: 0;scroll-margin-top: var(--sticky-header-height) }body {accent-color: var(--accent-primary);background-color: var(--background-primary);color: var(--text-primary);scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg) }body.full-screen-overlay {overflow: hidden }:focus-visible {outline-color: var(--accent-primary);outline-offset: 1px;outline-style: auto }main {min-height: 80vh }.about-container a:link, .about-container a:visited, .main-page-content a:link, .main-page-content a:visited {text-decoration: underline }.about-container a:focus, .about-container a:hover, .main-page-content a:focus, .main-page-content a:hover {text-decoration: none }.visually-hidden {clip: rect(1px, 1px, 1px, 1px) !important;border: 0 !important;-webkit-clip-path: inset(50%) !important;clip-path: inset(50%) !important;height: 1px !important;margin: -1px !important;overflow: hidden !important;padding: 0 !important;position: absolute !important;white-space: nowrap !important;width: 1px !important }.hidden {display: none }pre {word-wrap: break-word;white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap }a {color: var(--text-link) }a.external:after {background-color: var(--icon-primary);content: "";display: inline-flex;height: 10px;margin-left: 4px;-webkit-mask-image: url(/static/media/external.ad7e40a95bc765963433.svg);mask-image: url(/static/media/external.ad7e40a95bc765963433.svg);-webkit-mask-size: cover;mask-size: cover;width: 10px }.expand-this-link:after {bottom: 0;content: "";left: 0;position: absolute;right: 0;top: 0 }[type=search]::-ms-clear {display: none;height: 0;width: 0 }[type=search]::-ms-reveal {display: none;height: 0;width: 0 }[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration, [type=search]::-webkit-search-results-button, [type=search]::-webkit-search-results-decoration {display: none }u {-webkit-text-decoration-color: var(--text-link);text-decoration-color: var(--text-link);text-decoration-thickness: .15rem;text-underline-offset: .1em }.plus, .plus .dark {--background-toc-active: var(--plus-accent-background-color);--text-link: var(--plus-accent-color);--category-color: var(--plus-accent-color);--category-color-background: var(--plus-accent-background-color);--code-color: var(--plus-code-color);--mark-color: var(--plus-mark-color) }@media(forced-colors:active) {.icon {background-color: CanvasText !important }}.button, button {-webkit-appearance: none;appearance: none;background: none;border: none }.button {--button-bg: var(--button-primary-default);--button-border-color: var(--button-primary-default);--button-focus-effect: var(--focus-effect);--button-height: var(--form-elem-height, 2rem);--button-color: var(--background-primary);--button-font: var(--type-emphasis-m);--button-padding: 0.5rem;--button-radius: var(--elem-radius, 0.25rem);border-radius: var(--button-radius);cursor: pointer;display: inline-block;padding: 0;text-decoration: none }.button-wrap {align-items: center;background-color: var(--button-bg);border: 1px solid var(--button-border-color);border-radius: var(--button-radius);color: var(--button-color);display: flex;font: var(--button-font);gap: .25rem;height: var(--button-height);justify-content: center;padding-left: var(--button-padding);padding-right: var(--button-padding);position: relative }.button .icon {background-color: var(--button-color);margin: 0 -1px }.button.hover, .button:hover {--button-bg: var(--button-primary-hover);--button-border-color: var(--button-bg) }.button.active, .button:active {--button-bg: var(--button-primary-active) }.button.focus, .button:focus {outline: none }.button.focus .button-wrap, .button:focus .button-wrap {border: 1px solid var(--button-secondary-border-focus);box-shadow: var(--button-focus-effect) }.button.button.inactive, .button.button[disabled] {cursor: default;opacity: .65 }.button.button.inactive:hover, .button.button[disabled]:hover {--button-bg: inherit;--button-border-color: transparent }.button.small, .button.small .button-wrap {--button-height: 1.75rem;--button-padding: 0.25rem }.button.secondary {--button-bg: var(--button-secondary-default);--button-border-color: var(--border-primary);--button-color: var(--text-secondary) }.button.secondary:hover {--button-bg: var(--button-secondary-hover) }.button.secondary:active {--button-bg: var(--button-secondary-active) }.button.secondary:focus {--button-border-color: var(--button-secondary-border-focus) }.button.action {--button-bg: transparent;--button-border-color: var(--button-bg);--button-color: var(--text-secondary);--button-font: var(--type-label-s) }.button.action.has-icon {--button-font: var(--type-emphasis-m);text-transform: none }.button.action:hover {--button-bg: var(--button-secondary-hover) }.button.action:active {--button-bg: var(--button-secondary-active) }.button.action:focus {--button-border-color: var(--button-secondary-border-focus) }.button.action .button-wrap {text-transform: uppercase }.button.action.highlight {--button-color: var(--button-primary-default) }.button.select {--button-bg: var(--background-primary);--button-border-color: var(--border-primary);--button-color: var(--text-secondary);-webkit-appearance: none;appearance: none;background: none;border: none;padding: 0;text-decoration: none }.button.select .button-wrap {box-shadow: var(--shadow-01);padding-right: 26px;position: relative }.button.select .button-wrap:after {background-color: var(--icon-primary);content: "";display: block;height: 16px;-webkit-mask-image: url(/static/media/small-arrow.a22801b3d18b7d1ea795.svg);mask-image: url(/static/media/small-arrow.a22801b3d18b7d1ea795.svg);-webkit-mask-size: cover;mask-size: cover;position: absolute;right: .5rem;top: calc(50% - .5rem);width: 16px }.header-search {max-width: 100% }.header-search .search-widget {margin: 0 auto;max-width: 20rem;position: relative;width: 100% }@media screen and (min-width:769px) {.header-search .search-widget {align-items: center;display: flex;gap: .5rem }}.header-search .search-input-field {-webkit-appearance: none;background-color: var(--background-primary);border: 1px solid var(--border-primary);border-radius: 100px;caret-color: var(--text-link);color: var(--text-primary);height: var(--form-elem-height);min-width: 5rem;padding-left: 1rem;padding-right: 2rem;width: 100% }@-webkit-keyframes blink {0%, to {-webkit-text-decoration-line: none;text-decoration-line: none }50% {-webkit-text-decoration-line: underline;text-decoration-line: underline }}@keyframes blink {0%, to {-webkit-text-decoration-line: none;text-decoration-line: none }50% {-webkit-text-decoration-line: underline;text-decoration-line: underline }}@media screen and (min-width:992px) {.header-search .search-input-field:invalid {width: 1rem }}.header-search .search-input-field:focus, .header-search .search-input-field:valid {width: inherit }.header-search .search-input-field:invalid::-webkit-input-placeholder {-webkit-animation: blink 2s step-end infinite;animation: blink 2s step-end infinite;caret-color: transparent }.header-search .search-input-field:invalid, .header-search .search-input-field:invalid::placeholder {-webkit-animation: blink 2s step-end infinite;animation: blink 2s step-end infinite;caret-color: transparent }@media(prefers-reduced-motion:reduce) {.header-search .search-input-field:invalid::-webkit-input-placeholder {caret-color: auto }.header-search .search-input-field:invalid, .header-search .search-input-field:invalid::placeholder {caret-color: auto }}.header-search .search-input-field:valid::-webkit-input-placeholder {-webkit-animation: none;animation: none }.header-search .search-input-field:valid, .header-search .search-input-field:valid::placeholder {-webkit-animation: none;animation: none }.header-search .search-input-field:not(:focus):valid::-webkit-input-placeholder {-webkit-text-decoration-line: none;text-decoration-line: none }.header-search .search-input-field:not(:focus):valid, .header-search .search-input-field:not(:focus):valid::placeholder {-webkit-text-decoration-line: none;text-decoration-line: none }.header-search .search-input-field:not(:focus), .header-search .search-input-field:not(:focus)::placeholder {-webkit-animation: none;animation: none;-webkit-text-decoration-line: underline;text-decoration-line: underline }.header-search .search-input-field:not(:focus)::-webkit-input-placeholder {-webkit-animation: none;animation: none;-webkit-text-decoration-line: underline;text-decoration-line: underline }.header-search .search-input-field:not(:focus)::placeholder {-webkit-animation: none;animation: none;-webkit-text-decoration-line: underline;text-decoration-line: underline }.header-search .search-input-field:focus {border-color: var(--category-color);box-shadow: 0 0 0 3px var(--blend-color), 0 0 0 3px var(--category-color);outline: 0 none }.header-search .search-input-field::-webkit-input-placeholder {font: var(--type-body-l);opacity: 1;-webkit-text-decoration-color: var(--text-link);text-decoration-color: var(--text-link);text-decoration-thickness: .15rem;text-underline-offset: .1em }.header-search .search-input-field, .header-search .search-input-field::placeholder {font: var(--type-body-l);opacity: 1;-webkit-text-decoration-color: var(--text-link);text-decoration-color: var(--text-link);text-decoration-thickness: .15rem;text-underline-offset: .1em }.header-search .server-error {color: var(--icon-critical);margin: 0 }.header-search .search-results, .homepage-hero-search .search-results {border: 1px solid var(--border-secondary);border-radius: var(--elem-radius);box-shadow: var(--shadow-01);left: 0;position: absolute;top: 42px;width: 100%;z-index: var(--z-index-search-results) }.header-search .search-results, .header-search .search-results a[href], .header-search .search-results mark, .homepage-hero-search .search-results, .homepage-hero-search .search-results a[href], .homepage-hero-search .search-results mark {color: var(--text-primary) }.header-search .search-results .indexing-warning, .homepage-hero-search .search-results .indexing-warning {color: var(--icon-warning) }.header-search .search-results .nothing-found, .homepage-hero-search .search-results .nothing-found {font-style: italic }.header-search .search-results .result-item, .homepage-hero-search .search-results .result-item {background: var(--background-secondary);border-bottom: 1px solid var(--border-secondary);font-size: var(--type-smaller-font-size);word-break: break-word }.header-search .search-results .result-item:first-child, .homepage-hero-search .search-results .result-item:first-child {border-radius: var(--elem-radius) var(--elem-radius) 0 0 }.header-search .search-results .result-item:last-child, .homepage-hero-search .search-results .result-item:last-child {border-radius: 0 0 var(--elem-radius) var(--elem-radius) }.header-search .search-results .result-item.nothing-found code, .homepage-hero-search .search-results .result-item.nothing-found code {font-size: .8125rem }.header-search .search-results .result-item a, .homepage-hero-search .search-results .result-item a {display: block;padding: .5rem }.header-search .search-results .result-item.highlight, .header-search .search-results .result-item:hover, .homepage-hero-search .search-results .result-item.highlight, .homepage-hero-search .search-results .result-item:hover {background-color: var(--border-secondary) }.header-search .search-results .result-item.qs-collection b:after, .homepage-hero-search .search-results .result-item.qs-collection b:after {border: 1px solid var(--text-primary-red);border-radius: .5rem;content: "collection";font-size: .5rem;line-height: .5rem;margin-bottom: .5rem;margin-left: .5rem;padding: .125rem;vertical-align: super }.header-search .search-results .result-item:focus, .header-search .search-results .result-item:hover, .homepage-hero-search .search-results .result-item:focus, .homepage-hero-search .search-results .result-item:hover {cursor: pointer }.header-search .search-results div:last-child, .homepage-hero-search .search-results div:last-child {border-bottom: 0 }.header-search .search-results mark, .homepage-hero-search .search-results mark {background-color: var(--mark-color) }.header-search .search-results small, .homepage-hero-search .search-results small {overflow-wrap: break-word }.header-search .search-results a, .homepage-hero-search .search-results a {text-overflow: ellipsis }.header-search .search-results div.searchindex-error, .homepage-hero-search .search-results div.searchindex-error {color: var(--icon-critical) }.search-form {display: flex;position: relative }.button.clear-search-button, .button.search-button {--button-color: var(--icon-secondary);--button-height: 1.5rem;--button-padding: 0;position: absolute;right: .75rem;top: .25rem;width: 1.5rem }.button.clear-search-button:hover, .button.search-button:hover {background: transparent }@media screen and (min-width:769px) {.button.clear-search-button, .button.search-button {right: 1.2rem;width: 1.5rem }}.button.clear-search-button {display: none }.header-search .search-input-field:focus~.button.clear-search-button, .header-search .search-input-field:valid~.button.clear-search-button {display: block;right: 2.8rem }.generic-loading {align-items: center;-webkit-animation: slow-pulse 2s infinite normal;animation: slow-pulse 2s infinite normal;-webkit-animation-delay: 1s;animation-delay: 1s;display: flex;justify-content: center;width: 100% }.bc-table {border: 1px solid var(--border-primary);border-collapse: separate;border-radius: var(--elem-radius);border-spacing: 0;margin: 1rem 0;width: 100% }.bc-table td, .bc-table th {border-width: 1px;border-bottom: 1px solid var(--border-secondary);border-left: 1px solid var(--border-secondary);border-right: 0 solid var(--border-secondary);border-top: 0 solid var(--border-secondary);font-weight: 500;padding: 0 }@media screen and (min-width:769px) {.bc-table td, .bc-table th {padding: .4rem }.bc-table td, .bc-table td code, .bc-table th, .bc-table th code {font-size: var(--type-smaller-font-size) }}.bc-table th {padding: .4rem }.bc-table tbody tr {height: 3rem }@media screen and (min-width:769px) {.bc-table tbody tr:last-child td, .bc-table tbody tr:last-child th {border-bottom-width: 0 }}.bc-table tbody tr th {border-left-width: 0;vertical-align: middle }.bc-table tbody .bc-support {vertical-align: top }.bc-table tbody .bc-support button {cursor: pointer;width: 100% }.bc-table tbody .bc-support.bc-supports-no>button>span {color: var(--text-primary-red) }.bc-table tbody .bc-support.bc-supports-partial>button>span {color: var(--text-primary-yellow) }.bc-table tbody .bc-support.bc-supports-preview>button>span {color: var(--text-primary-blue) }.bc-table tbody .bc-support.bc-supports-yes>button>span {color: var(--text-primary-green) }.bc-table tbody .bc-history td {border-left-width: 0 }.bc-table tbody .bc-history .icon.icon-removed-partial {-webkit-mask-image: url(/static/media/partial.2d8806d709221f07c72c.svg);mask-image: url(/static/media/partial.2d8806d709221f07c72c.svg) }.bc-table th {background: var(--background-tertiary);vertical-align: bottom }.bc-table .bc-supports {margin-bottom: 1rem }.bc-table .bc-supports .icon-wrap {background: var(--background-primary) }.bc-table .bc-supports.bc-supports-removed-partial .bcd-cell-text-copy {color: var(--text-primary-yellow) }.bc-table .icon-wrap .bc-support-level {clip: rect(0 0 0 0);border: 0;height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute !important;width: 1px }.bc-table .bc-support>button>.icon-wrap {display: block }.bc-table .bc-support .icon.icon-removed-partial {background-color: var(--icon-critical);-webkit-mask-image: url(/static/media/no.d2e0aa3e7440f80dccd6.svg);mask-image: url(/static/media/no.d2e0aa3e7440f80dccd6.svg) }.bc-table .bc-support.bc-supports-removed-partial .bcd-cell-text-copy {color: var(--text-primary-red) }.bc-table .bc-feature-depth-2 {border-left-width: 8px }.bc-head-txt-label {left: calc(50% - .5rem);line-height: 1;padding-top: .5rem;position: relative;-webkit-transform: rotate(180deg);transform: rotate(180deg);white-space: nowrap;-webkit-writing-mode: vertical-rl;writing-mode: vertical-rl }.bc-head-icon-symbol {margin-bottom: .3rem }.bc-support {text-align: center;vertical-align: middle }.bc-level-no {background-color: var(--icon-critical) }.bc-level-preview {background-color: var(--icon-information) }.bc-legend-items-container {display: flex;flex-wrap: wrap;font-size: var(--type-smaller-font-size);gap: 1.5rem;margin-bottom: 2rem }.bc-legend-tip {font-size: var(--type-smaller-font-size);font-style: italic;margin-bottom: 1rem;margin-top: 0 }.bc-legend-item {align-items: center;display: flex;gap: .5rem }.bc-legend-item-dt {display: flex }.bc-legend-item-dt .icon {background-color: var(--icon-primary) }.bc-platforms {height: 2rem }.bc-platforms th {text-align: center }.bc-platforms td {border: none }.bc-browsers th {text-align: center }.bc-browsers td {border-width: 0 0 1px }.bc-notes-list {margin: .5rem 0;position: relative;text-align: left;width: 100% }.bc-notes-list:before {background: var(--border-primary);content: "";height: calc(100% - .25rem);left: 7px;margin-top: .25rem;position: absolute;width: 2px;z-index: -1 }.bc-notes-list .bc-notes-wrapper:last-child dd:last-child {position: relative }.bc-notes-list .bc-notes-wrapper:last-child dd:last-child:before {background: var(--background-primary);bottom: 0;content: "";height: calc(100% - 6px);left: 7px;position: absolute;width: 2px;z-index: -1 }.bc-notes-list .bc-level-yes.icon.icon-yes {background-color: var(--icon-success);-webkit-mask-image: url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg);mask-image: url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg) }.bc-notes-list .bc-supports-dd .icon {background: var(--border-primary);border: 3px solid var(--background-primary);border-radius: 50%;-webkit-mask-image: none;mask-image: none }.bc-notes-list .bc-version-label {display: inline }.bc-notes-list abbr {margin-right: 4px }.bc-notes-list dd {margin-bottom: 1rem;padding-left: 1.5rem;text-indent: -1.5rem }.bc-notes-list dd:last-child {margin-bottom: 2rem }.bc-notes-wrapper {color: var(--text-primary);margin-bottom: 1rem }.bc-notes-wrapper:last-child {margin-bottom: 0 }dl.bc-notes-list dt.bc-supports {margin-top: 1rem }dl.bc-notes-list dt.bc-supports:first-child {margin-top: 0 }dl.bc-notes-list dd.bc-supports-dd {margin-bottom: 1rem }dl.bc-notes-list dd.bc-supports-dd:last-child {margin-bottom: 0 }.offscreen, .only-icon span {clip: rect(0 0 0 0);border: 0;height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute !important;width: 1px }.bc-table-row-header {align-items: baseline;display: inline-flex;width: 100% }.bc-table-row-header code {overflow: hidden }.bc-table-row-header .left-side, .bc-table-row-header .right-side {overflow: hidden;white-space: pre }.bc-table-row-header .left-side {flex: 0 1 auto;text-overflow: ellipsis }.bc-table-row-header .right-side {flex: 1 0 auto }.bc-table-row-header .bc-icons {display: flex;gap: .5rem;margin-top: .25rem }.bc-table-row-header .bc-icons .icon {background-color: var(--icon-secondary) }.bc-table-row-header .bc-icons .icon:hover {background-color: var(--icon-primary) }.bc-github-link {font: var(--type-smaller-font-size) }.main-page-content .bc-legend dd, .main-page-content .bc-legend dt {margin-bottom: 0;margin-left: 0;margin-top: 0 }.main-page-content .bc-supports-dd {margin: 0 }@media screen and (max-width:425px) {thead {display: none }td.bc-support {border-left-width: 0;display: block }.bc-feature, .bc-history>td, .bc-support>button {align-content: center;display: flex;flex-wrap: wrap;gap: .5rem }.bc-history-desktop {display: none }.table-scroll {overflow-x: auto }}@media screen and (min-width:426px) {.bc-table thead {display: table-header-group }.bc-table thead .bc-platforms th {vertical-align: revert }.bc-table td, .bc-table th {background: inherit;padding: .25rem;width: 2rem }.bc-table td.bc-support {padding: 0 }.bc-table td.bc-support>button {padding: .25rem }.bc-table tr.bc-history-desktop {display: table-row }.table-scroll {margin: 0 -3rem;overflow: auto;width: 100vw }.table-scroll-inner {min-width: -webkit-max-content;min-width: max-content;padding: 0 3rem;position: relative }.table-scroll-inner:after {bottom: 0;content: "";height: 10px;position: absolute;right: 0;width: 10px }.bc-browser-name, .bc-support-level {display: none }.bc-notes-list {margin-left: 20%;width: auto }.bc-support .bc-support-level {display: none }.bc-support[aria-expanded=true] {position: relative }.bc-support[aria-expanded=true]:after {background: var(--text-primary);bottom: -1px;content: "";height: 2px;left: 0;position: absolute;width: 100% }.bc-support[aria-expanded=true] .bc-history-mobile {display: none }.bc-has-history {cursor: pointer }.bc-has-history:hover {background: var(--background-secondary) }}@media screen and (min-width:769px) {.table-scroll {width: calc(100% + 6rem) }.bc-table tbody th {width: 20% }}@media screen and (min-width:1200px) {.table-scroll {margin: 0;width: 100% }.table-scroll-inner {padding: 0 }}.bcd-cell-text-wrapper {display: flex;gap: .5rem }@media screen and (min-width:769px) {.bcd-cell-text-wrapper {align-items: center;flex-direction: column }}.bcd-cell-text-copy {color: var(--text-primary);display: flex;gap: .5rem }.bc-supports-yes .bcd-cell-text-copy {color: var(--text-primary-green) }.bc-supports-no .bcd-cell-text-copy {color: var(--text-primary-red) }.bc-supports-partial .bcd-cell-text-copy {color: var(--text-primary-yellow) }.bcd-cell-icons {display: flex;gap: .5rem }@media screen and (min-width:769px) {.bcd-cell-icons {display: block }}.bc-notes-wrapper .bcd-cell-text-wrapper {flex-direction: row }@media screen and (min-width:769px) {.bc-table td {height: 2rem }.bc-table td.bc-support>button {padding: .5rem .25rem }}.container {margin-left: auto;margin-right: auto;max-width: var(--max-width);padding-left: var(--gutter);padding-right: var(--gutter);width: 100% }.logo {align-items: center;display: flex }.logo svg {height: 1.5rem;margin-top: .3rem }.dark .logo-text, .high-contrast-black .logo-text {fill: #fff }.auth-container .signin-link {align-items: center;display: inline-flex;font-weight: var(--font-body-strong-weight);height: 2rem;text-align: center }.auth-container .signin-link:link, .auth-container .signin-link:visited {color: var(--text-secondary) }.mdn-plus-subscribe-link {--button-padding: 1rem;margin: 0 auto;max-width: 150px;text-align: center;white-space: nowrap }.auth-container {display: flex;flex-flow: column-reverse;font-family: var(--font-body);font-size: var(--type-smaller-font-size);font-weight: var(--font-body-strong-weight);gap: .5rem;list-style: none;margin-bottom: .5rem;padding: 0;text-align: center }@media screen and (min-width:992px) {.auth-container {align-items: center;flex-flow: row;gap: 1rem;justify-content: flex-end;margin: 0;text-align: left;text-align: initial;width: -webkit-min-content;width: min-content }}@media screen and (min-width:820px) {.auth-container {width: auto }}.submenu {background-color: var(--background-primary);list-style: none;margin: 0;padding: 0 }.submenu li {width: 100% }.submenu .submenu-item, .submenu a {align-items: center;border: 1px solid transparent;color: var(--text-primary);display: flex;height: 100%;padding: .5rem;width: 100% }li:last-child .submenu .submenu-item:not(:focus), li:last-child .submenu a:not(:focus) {border-bottom-color: transparent }.submenu .submenu-item:hover, .submenu a:hover {background-color: var(--border-secondary);text-decoration: none }.main-menu .submenu .submenu-item:hover, .main-menu .submenu a:hover {background-color: var(--background-secondary) }.submenu .submenu-item:focus, .submenu a:focus {border: 1px solid var(--button-secondary-border-focus);box-shadow: var(--button-focus-effect) }.submenu .submenu-item .icon, .submenu a .icon {margin-right: .5rem }@media screen and (min-width:992px) {.submenu.inline-submenu-lg {background-color: var(--background-secondary);border: 1px solid var(--border-primary);border-radius: var(--elem-radius);box-shadow: var(--shadow-02);max-width: 25rem;padding: .5rem;position: absolute;top: calc(100% + 4px);width: -webkit-max-content;width: max-content;z-index: var(--z-index-mid) }.main-menu .submenu.inline-submenu-lg {background-color: var(--background-primary) }.submenu.inline-submenu-lg .submenu-item {border-radius: var(--elem-radius);padding: .75rem }.submenu.inline-submenu-lg:before {content: "";display: block;height: 8px;left: 0;position: absolute;top: -8px;width: 100% }}@media screen and (min-width:769px) {.submenu:not(.inline-submenu-lg) {background-color: var(--background-secondary);border: 1px solid var(--border-primary);border-radius: var(--elem-radius);box-shadow: var(--shadow-02);max-width: 25rem;padding: .5rem;position: absolute;top: calc(100% + 4px);width: -webkit-max-content;width: max-content;z-index: var(--z-index-mid) }.main-menu .submenu:not(.inline-submenu-lg) {background-color: var(--background-primary) }.submenu:not(.inline-submenu-lg) .submenu-item {border-radius: var(--elem-radius);padding: .75rem }.submenu:not(.inline-submenu-lg):before {content: "";display: block;height: 8px;left: 0;position: absolute;top: -8px;width: 100% }}.submenu-header {display: block;padding: 1rem }.submenu-header .submenu-item {padding: 0 }.submenu-header .submenu-item:hover {background: none }@media screen and (min-width:769px) {.submenu-header {border-bottom: 1px solid var(--border-primary) }}.submenu-icon {background-color: var(--icon-primary);height: 2rem;margin-right: .75rem;position: relative;width: .2rem }.submenu-item, .submenu-item-heading {font-size: var(--type-smaller-font-size) }@media screen and (min-width:769px) {.submenu-item-heading:not(:only-child), .submenu-item:not(:only-child) {font-weight: var(--font-body-strong-weight) }}.submenu-item-description {display: none }@media screen and (min-width:769px) {.submenu-item-description {display: block;font-size: var(--type-tiny-font-size);margin: .25rem 0 0 }}.submenu-item-subtext {font-weight: var(--font-body-strong-weight) }.submenu-item-dot~.submenu-content-container>.submenu-item-heading:after {background: var(--text-primary-blue);border: 1px solid var(--background-primary);border-radius: 2rem;content: "";display: inline-block;height: .5rem;margin-left: .5rem;width: .5rem }.active-menu-item {background-color: var(--background-primary);border-color: var(--border-secondary) }.guides .submenu .submenu-item-heading {font-size: var(--type-smaller-font-size);font-weight: 400 }.guides .desktop-only {display: none }@media screen and (min-width:992px) {.guides .desktop-only {display: inherit }.guides .mobile-only {display: none }}.references .desktop-only {display: none }@media screen and (min-width:992px) {.references .desktop-only {display: inherit }.references .mobile-only {display: none }}.html-link-container a:focus .submenu-icon.html, .html-link-container a:hover .submenu-icon.html {background: var(--html-accent-color) !important }.css-link-container a:focus .submenu-icon.css, .css-link-container a:hover .submenu-icon.css {background-color: var(--css-accent-color) !important }.javascript-link-container a:focus .submenu-icon.javascript, .javascript-link-container a:hover .submenu-icon.javascript {background-color: var(--js-accent-color) !important }.http-link-container a:focus .submenu-icon.http, .http-link-container a:hover .submenu-icon.http {background-color: var(--http-accent-color) !important }.apis-link-container a:focus .submenu-icon.apis, .apis-link-container a:hover .submenu-icon.apis {background-color: var(--apis-accent-color) !important }.learn-link-container a:focus .submenu-icon.learn, .learn-link-container a:hover .submenu-icon.learn {background-color: var(--learn-accent-color) !important }ul.main-menu {grid-gap: 1rem;box-sizing: border-box;list-style: none;margin-top: 1rem;padding: 0;width: 100% }ul.main-menu.show {display: block }@media screen and (min-width:992px) {ul.main-menu.show {display: flex }ul.main-menu {align-items: center;display: flex;justify-content: space-around;margin: 0 auto 0 0;max-width: 310px }}@media screen and (min-width:992px) {ul.main-menu li:last-child {flex-basis: inherit }ul.main-menu .menu-toggle, ul.main-menu .submenu, ul.main-menu .submenu.show {display: none }}@media screen and (min-width:992px) {ul.main-menu .top-level-entry-container:focus-within .submenu, ul.main-menu .top-level-entry-container:hover .submenu {display: block }.open-on-focus-within:focus-within .watch-submenu {display: flex }.open-on-focus-within:focus-within .submenu {display: block }.open-on-focus-within .submenu, .open-on-focus-within .watch-submenu {display: none }}.avatar, .avatar-wrap {border-radius: 50% }.avatar-wrap {height: 32px;margin-left: -7px;margin-right: .1rem;position: relative;width: 32px }@media screen and (min-width:769px) {.avatar {margin: initial }}.top-navigation-main {display: none;justify-content: space-between;padding: 0;width: 100% }.show-nav .top-navigation-main {display: flex;flex-direction: column }.top-navigation-main .auth-container {order: 0 }.top-navigation-main .header-search {order: 1 }.top-navigation-main .main-nav {order: 2 }.top-navigation-main .notifications-menu {order: 3 }.top-navigation-main .user-menu {order: 4 }.top-navigation-main .top-level-entry-container {position: relative }.top-navigation-main .top-level-entry-container .submenu {z-index: var(--z-index-nav-menu) }.top-navigation-main .theme-toggle {align-self: end;margin-bottom: 1.5rem }@media screen and (min-width:992px) {.top-navigation-main .theme-toggle {align-self: auto;margin-bottom: 0 }}.top-navigation-main .button.action:hover {--button-bg: var(--border-secondary) }.is-transparent .top-navigation-main .button.action:not(:focus):hover {--button-border-color: transparent }.is-transparent .top-navigation-main .button.action:hover {--button-bg: var(--accent-primary-engage) }.top-navigation-main .button.action.search-button:hover {--button-bg: transparent }.top-navigation-main .top-level-entry {background: none;border-top: 1px solid var(--border-secondary);color: var(--text-secondary);cursor: pointer;display: block;padding: 1rem .5rem;text-align: left;width: 100% }.top-navigation-main .top-level-entry:link, .top-navigation-main .top-level-entry:visited {color: var(--text-secondary) }.top-navigation-main .top-level-entry.menu-toggle {min-height: 53px;padding: .5rem }@media screen and (max-width:992px) {.top-navigation-main .top-level-entry.button {--button-color: var(--text-secondary);--button-padding: 0;--button-radius: 0 }.top-navigation-main .top-level-entry.button .button-wrap {background: none;border: none;gap: .5rem;justify-content: flex-start;padding: 0;text-transform: none }.top-navigation-main .top-level-entry.button:focus {--button-focus-effect: none }}@media screen and (min-width:992px) {.top-navigation-main .top-level-entry {border-radius: var(--elem-radius);border-top: none;padding: .5rem }.top-navigation-main .top-level-entry:focus, .top-navigation-main .top-level-entry:hover {background-color: var(--category-color-background);color: var(--category-color);text-decoration: none }.top-navigation-main .top-level-entry.button {padding: 0 }}.top-navigation-main .menu-toggle {align-items: center;display: flex;justify-content: space-between;position: relative }.top-navigation-main .menu-toggle:after {background-color: var(--icon-primary);content: "";height: var(--icon-size);margin-left: .2em;margin-top: .2em;-webkit-mask-image: url(/static/media/chevron.05a124d379047e16d746.svg);mask-image: url(/static/media/chevron.05a124d379047e16d746.svg);width: var(--icon-size) }.top-navigation-main .menu-toggle[aria-expanded=true]:after {-webkit-transform: rotate(180deg);transform: rotate(180deg) }.top-navigation-main .menu-toggle+.top-level-entry {display: none }@media screen and (min-width:992px) {.top-navigation-main {align-items: center;display: flex;flex: 1 1;flex-direction: row;gap: .5rem;left: inherit;padding: 0;position: static;top: inherit;z-index: inherit }.show-nav .top-navigation-main {flex-direction: row }.top-navigation-main .main-nav {order: 0 }.top-navigation-main .header-search {order: 1 }.top-navigation-main .notifications-menu {order: 2 }.top-navigation-main .auth-container {order: 3 }.top-navigation-main .user-menu {order: 4 }.top-navigation-main .main-nav {margin-right: auto;width: -webkit-max-content;width: max-content }.top-navigation-main .menu-toggle+.top-level-entry {display: inline-flex }}.top-navigation {background-color: var(--background-primary);border-bottom: 1px solid var(--border-primary);position: relative;width: 100%;z-index: 100 }.top-navigation .container {align-items: center;background-color: var(--background-primary);display: flex;flex-flow: row wrap;gap: var(--gutter) }@media screen and (min-width:769px) {.top-navigation .container {background-color: transparent }}.top-navigation.is-transparent {background-color: transparent }.top-navigation .top-navigation-wrap {align-items: center;display: flex;flex: 1 1;height: var(--top-nav-height);justify-content: space-between }.top-navigation.show-nav {box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);z-index: var(--z-index-top) }.top-navigation.show-nav .container {height: auto }@media screen and (min-width:992px) {.main-menu-toggle {display: none }.top-navigation .top-navigation-wrap {flex: 0 1 }}.article-actions {margin-left: auto }.article-actions .article-actions-dialog-heading {display: none }.article-actions .button.action .button-wrap {text-transform: none }@media screen and (min-width:769px) {.article-actions {display: block }}.article-actions .article-actions-submenu {--gutter-padding: 1rem;display: none;overflow: scroll }.article-actions .article-actions-submenu.show {background: var(--background-primary);bottom: 0;display: flex;flex-direction: column;left: 0;position: fixed;right: 0;top: var(--top-navigation-height);z-index: var(--z-index-mid) }.article-actions .article-actions-submenu .header {border-bottom: 1px solid var(--border-primary);color: var(--text-primary);display: block;font-family: var(--font-body);font-size: var(--type-smaller-font-size);font-weight: var(--font-body-strong-weight);margin: 0;padding: 1rem;text-align: left;width: 100% }.article-actions .article-actions-submenu .header .header-inner {align-items: center;display: flex;gap: .5rem;position: relative }.article-actions .article-actions-submenu .header .icon {-webkit-transform: rotate(90deg);transform: rotate(90deg) }.article-actions .article-actions-submenu .header.desktop-only {display: none }.article-actions .article-actions-submenu .mdn-form-item, .article-actions .article-actions-submenu p {margin: 0;padding: 1rem 1rem 0 }.article-actions .article-actions-submenu .mdn-form-item:last-child, .article-actions .article-actions-submenu p:last-child {padding-bottom: 1rem }@media screen and (min-width:769px) {.article-actions .article-actions-submenu.show {background-color: var(--background-secondary);border: 1px solid var(--border-primary);border-radius: var(--elem-radius);bottom: auto;box-shadow: var(--shadow-02);left: auto;padding: 0;position: absolute;right: 0;top: calc(100% + 6px);width: 316px;z-index: var(--z-index-mid) }.article-actions .article-actions-submenu .header {display: block;padding: 1rem var(--gutter-padding);text-align: center }.article-actions .article-actions-submenu .header-inner {justify-content: center }.article-actions .article-actions-submenu .header.desktop-only {display: block }.article-actions .article-actions-submenu .header.mobile-only {display: none }.article-actions .article-actions-submenu .header .icon {left: 0;position: absolute }}.article-actions-entries {display: none;list-style: none;margin: 0;padding: 0 }@media screen and (min-width:769px) {.article-actions-entries {display: flex;gap: .5rem }.article-actions-entries .sidebar-toggle {display: none }}.article-actions-entry {align-items: center;display: flex;position: relative }@media screen and (max-width:769px) {.article-actions.show-actions {-webkit-overflow-scrolling: touch;background-color: var(--background-primary);color: var(--text-primary);display: block;height: 100vh;left: 0;overflow: auto;position: fixed;top: var(--top-navigation-height);width: 100vw;z-index: var(--z-index-low) }.article-actions.show-actions .article-actions-entries>li>.button, .article-actions.show-actions .article-actions-entries>li>div>.button, .article-actions.show-actions>.button {--button-radius: 0;border-bottom: 1px solid var(--border-secondary);width: 100% }.article-actions.show-actions .article-actions-entries>li>.button .button-wrap, .article-actions.show-actions .article-actions-entries>li>div>.button .button-wrap, .article-actions.show-actions>.button .button-wrap {justify-content: flex-start;margin-top: 1px;padding: 1.5rem 1rem }.article-actions.show-actions .article-actions-dialog-heading {display: block }.article-actions.show-actions .article-actions-entries {display: block;padding: 1rem }.article-actions.show-actions .article-action-entry, .article-actions.show-actions .article-actions-toggle {border-bottom: 1px solid var(--border-secondary) }.article-actions.show-actions .article-actions-entry {display: block }}.article-actions-container {align-items: center;background-color: var(--background-secondary);border-bottom: 1px solid var(--border-primary);margin: 0;min-height: 2rem;padding: 0;position: -webkit-sticky;position: sticky;top: 0;z-index: var(--z-index-low) }.article-actions-container .container {align-items: center;display: flex;gap: .5rem;justify-content: space-between }.article-actions-container .sidebar-button {display: none }@media screen and (max-width:769px) {.article-actions-container .sidebar-button {align-items: center;align-self: stretch;display: flex;margin: 0 0 0 -1rem }.article-actions-container .sidebar-button .button-wrap {border-radius: 0;border-right: 1px solid var(--border-primary) }}@media screen and (min-width:769px) {.article-actions-container {position: static }.article-actions-container .article-actions-toggle {display: none }.article-actions-container .bookmark-button-container {flex: 0 0 40px }}@media screen and (min-width:1441px) {.article-actions-container .container {padding-left: 1rem;padding-right: 1rem }}@media screen and (max-width:769px) {:root {--sticky-header-height: 2rem }}.offline-status-bar {background-color: var(--accent-primary-engage);color: var(--text-primary);display: none }.offline-status-bar.is-offline, .offline-status-bar.is-online {display: block;padding: 1rem;text-align: center }.offline-status-bar.is-online {-webkit-animation: fade-out 3s ease-out .5s;animation: fade-out 3s ease-out .5s }@-webkit-keyframes fade-out {0% {opacity: 1 }to {opacity: 0 }}@keyframes fade-out {0% {opacity: 1 }to {opacity: 0 }}.document-toc {margin-bottom: 2rem;padding: 0;position: relative }@media screen and (max-width:426px) {.document-toc {padding: 0 1rem }}.document-toc-heading.document-toc-heading {font: var(--type-heading-h5);letter-spacing: 1.5px;margin: 0 0 1rem }.document-toc-list.document-toc-list {font-size: var(--type-smaller-font-size);list-style: none;padding-left: 0 }.document-toc-list.document-toc-list li {margin: 0 }.document-toc-link.document-toc-link:not(.button) {border-left: 2px solid var(--border-secondary);color: var(--text-secondary);display: block;padding: .5rem 1rem;text-decoration: none }.document-toc-link.document-toc-link:not(.button):hover {color: var(--text-link) }.document-toc-link.document-toc-link:not(.button)[aria-current]:not([aria-current=""]):not([aria-current=false]) {background-color: var(--background-toc-active);border-left: 2px solid var(--category-color);color: var(--text-primary);font-weight: 600 }.document-toc-item-sub>.document-toc-link:not(.button) {padding-left: 2rem }.document-toc .show-toc {display: block }.sidebar {--offset: var(--main-document-header-height);--max-height: calc(100vh - var(--offset));color: var(--text-secondary) }.sidebar .backdrop {display: none }@media screen and (max-width:768px) {.sidebar {height: 100vh;left: 0;max-height: 100vh;position: fixed;right: 0;}.sidebar, .sidebar .sidebar-inner {-webkit-transform: translateX(-100%);transform: translateX(-100%);z-index: var(--z-index-top) }.sidebar .sidebar-inner {background: var(--background-primary);border-right: 1px solid var(--border-primary);height: var(--max-height);max-height: var(--max-height);max-width: 20rem;overflow: hidden;overflow: auto;padding: 1rem;position: relative;transition: transform .2s linear;width: 80vw;will-change: transform }.sidebar .backdrop {background: rgba(0, 0, 0, .3);border-radius: 0;bottom: 0;cursor: default;display: flex;left: 0;opacity: 0;position: fixed;right: 0;top: 0;transition: opacity .2s linear;width: 100%;will-change: opacity;z-index: var(--z-index-mid) }.sidebar.is-animating, .sidebar.is-expanded, .sidebar.is-expanded .sidebar-inner {-webkit-transform: translateX(0);transform: translateX(0) }.sidebar.is-expanded .backdrop {opacity: 1 }}@media screen and (min-width:769px) {.sidebar {display: flex;max-height: var(--max-height);overflow: auto;position: -webkit-sticky;position: sticky;top: var(--offset) }}.sidebar-heading {color: var(--text-primary);font: var(--type-heading-h5);letter-spacing: 1.5px;margin: 0 }.sidebar em {background-color: var(--background-toc-active);border-left: 2px solid var(--category-color);display: inline-block;font-style: normal;font-weight: 600;padding: .25rem .25rem .25rem .5rem;width: 100% }.sidebar a, .sidebar em {-webkit-hyphens: auto;hyphens: auto }.sidebar a {color: var(--text-secondary);display: inline-flex;padding: .25rem }.sidebar a:focus, .sidebar a:hover {text-decoration: underline }.sidebar .no-link {display: inline-flex;padding: .25rem }.sidebar strong {display: flex;font-size: var(--type-base-font-size-rem);margin-top: 1rem }.sidebar ol {font-size: var(--type-smaller-font-size) }.sidebar ol ol, .sidebar ol ul {padding-left: .5rem }.sidebar ol ol li .icon {margin-right: .01em }.sidebar ol ol li.no-bullet {display: block;font-weight: var(--font-body-strong-weight);list-style-type: none }.sidebar .sidebar-heading~div>ol, .sidebar .sidebar-heading~ol {margin-top: 1rem }.sidebar li, .sidebar summary {margin-bottom: .5rem }.sidebar code, .sidebar summary {font-size: var(--type-smaller-font-size) }.sidebar code {word-wrap: break-word;background-color: transparent;background-color: initial;border-radius: var(--elem-radius);font-family: var(--font-code);line-height: 1.2;padding: .125rem;white-space: normal }.sidebar summary {cursor: pointer }.sidebar details {margin: .75rem 0 }.sidebar details ol {padding-left: .75rem }.sidebar .icon {align-self: center;background-size: 14px;height: 14px;margin-right: -.25rem;-webkit-mask-size: 14px;mask-size: 14px;width: 14px }.sidebar .icon-experimental, .sidebar .icon-nonstandard {background-color: var(--icon-information) }.sidebar .icon-deprecated {background-color: var(--icon-critical) }.main-content.standalone {margin: 0 auto;max-width: var(--max-width);width: 100% }.main-page-content .metadata {background-color: var(--background-secondary);border: 1px solid var(--border-primary);border-radius: var(--elem-radius);box-shadow: var(--shadow-01);margin: 2rem 0;padding: 1rem }.main-page-content .metadata h3 {font: var(--type-heading-h4);margin-top: .5rem;padding: 0 }.metadata-content-container {margin: 0 auto;max-width: 1440px;width: 100% }.metadata-content-container .last-modified-date {margin-bottom: 0 }:root, body {--mdn-color-white: #fff;--mdn-color-black: #000;--mdn-color-dark-grey: #4e4e4e;--mdn-background-dark: #1b1b1b;--mdn-background-light: #fff;--mdn-background-light-grey: #e2e2e2;--color-announcement-banner-accent: #ff6d91 }.document-page .article-actions-container, .document-page .document-toc-container, .document-page .generic-loading, .document-page .main-content, .document-page .metadata, .document-page .page-header, .document-page .sidebar {display: flex }.document-page .main-content, .document-page .sidebar {flex-direction: column;width: 100% }.main-wrapper {display: flex;margin: 0 auto;max-width: var(--max-width) }.main-wrapper .toc {display: none }@media screen and (min-width:769px) {.main-wrapper {grid-gap: 3rem;display: grid;gap: 3rem;padding-left: 1.5rem;padding-right: 3rem }.main-wrapper .main-content, .main-wrapper .sidebar, .main-wrapper .toc {padding-bottom: 3rem;padding-top: 3rem }.main-wrapper .sidebar {align-self: start;grid-area: sidebar }.main-wrapper .main-content {grid-area: main }}@media screen and (min-width:1200px) {.main-wrapper {grid-gap: 3rem;display: grid;gap: 3rem;padding-left: 1rem;padding-right: 1rem }.main-wrapper .toc {--offset: var(--main-document-header-height);--max-height: calc(100vh - var(--offset));display: block;grid-area: toc;max-height: var(--max-height);overflow: auto;position: -webkit-sticky;position: sticky;top: var(--offset) }.main-wrapper .in-nav-toc {display: none }}.page-wrapper {grid-template-columns: 100% }.standard-page {max-width: inherit }@font-face {font-display: swap;font-family: Inter;font-stretch: 75% 100%;font-style: oblique 0deg 20deg;font-weight: 1 999;src: url(/website/fonts/Inter.var.woff2) format("woff2 supports variations"), url(/website/fonts/Inter.var.woff2) format("woff2-variations") }:root {--sticky-header-height: var(--main-document-header-height) }.main-document-header-container {position: -webkit-sticky;position: sticky;top: 0;z-index: var(--z-index-top) }.main-page-content {overflow-wrap: break-word;padding: 3rem 1rem 1rem }.main-page-content h1 a:link, .main-page-content h1 a:visited, .main-page-content h2 a:link, .main-page-content h2 a:visited, .main-page-content h3 a:link, .main-page-content h3 a:visited, .main-page-content h4 a:link, .main-page-content h4 a:visited, .main-page-content h5 a:link, .main-page-content h5 a:visited, .main-page-content h6 a:link, .main-page-content h6 a:visited {color: var(--text-primary);text-decoration: none }.main-page-content h1 a:focus, .main-page-content h1 a:hover, .main-page-content h2 a:focus, .main-page-content h2 a:hover, .main-page-content h3 a:focus, .main-page-content h3 a:hover, .main-page-content h4 a:focus, .main-page-content h4 a:hover, .main-page-content h5 a:focus, .main-page-content h5 a:hover, .main-page-content h6 a:focus, .main-page-content h6 a:hover {text-decoration: underline }.main-page-content h1 a:active, .main-page-content h2 a:active, .main-page-content h3 a:active, .main-page-content h4 a:active, .main-page-content h5 a:active, .main-page-content h6 a:active {background-color: transparent }.main-page-content h1 a[href^="#"]:hover:after, .main-page-content h2 a[href^="#"]:hover:after, .main-page-content h3 a[href^="#"]:hover:after, .main-page-content h4 a[href^="#"]:hover:after, .main-page-content h5 a[href^="#"]:hover:after, .main-page-content h6 a[href^="#"]:hover:after {color: var(--text-inactive);content: "#";display: inline-flex;font-size: .7em;line-height: 1;margin-left: 4px;text-decoration: none }.main-page-content h1:after {-webkit-text-decoration-color: var(--category-color);text-decoration-color: var(--category-color) }.main-page-content h2:first-of-type {margin-top: 2rem }.main-page-content a:not(.button) {color: var(--text-link);width: -webkit-fit-content;width: -moz-fit-content;width: fit-content }.main-page-content a:not(.button):active {background-color: var(--text-link);color: #fff }.main-page-content a:not(.button):active code {background-color: transparent;color: #fff }.main-page-content a:not(.button)[id^=attr-]:link, .main-page-content a:not(.button)[id^=attr-]:visited {color: var(--text-link);text-decoration: none }.main-page-content a:not(.button)[id^=attr-]:focus, .main-page-content a:not(.button)[id^=attr-]:hover {text-decoration: underline }.main-page-content a:not(.button)[id^=attr-]:active {color: #fff }.main-page-content a:not(.button)[aria-current] {color: var(--text-link);font-weight: var(--font-body-strong-weight);text-decoration: none }.main-page-content img {background: #fff;border: 1px solid var(--border-primary) !important;border-radius: var(--elem-radius);display: inline-block;display: flex;height: auto;margin: 2rem auto }.main-page-content ol, .main-page-content ul {margin: 1rem 0 2rem;padding-left: 2rem }.main-page-content ol li, .main-page-content ul li {margin: .5rem 0 }.main-page-content ul {list-style: disc }.main-page-content ul ul {list-style-type: circle;margin: 0;padding-left: 1rem }.main-page-content ol {list-style: decimal }.main-page-content ol ol {list-style: lower-roman;margin: 0 }.main-page-content dd ol, .main-page-content dd ul {margin-bottom: 1rem;padding-left: 3rem }.main-page-content td ol, .main-page-content td ul {padding-left: 1rem }.main-page-content dd li {margin-bottom: 1rem }.main-page-content td li {margin-bottom: .5rem }.main-page-content dl dt {margin-bottom: .5rem;margin-top: 2rem }.main-page-content dl dd {margin-bottom: 1rem;margin-left: 1rem }.main-page-content dl dd .notecard p {padding-left: 0 }.main-page-content dl p {margin: 0 0 1rem }.main-page-content .section-content p {font: var(--type-article-p) }.main-page-content .section-content p:last-child {margin-bottom: 2rem }.main-page-content .section-content figure {margin-bottom: 1rem }.main-page-content .section-content .prev-next {display: flex;gap: .5rem;justify-content: space-between;list-style: none;margin: 1rem 0;padding: 0;text-align: center }.main-page-content .section-content .prev-next li {display: flex;margin: 0 }.main-page-content .section-content .prev-next .button {margin: 0;max-width: inherit }.main-page-content .section-content .prev-next .button-wrap {color: inherit }@media screen and (min-width:426px) {.main-page-content {padding: 3rem }}@media screen and (min-width:769px) {.main-page-content {margin-bottom: .5rem;padding: 0 }}b, strong {font-weight: var(--font-body-strong-weight);letter-spacing: .02rem }table {border: 1px solid var(--border-primary);border-collapse: collapse;width: 100% }table th {background: var(--background-tertiary);font-weight: var(--font-body-strong-weight);line-height: 1.5;text-align: left }table td, table th {border: 1px solid var(--border-primary);padding: .5rem .75rem;vertical-align: middle }table td .code-example pre, table td ul {margin: 0 }table caption {font-weight: var(--font-body-strong-weight);margin: 1rem 0 .5rem }table.properties {border: none;font-size: var(--type-base-font-size) }table.properties td, table.properties th {border: none }table.properties th {background: none }table.properties tr {border-bottom: 1px solid var(--border-secondary) }table.properties tr:first-child {border-top: 1px solid var(--border-primary) }table.properties tr:last-child {border-bottom: 1px solid var(--border-primary) }table.properties tr:nth-child(odd) td, table.properties tr:nth-child(odd) th, table.standard-table tr:nth-child(odd) td, table.standard-table tr:nth-child(odd) th {background-color: var(--background-secondary) }iframe {border: 1px solid var(--border-primary);max-width: 100%;width: 100% }iframe.nobutton, iframe.sample-code-frame, iframe[src*="https://jsfiddle.net"], iframe[src*="https://mdn.github.io"], iframe[src*="https://test262.report"], iframe[src*="https://www.youtube-nocookie.com"] {background: #fff;border: 1px solid var(--border-primary);border-radius: var(--elem-radius);width: 100% }h1, h2, h3 {letter-spacing: var(--heading-letter-spacing) }h1 {font: var(--type-heading-h1);margin-bottom: 2rem;word-break: break-word }@media screen and (min-width:769px) {h1 {font: var(--type-heading-h1) }}h2 {font: var(--type-heading-h2);margin: 4rem 0 .5rem }h3 {font: var(--type-heading-h3);margin: 2rem 0 .5rem }h2~div~h3, h2~h3 {margin-top: 1rem }h4 {font: var(--type-heading-h4);letter-spacing: .5px;margin: 2rem 0 1rem }h5 {font: var(--type-heading-h5) }h5, h6 {letter-spacing: 1.5px;margin: 2rem 0 1rem;text-transform: uppercase }h6 {font: var(--type-heading-h6) }h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {font-size: inherit }p {margin: 1rem 0 2rem }blockquote {border-left: 4px solid var(--border-secondary);color: var(--text-secondary);margin-bottom: 2rem;padding: 1rem 2rem }blockquote p {margin: 0 }.code-example, code, pre {border-radius: var(--elem-radius);font-size: var(--type-base-font-size-rem) }code {background: var(--code-background-inline);padding: .125rem .25rem;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content }pre {background-color: var(--code-background-block);border: 1px solid transparent;margin: 1rem 0 2rem;padding: 1rem 2.5rem 1rem 1rem }pre code {background: none;color: var(--text-primary);padding: 0 }.example-bad, .example-good {padding: 0 1rem;position: relative }.example-bad:after, .example-good:after {background-size: 24px;content: "";display: block;height: 16px;position: absolute;right: 16px;top: 18px;width: 16px }.example-bad+.copy-icon, .example-good+.copy-icon {display: none }.example-bad {background-color: var(--background-critical) }.example-bad:after {background-color: var(--icon-critical);-webkit-mask-image: url(/static/media/no.d2e0aa3e7440f80dccd6.svg);mask-image: url(/static/media/no.d2e0aa3e7440f80dccd6.svg) }.example-good {background-color: var(--background-success) }.example-good:after {background-color: var(--icon-success);-webkit-mask-image: url(/static/media/checkmark.d05ce91f65dfc321cadd.svg);mask-image: url(/static/media/checkmark.d05ce91f65dfc321cadd.svg) }.index {margin-bottom: 1rem }.index ul {margin: .5rem 0 2rem }@media screen and (min-width:1200px) {.index ul {-webkit-columns: 3;column-count: 3 }}.index ul li {margin: 0 0 .5rem }.index .icon-experimental, .index .icon-nonstandard {color: var(--icon-information) }.index .icon-deprecated {color: var(--icon-critical) }.callout {background: var(--background-secondary);border: 1px solid var(--border-primary);border-radius: var(--elem-radius);box-shadow: var(--shadow-01);display: flex;flex-direction: column;gap: 1rem;margin: 2rem 0;padding: 1rem;text-align: left }.callout h4 {margin: 0 }.callout p {font: var(--type-smaller-font-size);margin: 0 }.code-example {color: var(--code-default);position: relative }.code-example .copy-icon {border-radius: var(--elem-radius);cursor: pointer;height: 1.25rem;margin: 0;-webkit-mask-image: url(/static/media/clippy.92fffda9d37d9c3a3b37.svg);mask-image: url(/static/media/clippy.92fffda9d37d9c3a3b37.svg);-webkit-mask-size: cover;mask-size: cover;opacity: .4;padding: .25rem;position: absolute;right: .5rem;top: .75rem;width: 1.25rem }.code-example .copy-icon:focus, .code-example .copy-icon:hover {opacity: 1 }.code-example .copy-icon-message {background: var(--text-primary);border-radius: var(--elem-radius);color: var(--text-invert);font-size: .8125rem;opacity: 1;padding: .125rem;position: absolute;right: .25rem;top: 15px }.code-example .example-bad, .code-example .example-good {padding: 1rem }.only-in-en-us span {font-size: .8125rem }a.page-not-created {cursor: not-allowed }a.page-not-created:focus, a.page-not-created:hover, a.page-not-created:link, a.page-not-created:not([href]) {color: var(--icon-critical);-webkit-text-decoration: underline wavy;text-decoration: underline wavy }.badge {border: 1px solid var(--border-primary);border-radius: 4rem;font-size: var(--type-tiny-font-size);padding: .125rem .375rem;white-space: nowrap }.badge, kbd {color: var(--text-secondary) }kbd {border: 2px solid var(--border-secondary);border-radius: var(--elem-radius);box-shadow: var(--border-secondary);box-shadow: inset 0 -1px 0 0 var(--border-secondary);font-size: .825rem;padding: .25rem }.interactive {background-color: var(--background-secondary);border: 1px solid var(--border-primary);border-radius: var(--elem-radius);color: var(--text-primary);height: 675px;margin: 1rem 0;padding: 0;width: 100% }.interactive.is-js-height, .interactive.is-shorter-height, .interactive.is-taller-height {border: 0 }.interactive.is-js-height {height: 513px }.interactive.is-shorter-height {height: 433px }.interactive.is-taller-height {height: 725px }.interactive.is-tabbed-shorter-height {height: 487px }.interactive.is-tabbed-standard-height {height: 548px }.interactive.is-tabbed-taller-height {height: 774px }@media screen and (min-width:1008px), screen and (min-width:688px)and (max-width:768px) {.interactive {height: 375px }.interactive.is-js-height {height: 444px }.interactive.is-shorter-height {height: 364px }.interactive.is-taller-height {height: 654px }.interactive.is-tabbed-shorter-height {height: 351px }.interactive.is-tabbed-standard-height {height: 421px }.interactive.is-tabbed-taller-height {height: 631px }}.document-survey {background-color: #e6deff;border: 5px solid #6800cf;border-radius: .5rem;color: #1b1b1b;padding: 1em }.document-survey:before {background: transparent url(/static/media/survey.eea64fbc33bedb4fb0c5.svg) 50% no-repeat;background-size: cover;content: "";display: inline-block;height: 33px;position: absolute;width: 32px }.document-survey iframe {border: 0 }.document-survey button[type=button], .document-survey summary {cursor: pointer }.document-survey summary {text-decoration: underline }.document-survey summary:focus, .document-survey summary:hover {text-decoration: inherit }.document-survey .survey-header {display: flex;justify-content: space-between }.document-survey .survey-container, .document-survey .survey-header {padding-left: 2.5em }.document-survey .survey-dismiss svg.icon {color: #1b1b1b }.a11y-nav {position: absolute;top: -20em;width: 100%;z-index: var(--z-index-a11y) }.a11y-nav a {background-color: hsla(0, 0%, 100%, .9);font-weight: var(--font-body-strong-weight);left: 0;padding: .5rem;position: absolute;right: 0;text-align: center }.a11y-nav a:focus, .a11y-nav a:hover {box-shadow: var(--shadow-01);text-decoration: none;top: 20em }.page-footer {background-color: var(--background-secondary);padding: 2rem 1rem;position: relative }.page-footer-grid {margin: 0 auto;max-width: 1440px }.page-footer, .page-footer a {color: var(--text-secondary) }.page-footer-logo-col p {margin-top: 0;max-width: 55ch }.page-footer-app-list {display: flex;flex-direction: column;gap: .5rem }.page-footer-app-dl {display: block;max-width: 130px }.page-footer-app-dl img, .page-footer-app-dl svg {width: 100% }.page-footer-app-dl.is-ms {max-width: 110px }.page-footer-moz {align-items: center;border-top: 1px solid var(--border-primary);display: flex;flex-flow: row wrap;gap: 2rem;padding-top: 1.5rem }.page-footer-legal-text {font-size: var(--type-tiny-font-size);margin: 0 }.page-footer-legal-text a {text-decoration: underline }.page-footer-legal-text a:hover {text-decoration: none }.footer-moz-list {display: flex;flex-wrap: wrap;font-size: var(--type-tiny-font-size);gap: 1rem }.footer-moz-logo-link {display: flex }.footer-moz-link {text-decoration: underline }.footer-moz-link:hover {text-decoration: none }.mdn-footer-logo {display: block;width: 50px }.social-icons {display: flex;gap: 1rem;margin-top: .5rem }.social-icons li {flex: 0 0 auto }.social-icons .icon {display: block;height: 21px;width: 21px }.footer-nav-heading {font: var(--type-smaller-font-size);margin: 0 0 .5rem }.footer-nav-list {display: flex;flex-direction: column;gap: .5rem }.footer-nav-item {font-size: var(--type-smaller-font-size) }.page-footer-grid {display: flex;flex-direction: column;gap: 1.5rem }@media screen and (min-width:426px) {.page-footer-grid {grid-gap: 2.5rem;display: grid;gap: 2.5rem;grid-template-areas: "logo . ""nav1 nav2""nav3 nav4""moz moz""legal legal";grid-template-columns: 1fr 1fr }.page-footer-logo-col {grid-area: logo }.page-footer-nav-col-1 {grid-area: nav1 }.page-footer-nav-col-2 {grid-area: nav2 }.page-footer-nav-col-3 {grid-area: nav3 }.page-footer-nav-col-4 {grid-area: nav4 }.page-footer-app-col {grid-area: app }.page-footer-moz {grid-area: moz }.page-footer-legal {grid-area: legal }.page-footer-app-list {flex-direction: row }.page-footer-app-dl img, .page-footer-app-dl svg {height: 38px }}@media screen and (min-width:769px) {.page-footer-grid {gap: 1rem;grid-template-areas: "logo nav1 nav2 nav3 nav4""moz moz moz moz moz""legal legal legal legal . ";grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(0, 1fr)) }.page-footer-app-list {flex-direction: column }.page-footer-app-dl img, .page-footer-app-dl svg {height: auto }}@media screen and (min-width:1441px) {.page-footer-grid {gap: 2.5rem }}.query-string {font-style: italic }.site-search {display: block }.page-not-found .fallback-document .fallback-link {font-size: 1rem }.tabs {border-bottom: 1px solid var(--border-primary) }.tabs ul {display: flex;gap: 1rem }.tabs .tab-item {border-bottom: 2px solid transparent;padding: .5rem 0 }.tabs a.tab-item {color: var(--text-primary);display: block;font-size: var(--type-smaller-font-size) }.tabs .tab-item[aria-current=true] {border-bottom-color: var(--text-link) }.plus-header {padding-top: 2rem }.plus-header h1 {font: var(--type-heading-h4-font-size-mobile);margin-bottom: 1rem }@media screen and (min-width:769px) {.plus-header h1 {font: var(--type-heading-h4-font-size) }}.notification-list {display: flex;flex-direction: column }.notification-card {align-items: center;-webkit-animation: fade-in .2s;animation: fade-in .2s;background-color: var(--background-primary);border: 1px solid var(--border-secondary);display: flex;justify-content: space-between;padding: .5rem }.notification-card>div {align-items: center;display: flex }.notification-card .desktop-only {display: none }@media screen and (min-width:769px) {.notification-card .desktop-only {display: inherit }}.notification-card.no-star {grid-template-columns: 1fr auto }.notification-card .icon {background-color: var(--icon-secondary) }.notification-card+.notification-card {border-top: none }.notification-card-description {display: flex;flex-direction: column;gap: .5rem }.notification-card-title {word-wrap: anywhere;font-family: var(--font-body);font-weight: var(--font-body-strong-weight) }.notification-card-text, .notification-card-title {color: var(--text-primary);font-size: var(--type-smaller-font-size);margin: 0 }.notification-card-created {color: var(--text-secondary);display: none;font-size: var(--type-tiny-font-size);text-align: right }@media screen and (min-width:769px) {.notification-card-created {display: inherit }}.notification-card:first-child {border-top-left-radius: var(--elem-radius);border-top-right-radius: var(--elem-radius);margin-top: 1rem }.notification-card:last-child {border-bottom-left-radius: var(--elem-radius);border-bottom-right-radius: var(--elem-radius) }.notification-card.unread {background-color: var(--accent-tertiary) }@media screen and (min-width:769px) {.notification-card-description {align-items: center;flex-direction: row }}.select-all-toolbar {border: 1px solid var(--border-primary);border-radius: var(--elem-radius);display: flex;gap: 1rem }.empty-card, .select-all-toolbar {align-items: center;background-color: var(--background-primary);padding: .5rem }.empty-card {border: 1px solid var(--border-secondary);margin-top: .5rem }.empty-card p {font: var(--type-article-p);letter-spacing: .5px;line-height: 1.5 }.search-widget {position: relative;width: 100% }.search-widget .search-filter-button {right: .5rem }@media screen and (min-width:769px) {.search-widget {align-items: center;display: flex;gap: .5rem;margin: 0 }}.search-input-field {-webkit-appearance: none;background-color: var(--background-primary);border: 1px solid var(--border-primary);border-radius: var(--elem-radius);color: var(--text-primary);height: var(--form-elem-height);min-width: 60px;padding-left: 2rem;width: 100% }.search-input-field:focus {outline: var(--border-primary) }.search-input-field::-webkit-input-placeholder {color: var(--text-inactive) }.search-input-field::placeholder {color: var(--text-inactive) }.search-filter {display: flex;flex-wrap: wrap;gap: .5rem;padding: 1rem 0 }.search-filter.inline-on-mobile {flex-wrap: nowrap }.search-filter.inline-on-mobile .search-filter-category {width: auto }.search-filter [type=search] {flex: 1 1 }.search-filter-category {position: relative;width: calc(50% - .25rem) }.search-filter-category .dropdown-list, .search-filter-category>.button {width: 100% }@media screen and (min-width:769px) {.search-filter {flex-wrap: nowrap }.search-filter .submenu {max-width: -webkit-max-content;max-width: max-content;right: 0 }.search-filter-category, .search-filter-category .dropdown-list {width: auto }.search-filter-category .dropdown-list.filters-menu {left: auto;right: 0;width: 180px }}.limit-banner {background: var(--background-tertiary);border: 1px solid var(--border-secondary);border-radius: var(--elem-radius);margin-top: .5rem;padding-bottom: .5rem;padding-top: .5rem;text-align: center }.limit-banner p {margin: .5rem }.limit-banner a {color: var(--text-link) }@-webkit-keyframes fade-in {0% {opacity: 0 }50% {opacity: .5 }to {opacity: 1 }}@keyframes fade-in {0% {opacity: 0 }50% {opacity: .5 }to {opacity: 1 }}.icon-card-list {display: flex;flex-direction: column;gap: .5rem }.icon-card {-webkit-animation: fade-in .2s;animation: fade-in .2s;background-color: var(--background-primary);border: 1px solid var(--border-secondary);border-radius: var(--elem-radius);padding: 1rem 1rem 1rem .5rem;transition: .3s ease-out }.icon-card a:link, .icon-card a:visited {color: var(--text-primary) }.icon-card:first-child {margin-top: 1rem }.icon-card>:last-child {margin-bottom: 0 }.icon-card:last-child {margin-bottom: 1rem }.icon-card-icon {align-items: center;background-color: var(--http-accent-color);border-radius: .125rem;color: var(--background-primary);display: flex;font-size: .75rem;font-style: italic;height: 3rem;justify-content: center;padding: .5rem;width: 3rem }.icon-card-icon span {overflow: hidden;text-overflow: ellipsis }.icon-card-icon.html {background-color: var(--html-accent-color) }.icon-card-icon.css {background-color: var(--css-accent-color) }.icon-card-icon.javascript {background-color: var(--js-accent-color) }.icon-card-icon.http {background-color: var(--http-accent-color) }.icon-card-icon.apis {background-color: var(--apis-accent-color) }.icon-card-title-wrap {display: flex;gap: 1rem }.icon-card-title-wrap .dropdown {align-self: center }.icon-card-title-wrap .breadcrumbs a:link, .icon-card-title-wrap .breadcrumbs a:visited {color: var(--text-secondary) }.icon-card-title {word-wrap: break-word;font-size: var(--type-base-font-size-rem);font-weight: var(--font-body-strong-weight);margin: 0;overflow: hidden;text-overflow: ellipsis }.icon-card-description {color: var(--text-secondary);font-size: var(--type-smaller-font-size) }.icon-card-actions {display: flex;gap: .5rem }.icon-card .icon-card-content {flex: 1 1 80%;overflow: hidden }@media screen and (max-width:426px) {.icon-card .icon-card-content {flex-basis: 95% }}.icon-card .icon-card-content h4 {overflow: hidden;text-overflow: ellipsis }.icon-card .icon-card-actions {align-self: center;margin-left: auto }.icon-card .breadcrumbs {color: var(--text-secondary);font-size: var(--type-smaller-font-size);list-style: none;margin-bottom: .5rem }.icon-card .breadcrumbs li {display: inline-block;margin: 0 }.icon-card .breadcrumbs li:after {background-color: var(--text-secondary);content: "";display: inline-block;height: 8px;margin: 0 4px;-webkit-mask-image: url(/static/media/chevron.fd1788325bc2a3d78610.svg);mask-image: url(/static/media/chevron.fd1788325bc2a3d78610.svg);-webkit-transform: rotate(-90deg);transform: rotate(-90deg);vertical-align: middle;width: 8px }.icon-card .breadcrumbs li:last-child:after {content: normal }article.settings {display: block;margin: auto;max-width: 60em;padding: 1rem;width: min(90vw, 40em) }article.settings h3 {margin-top: .5rem }article.settings .field-group {margin: 2rem 0 }article.settings .field-group ul {padding: 0 }article.settings .field-group ul li {grid-gap: 0 1rem;display: grid;gap: 0 1rem;margin: 2em 0 }article.settings .field-group ul li h3 {font-weight: 600 }article.settings .field-group ul li span {font-size: .8rem;grid-column: 1/2;line-height: 1.2em;padding-top: .3em }article.settings .field-group ul li .loading, article.settings .field-group ul li .switch {align-self: center;grid-column: 2/3;grid-row: 1/3;justify-self: end }article.settings .field-group ul li .manage, article.settings .field-group ul li button {align-self: center;border: 1px solid var(--text-primary);border-radius: var(--elem-radius);color: var(--text-link);font-size: .8rem;grid-column: 2/3;grid-row: 1/3;height: -webkit-max-content;height: max-content;justify-self: end;padding: .5rem 1rem;width: -webkit-max-content;width: max-content }article.settings .field-group ul li button[disabled] {background-color: var(--background-secondary);border: 1px solid var(--text-secondary);color: var(--text-secondary) }.plus .article-actions-container {display: flex }.plus .main-page-content em {font-style: normal;text-decoration: underline;-webkit-text-decoration-color: var(--text-link);text-decoration-color: var(--text-link);text-decoration-thickness: .15rem;text-underline-offset: .1em }.plus .main-page-content h1 {color: var(--plus-accent-color);font: 700 12px/120% Inter;letter-spacing: 1.5px;text-transform: uppercase }.plus .main-page-content h1+blockquote {border: revert;border-radius: var(--elem-radius);color: var(--text-primary);margin: 1rem 0 2rem;padding: revert }.plus .main-page-content h1+blockquote p:first-child {font: var(--type-heading-h1-mobile);margin-bottom: 2rem }@media screen and (min-width:769px) {.plus .main-page-content h1+blockquote p:first-child {font: var(--type-heading-h1) }}.plus .main-page-content h1+blockquote p {font-style: italic }.plus .main-page-content img {margin: 2rem 0 }.get-involved {background-color: var(--mdn-background-dark) }.get-involved section {color: var(--text-primary);display: flex;flex-direction: column;gap: 1rem;line-height: 1.75;margin: 0 auto;max-width: 52rem;padding: 2rem 1rem }.get-involved section h2 {font-family: var(--font-heading);font-size: 1.3rem;font-weight: 600;line-height: 120%;margin: 0 }.get-involved section .get-involved-cta {color: var(--category-color);display: block;margin-top: 1rem }.about {width: 100% }.about .about-container {margin: 0 auto;max-width: 52rem;padding: 0 1rem 2rem }.about .about-container h1 {margin-top: 3rem }@media screen and (min-width:769px) {.about .about-container h1 {font-size: 3.5rem }}.about .about-container header {align-items: center;display: flex;flex-direction: column;gap: 1rem;padding: 2rem 0 }.about .about-container header .headline {font-family: var(--font-heading);font-size: 1.313rem;font-style: normal;font-weight: 400;line-height: 175%;margin: 0 }.about .about-container p {font-size: 1rem;font-weight: 350;line-height: 175% }.about .about-container h2 {font-size: 1.3rem }.about .about-container .heading-break {display: none }@media screen and (min-width:769px) {.about .about-container .heading-break {display: block }}blockquote.quote {border: none;border-radius: .5rem;display: flex;flex-direction: column-reverse;gap: 2rem;margin: 2rem 0;padding: 2rem }@media screen and (max-width:40rem) {blockquote.quote {flex-wrap: wrap-reverse }}blockquote.quote p {display: flex;font-style: italic }blockquote.quote p .icon {margin-right: 1rem;margin-top: .2rem }blockquote.quote .name {display: inline;font-size: var(--type-base-font-size-rem);margin: 0 }main.contribute {margin-bottom: 3rem;width: 100% }main.contribute .stats-container {background-color: var(--background-primary);color: var(--text-primary);margin-bottom: 3rem;width: 100% }main.contribute section {margin: 0 auto;max-width: 52rem;padding: 0 1rem }main.contribute section.stats-header {align-items: center;display: flex;flex-direction: column;padding: 0 .5rem 2rem }main.contribute section h1 {font-size: 3rem;margin-left: .5rem;margin-top: 8rem;text-align: center }main.contribute section h1:after {content: " ";text-decoration: underline;-webkit-text-decoration-color: var(--text-link);text-decoration-color: var(--text-link);text-decoration-thickness: .1em;text-underline-offset: .1em }main.contribute section h1:before {background-color: var(--text-link);content: "";display: inline-block;height: 1.2em;-webkit-mask-size: cover;mask-size: cover;-webkit-transform: translate(-.2em, .2em);transform: translate(-.2em, .2em);width: 1.2em }main.contribute section .quote.owd {background-color: var(--text-link);color: var(--background-primary) }main.contribute section .quote.owd .icon, main.contribute section .quote.pab {background-color: var(--background-primary) }main.contribute section .quote.pab {color: var(--text-primary) }main.contribute section .quote.pab .icon {background-color: var(--text-primary) }main.contribute section .stats {grid-gap: .3em;display: grid;gap: .3em }@media screen and (max-width:769px) {main.contribute section .stats {grid-template-columns: 1fr 1fr }}@media screen and (max-width:426px) {main.contribute section .stats {grid-template-columns: 1fr }}@media screen and (min-width:769px) {main.contribute section .stats {grid-template-columns: 1fr 1fr 1fr 1fr }}main.contribute section .stats li {align-items: center;background: var(--text-link);color: var(--background-primary);display: flex;flex-direction: column;padding: .5rem 2rem }main.contribute section .stats li .number {font-size: 3rem }main.contribute section .stats li .legend {font-size: .8rem;max-width: 5rem;text-align: center }.contributor-spotlight-content-container {margin: 3rem auto;max-width: 52rem;padding: 0 1rem }.contributor-spotlight-content-container li {line-height: 1.5;list-style-type: disc;margin-bottom: 1rem }.contributor-spotlight-content-container ul {padding-left: 1rem }.contributor-spotlight-content-container .quote {background-color: var(--category-color-background);color: var(--text-primary) }.contributor-spotlight-content-container .quote .icon {background-color: var(--text-primary) }.contributor-spotlight-content-container .profile-image {border-radius: 50%;height: 200px;width: 200px }.contributor-spotlight-content-container .profile-header {align-items: center;border-radius: var(--elem-radius);display: flex;flex-direction: column;gap: 1rem;padding: 1rem;width: 100% }.contributor-spotlight-content-container .profile-header h2 {color: var(--text-primary);margin-bottom: 0;margin-top: 0 }.contributor-spotlight-content-container .profile-header .username {background-color: var(--category-color);color: var(--text-invert);font-size: 1.75rem;padding: .2rem .4rem }.mdn-cta-container {align-items: center;background-color: #212121;color: #fff;display: flex;height: 100%;min-height: 40px;padding: 0 1rem;z-index: 999 }.mdn-cta-container .mdn-cta-copy {margin: 0;padding: 8px 0 }.mdn-cta-container button {background: none;border: none;opacity: .6 }.mdn-cta-container button:active, .mdn-cta-container button:focus, .mdn-cta-container button:hover {cursor: pointer;opacity: 1 }.mdn-cta-container button .icon {color: #fff;height: 16px }.mdn-cta-container .mdn-cta-content {margin: 0 auto }.mdn-cta-container a {color: var(--color-announcement-banner-accent);min-height: 0 }.mdn-cta-container a:focus, .mdn-cta-container a:hover {text-decoration: underline }.mdn-cta-container .underlined {font-style: normal;-webkit-text-decoration: underline var(--color-announcement-banner-accent) .15rem;text-decoration: underline var(--color-announcement-banner-accent) .15rem }.mdn-cta-container .mdn-plus {color: var(--color-announcement-banner-accent);font-size: 1.2rem;font-weight: 700 }body.full-screen-overlay .mdn-cta-container {display: none } \ No newline at end of file