html,body,pre,fieldset{margin:0;padding:0}fieldset,img{border:0;outline:0}abbr[title]{border-bottom:none;cursor:help;text-decoration:underline;text-decoration:underline dotted}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}html{-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,body{background:#fefefe;color:#3a3a3a;font:-apple-system-body;font-family:"Open Sans",sans-serif;font-size:1.1em;line-height:1.5;text-rendering:optimizeLegibility}body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow-x:hidden}details{border:1px solid #aaa;display:block;padding:.5em}details>:first-child{margin-top:0}summary:focus{outline:4px blue solid;outline-offset:.25em}*{margin:0}main *+*{margin-top:1.25em}li>*,p>*,hr+*,p code{margin-top:0}li>p:not(:first-of-type){margin-top:.5em}h1,.txt-up-6{font-size:36px;font-size:2.25rem;font-weight:600;line-height:1.3;margin-bottom:.75rem}@media screen and (min-width: 41.25em){h1,.txt-up-6{font-size:48px;font-size:3rem}}h2,.txt-up-5{font-size:28px;font-size:1.75rem;font-weight:600;line-height:1.2;margin-bottom:.75rem}@media screen and (min-width: 41.25em){h2,.txt-up-5{font-size:36px;font-size:2.25rem}}h3,.txt-up-4{font-size:24px;font-size:1.5rem;font-weight:600;line-height:1.2;margin-bottom:8px}@media screen and (min-width: 41.25em){h3,.txt-up-4{font-size:28px;font-size:1.75rem}}h4,.txt-up-3{font-size:22px;font-size:1.375rem;font-weight:600;line-height:1.3;margin-bottom:.5rem}@media screen and (min-width: 41.25em){h4,.txt-up-3{font-size:24px;font-size:1.5rem}}h5,.txt-up-2{font-size:22px;font-size:1.375rem;font-weight:600;line-height:1.3;margin-bottom:.5rem}h6,.txt-up-1{font-size:20px;font-size:1.25rem;font-weight:600;line-height:1.3;margin-bottom:.5rem}.txt-right{text-align:right}.txt-center{text-align:center}.txt-left{text-align:left}a{background-color:transparent;color:#0a669f;position:relative;transition:outline-offset .2s ease-in-out}a code{background:#fafafa;border:none;color:inherit;display:inline;font-size:.95em;padding-bottom:0;padding-top:0}@media screen and (prefers-color-scheme: dark){a code{background:#000}}a:hover,a:focus,a:active{background-color:#064165;color:#fff;box-shadow:0 0 0 2px #064165;outline:none}a:hover svg path,a:focus svg path,a:active svg path{fill:#fff}a:hover code,a:focus code,a:active code{background:none;border-color:transparent;color:#fff}a:active{text-decoration:none}a span{overflow:hidden}a:not([href]),a:not([href]):hover{color:#3a3a3a;text-decoration:none}b,strong,.txt-bold,cite,ins{font-weight:600}.txt-lighter{font-weight:200}.txt-light{font-weight:300}.txt-bolder{font-weight:700}.txt-normal{font-weight:400}small,.txt-down-1,sub,sup{font-size:14px;font-size:.875rem;line-height:1.4}.txt-down-2{font-size:14px;font-size:.875rem;line-height:1.5}@media screen and (min-width: 41.25em){.txt-down-2{font-size:12px;font-size:.75rem}}a>abbr[title]{cursor:pointer;border-bottom:none;text-decoration:none}ins{text-decoration:none}i,em{font-style:italic}small,.txt-down-1,sub,sup{font-size:14px;font-size:.875rem;line-height:1.4}.txt-down-2{font-size:14px;font-size:.875rem;line-height:1.5}@media screen and (min-width: 41.25em){.txt-down-2{font-size:12px;font-size:.75rem}}sub,sup{line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}blockquote{border-left:4px solid #666;color:#222;font-style:italic;margin:1.5em 0 0;padding-left:.75em}@media screen and (prefers-color-scheme: dark){blockquote{border-left-color:#063A5B;color:#fff}}blockquote p{line-height:1.7;margin:0}blockquote p+p{margin-top:.5em}blockquote+figcaption{font-size:13px;font-size:.8125rem;border-left:1px solid #ccc;color:#949494;line-height:1.7;margin:1em 0 0;padding:6px 12px}blockquote+figcaption cite{font-style:normal}@media screen and (prefers-color-scheme: dark){blockquote+figcaption{color:#fff}}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}kbd{background:#eaeaea;border:1px solid #ccc;color:#333;display:inline-block;font-size:inherit;line-height:normal;padding:.1em .2em}@media screen and (prefers-color-scheme: dark){kbd{background:#0a0a0a;border-color:transparent;color:#eee}}p>kbd,li>kbd{border-radius:2px;font-size:.8em}pre{overflow:auto;text-shadow:none;white-space:pre-wrap}pre code{background:#030406;border:1px solid;color:#eee;display:block;line-height:1.5}ul,ol{margin:1.25em 0 0;padding-left:1em}ol ol{list-style-type:lower-alpha}ol ol ol{list-style-type:lower-roman}li{line-height:inherit;margin:1.25em 0 0}li ol:first-of-type,li ul:first-of-type{margin-top:.5em}main li{margin:.625em 0 0}dt{font-weight:bold}dt+dt{margin-top:.325em}dd{font-size:85%;margin-top:.75em;padding-left:.75em}.list-clean,nav ul,.list-horizontal{list-style:none;margin:0;padding:0}.list-reduced li{margin-top:.5em}nav li{margin:0}button,html [type="button"]{-webkit-appearance:button;cursor:pointer;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:normal;overflow:visible}button:-moz-focusring,input:-moz-focusring{outline:0}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{font-size:inherit;font-weight:inherit;line-height:normal;margin:0;overflow:visible;text-transform:none}.input-text{-webkit-appearance:none;background-color:#fff;border-radius:2px;border:1px solid #d5d5d5;box-shadow:inset 0 2px 0 0 #f2f2f2;color:#2a2a2a;font-family:inherit;min-height:36px;outline:0;padding:6px 0.5em 4px;position:relative;width:100%;z-index:2}.input-text:focus{background-color:#fff;border-color:#6589f2;box-shadow:inset 0 0 0 1px #6589f2}label,.txt-label{display:inline-block;margin-bottom:.25rem}figure{margin:1.25em auto 1.25em}figure img{display:block}figcaption{margin:auto;padding:12px 0 0}img{color:#b63232;font-style:normal;max-width:100%;position:relative}svg:not(:root){overflow:hidden}audio,video{display:inline-block;max-width:100%}hr{background:#2a2a2a;border:0;display:block;height:1px;margin:1.75em 0;overflow:visible}@media screen and (prefers-color-scheme: dark){hr{background:#ccc}}[hidden],template,.display-none{display:none}.display-block,figure,figcaption{display:block}.display-inline-block{display:inline-block !important;margin-right:.25rem;vertical-align:middle;width:auto !important}.sr-only:not(:focus):not(:active){clip:rect(0 0 0 0) !important;clip-path:inset(100%) !important;height:1px !important;opacity:0 !important;overflow:hidden !important;position:absolute !important;white-space:nowrap;width:1px !important}.jump-link{display:block;font-size:90%;margin:auto;max-width:90%;text-align:center;text-decoration:underline !important}@media screen and (min-width: 41.25em){.jump-link{border:1px solid;border-radius:2px;max-width:200px;padding:.625rem;position:fixed;right:1rem;text-decoration:none !important;top:1rem;z-index:22}.jump-link:not(:focus):not(:active){clip:rect(0 0 0 0) !important;clip-path:inset(100%) !important;height:1px !important;opacity:0 !important;overflow:hidden !important;position:absolute !important;white-space:nowrap;width:1px !important}}@media screen and (min-width: 41.25em){.page{display:flex}}.page__banner{background:#fcfdfd;border-bottom:1px solid transparent;font-size:90%;position:relative;z-index:4}@media screen and (min-width: 41.25em){.page__banner{border-bottom:none;box-shadow:inset -2px 0 4px rgba(10,20,20,0.4);flex:8rem 0 1}}.page__banner a{display:block;padding:.5rem;text-decoration:none}.page__banner__nav{position:-webkit-sticky;position:sticky;top:-1px}.page__banner__nav a{color:#0a669f;border-top:1px solid #999;overflow:visible;position:relative;text-transform:uppercase}@media screen and (min-width: 41.25em){.page__banner__nav a{padding-right:.75em;text-align:right}}.page__banner__nav a:hover,.page__banner__nav a:focus{box-shadow:none;color:#fff;outline:2px solid;outline-offset:-2px}.page__banner__nav a[aria-current="page"]{background:#0a669f;color:#fff}.page__banner__nav a[aria-current="page"]:hover,.page__banner__nav a[aria-current="page"]:focus{background:#173e50}@media screen and (prefers-color-scheme: dark){.page__banner__nav a[aria-current="page"]{background:#063A5B}}@media screen and (max-width: 41.25em){.page__banner__nav ul{display:flex;font-size:90%}.page__banner__nav li{flex:1 auto;text-align:center}.page__banner__nav li:not(:last-of-type) a{border-right:1px solid #999}}.page__banner__home{position:relative;z-index:9}.page__banner__home .name{bottom:0;font-size:90%;left:0;line-height:1.75;padding:.125em .5em;width:100%}@media screen and (min-width: 41.25em){.page__banner__home{text-align:center}.page__banner__home .name{background:#2a2a2a;color:#fff;opacity:0;position:absolute}.page__banner__home a:hover .name,.page__banner__home a:focus .name{opacity:1}}.page__banner__home img{border-radius:100%;border:1px solid rgba(0,0,0,0.4);display:inline-block;max-width:2rem;vertical-align:middle}@media screen and (min-width: 25em){.page__banner__home img{max-width:3rem}}@media screen and (min-width: 41.25em){.page__banner__home img{max-width:5rem}}@media screen and (min-width: 41.25em){.page__main-foot{flex:1 auto;max-width:calc(100% - 8rem)}}@media screen and (min-width: 47.9375em){.page__main-foot .content-area{padding-left:5rem;padding-right:5rem}}.jump-home{overflow:hidden}@media screen and (max-width: 41.25em){.jump-home{background:#0a0a0a;display:flex;font-size:90%;line-height:2.2}.jump-home .page__banner__home{flex:1 0 auto;order:1}.jump-home .page__banner__home:hover,.jump-home .page__banner__home:focus{border-right:2px solid #ccc}.jump-home .page__banner__home:hover .name,.jump-home .page__banner__home:focus .name{text-decoration:underline !important}.jump-home .page__banner__home img{margin:0}.jump-home .page__banner__home .name{color:#fff}.jump-home .jump-link{border-left:1px solid #ccc;color:#fff;flex:0 0 auto;margin:0;order:2;text-align:right;text-decoration:none !important}.jump-home .jump-link:hover,.jump-home .jump-link:focus{text-decoration:underline !important}.jump-home .jump-link [role="presentation"]{display:none}}@media screen and (min-width: 25em) and (max-width: 41.25em){.jump-link{line-height:3.3}}@media screen and (-ms-high-contrast: active) and (min-width: 41.25em){.page__main-foot{border-left:1px solid transparent}}.page__footer{border-top:1px solid #dbe4ef;font-size:80%;padding:3rem 1.75rem;text-align:center}@media screen and (min-width: 37.5em){.page__footer{text-align:right}}@media screen and (prefers-color-scheme: dark){.page__footer{border-top-color:#888}}.content-area{margin:0;max-width:50em;padding:3em 1.75em}.content-area--divider-top{border-top:1px solid #ccc}.page-header,article header{background-color:#075A8D;border-bottom:1px solid transparent;color:#fff;position:-webkit-sticky;position:sticky;top:0}@media screen and (prefers-color-scheme: dark){.page-header,article header{background-color:#063A5B}}@media screen and (prefers-reduced-motion: reduce){.page-header,article header{position:relative}}@media screen and (min-width: 37.5em){.page-header,article header{padding-top:2em;padding-bottom:4em}}.content-wrap{background:#fefefe;margin:0;position:relative;transform:translate3d(0, 0, 0);z-index:2}@media screen and (min-width: 37.5em){.content-wrap .content-area:first-of-type{padding-top:1.75em}}.content-wrap .content-area:first-of-type>p:first-child{font-size:120%}@media screen and (min-width: 37.5em){.tri{margin:0;position:relative;transform:rotate(180deg)}@supports (clip-path: polygon(0 0, 0 5em, 60em 0px)){.tri::after{background:#fefefe;clip-path:polygon(0 0, 0 5em, 60em 0px);content:'';height:100vh;left:-1px;position:absolute;top:100%;width:calc(100% + 1px)}@media screen and (prefers-color-scheme: dark){.tri::after{background-color:#131820}}}}.list-horizontal li{display:inline-block;margin:2px 10px 2px 0;padding:0 12px 0 0;position:relative}.list-horizontal li:last-child{margin-right:0;padding-right:0}.list-horizontal.has-pipes>li::after{background:#ccc;content:'';bottom:4px;position:absolute;right:0;top:4px;width:1px}.list-horizontal.has-pipes>li:last-child:after{display:none}.icon>svg{display:inline-block;height:1.1em;position:relative;top:-1px;vertical-align:middle;width:1.1em;z-index:2}.icon>svg path{fill:#0a669f}@media screen and (prefers-color-scheme: dark){.icon>svg path{fill:#88a1fa}}.mt-0{margin-top:0 !important}.mt-8{margin-top:8px !important}.iframe-demo{border:1px solid #ccc;min-height:250px;width:100%}.post-list:not(:last-of-type){border-bottom:1px solid #ccc;margin-bottom:2em;padding-bottom:2em}.twitter-fig iframe{margin:auto}.twitter-fig figcaption{text-align:center;font-size:.825em}.example-test{background:#fafafa;border:1px solid #cecece;padding:.75em}.example-test input{width:100%}.example-test li{margin-top:.5em;font-size:.825em}.about-me .topic-header{background-image:url(../assets/img/1500x500.jpg);background-repeat:no-repeat;background-size:cover}.about-me .topic-header h1{background:rgba(0,0,0,0.8);display:inline-block;padding:.25em}.about-me nav [aria-current="page"]{background:#008a46}.code .topic-header{background:#262721}.code .topic-header h1{border-bottom:1px dotted;color:#adffaa;display:inline-block}.code nav [aria-current="page"]{background:#262721}.notes .topic-header{background:#fce44a}@media screen and (prefers-color-scheme: dark){.notes .topic-header{background:#B09903}}.notes .topic-header h1,.notes .topic-header p{color:#2a2a2a}@media screen and (prefers-color-scheme: dark){.notes .topic-header h1,.notes .topic-header p{color:#080808}}.notes .topic-header .meta-info{border-color:#2a2a2a}.notes nav [aria-current="page"]{background:#fce44a;color:#2a2a2a}@media screen and (prefers-color-scheme: dark){.notes nav [aria-current="page"]{background:#B09903;color:#0a0a0a}}.notes nav [aria-current="page"]:hover,.notes nav [aria-current="page"]:focus{color:#fff}.meta-info{border-top:1px dotted rgba(255,255,255,0.6);padding-top:1em}.meta-info p{font-size:80%}.meta-info p+p{margin-top:.5em}.meta-info span{display:inline-block;margin:0 .5rem}.back-to-top{display:inline-block;margin-bottom:.5rem;margin-right:1.5rem;padding:.25rem}.back-to-top::before{border-bottom:2px solid #0a669f;border-right:2px solid #0a669f;content:"";display:inline-block;height:.5em;margin-right:.5em;transform:rotate(-135deg);width:.5em}.back-to-top:hover::before,.back-to-top:focus::before{border-color:#fff}@media screen and (prefers-color-scheme: dark){.back-to-top::before{border-bottom-color:#88a1fa;border-right-color:#88a1fa}}.filter-post .topic-header{background-color:#000}.filter-post .topic-header>*{position:relative;z-index:2}.filter-post .topic-header::before{background-image:url(https://www.scottohara.me/posts/css-filters/example-image.jpg);background-repeat:no-repeat;background-position:center bottom;background-size:cover;content:"";filter:blur(4px);opacity:.5;height:100%;left:0;position:absolute;top:0;width:100%}.sass-posts .topic-header{background:#943362}.css-posts .topic-header{background:#ceb565}.css-posts .topic-header h1{color:#262721}.css-posts .topic-header .meta-info{border-color:#262721}.css-posts .topic-header p{color:#111}.post-callout,[role="note"]{background:#e1eef9;border:2px solid transparent;color:#0a0a0a;font-size:90%;padding:.625em}@media screen and (prefers-color-scheme: dark){.post-callout,[role="note"]{background:#0a0a0a;color:#fff}.post-callout a[href],[role="note"] a[href]{color:#fff}}.talking .topic-header{background-color:#82250c;background-image:url(../assets/img/header.jpg);background-repeat:no-repeat;background-size:cover}.talking nav [aria-current="page"]{background:#c84437}.home .topic-header{background-image:url(../images/background.jpg);background-repeat:no-repeat;background-size:cover}.table-post .topic-header{background-image:url(../images/flip.jpg)}.horrible .topic-header{background-image:url(../images/horrible.jpg)}.you .topic-header,.figure .topic-header{background-image:url(../images/you.png);background-size:cover;background-position:center center}.figure .topic-header{background-image:url(../images/figure.png)}.you .topic-header .content-area,.figure .topic-header .content-area{position:relative;z-index:4}.you .topic-header.page-header::after,.figure .topic-header.page-header::after{content:'';background:rgba(164,0,0,0.6);position:absolute;left:0;top:0;width:100%;height:100%}.noise .topic-header{background-image:url(../images/noise.jpg)}.halloween .topic-header{background-image:url(../images/halloween.jpg)}.table-post .topic-header,.horrible .topic-header,.noise .topic-header,.halloween .topic-header{background-repeat:no-repeat;background-position:center center;background-size:cover}.warning-post .topic-header{background:#661111}@media screen and (prefers-color-scheme: dark){html,body,.content-wrap{background:#131820;color:#cfcfcf}html a[href],body a[href],.content-wrap a[href]{color:#88a1fa}html a[href]:hover,html a[href]:focus,body a[href]:hover,body a[href]:focus,.content-wrap a[href]:hover,.content-wrap a[href]:focus{background:#06476F;color:#fafafa}iframe{background-color:#ccc}.page__banner{background:#010209}}.results-table-wrap{overflow:auto}.results-table-wrap table{border-spacing:0;border:1px solid #111;font-size:82%;min-width:400px;text-align:left;width:100%}@media screen and (prefers-color-scheme: dark){.results-table-wrap table{border-color:#aaa}}.results-table-wrap caption{text-align:left}.results-table-wrap tbody tr:not(:last-of-type)>*,.results-table-wrap thead tr>*{border-bottom:1px solid #111}@media screen and (prefers-color-scheme: dark){.results-table-wrap tbody tr:not(:last-of-type)>*,.results-table-wrap thead tr>*{border-bottom-color:#aaa}}.results-table-wrap td,.results-table-wrap th{padding:.25em}.results-table-wrap td:not(:last-of-type),.results-table-wrap th:not(:last-of-type){border-right:1px solid #111}@media screen and (prefers-color-scheme: dark){.results-table-wrap td:not(:last-of-type),.results-table-wrap th:not(:last-of-type){border-right-color:#aaa}}.results-table-wrap td+th,.results-table-wrap th+td{border-left:1px solid #111}@media screen and (prefers-color-scheme: dark){.results-table-wrap td+th,.results-table-wrap th+td{border-left-color:#aaa}}.results-table-wrap .partial{background:lightyellow}@media screen and (prefers-color-scheme: dark){.results-table-wrap .partial{background:#333;color:#fff}}.results-table-wrap .fail{background:darkred;color:#fff}.results-table-wrap .pass{background:darkgreen;color:#fff}figure.respect-dork-mode{padding:1em;background:#fafafa;border:1px solid}@media screen and (prefers-color-scheme: dark){figure.respect-dork-mode{background:#2a2a2a;color:#fff}figure.respect-dork-mode p{color:#fff}}.highlight pre{border:1px solid #ccc;padding:.75em;background:#030406}.highlight code{background:none;border:none}.highlight .hll{background-color:#272822}.highlight .c{color:#86816b}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:#66d9ef}.highlight .l{color:#ae81ff}.highlight .n{color:#f8f8f2}.highlight .o{color:#f92672}.highlight .p{color:#f8f8f2}.highlight .cm{color:#86816b}.highlight .cp{color:#86816b}.highlight .c1{color:#86816b}.highlight .cs{color:#86816b}.highlight .ge{font-style:italic}.highlight .gs{font-weight:bold}.highlight .kc{color:#66d9ef}.highlight .kd{color:#66d9ef}.highlight .kn{color:#f92672}.highlight .kp{color:#66d9ef}.highlight .kr{color:#66d9ef}.highlight .kt{color:#66d9ef}.highlight .ld{color:#e6db74}.highlight .m{color:#ae81ff}.highlight .s{color:#e6db74}.highlight .na{color:#a6e22e}.highlight .nb{color:#f8f8f2}.highlight .nc{color:#a6e22e}.highlight .no{color:#66d9ef}.highlight .nd{color:#a6e22e}.highlight .ni{color:#f8f8f2}.highlight .ne{color:#a6e22e}.highlight .nf{color:#a6e22e}.highlight .nl{color:#f8f8f2}.highlight .nn{color:#f8f8f2}.highlight .nx{color:#a6e22e}.highlight .py{color:#f8f8f2}.highlight .nt{color:#f92672}.highlight .nv{color:#f8f8f2}.highlight .ow{color:#f92672}.highlight .w{color:#f8f8f2}.highlight .mf{color:#ae81ff}.highlight .mh{color:#ae81ff}.highlight .mi{color:#ae81ff}.highlight .mo{color:#ae81ff}.highlight .sb{color:#e6db74}.highlight .sc{color:#e6db74}.highlight .sd{color:#e6db74}.highlight .s2{color:#e6db74}.highlight .se{color:#ae81ff}.highlight .sh{color:#e6db74}.highlight .si{color:#e6db74}.highlight .sx{color:#e6db74}.highlight .sr{color:#e6db74}.highlight .s1{color:#e6db74}.highlight .ss{color:#e6db74}.highlight .bp{color:#f8f8f2}.highlight .vc{color:#f8f8f2}.highlight .vg{color:#f8f8f2}.highlight .vi{color:#f8f8f2}.highlight .il{color:#ae81ff}