:root{font-size:18px}@media (min-width: 320px) and (max-width: 960px){:root{font-size:calc( 18px + (22 - 18) * ( (100vw - 320px) / ( 960 - 320)))}}@media (min-width: 960px){:root{font-size:22px}}@font-face{font-family:'Magnetic Pro Black';src:url("/assets/fonts/magnetic-pro-black.woff2") format("woff2"),url("/assets/fonts/magnetic-pro-black.woff") format("woff");font-weight:900;font-style:normal;font-display:swap}@font-face{font-family:'Magnetic Pro';src:url("/assets/fonts/magnetic-pro-light.woff2") format("woff2"),url("/assets/fonts/magnetic-pro-light.woff") format("woff");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:'Magnetic Pro';src:url("/assets/fonts/magnetic-pro-medium.woff2") format("woff2"),url("/assets/fonts/magnetic-pro-medium.woff") format("woff");font-weight:bold;font-style:normal;font-display:swap}@font-face{font-family:'Magnetic Pro';src:url("/assets/fonts/magnetic-pro-light-italic.woff2") format("woff2"),url("/assets/fonts/magnetic-pro-light-italic.woff") format("woff");font-weight:normal;font-style:italic;font-display:swap}@font-face{font-family:'Magnetic Pro Thin';src:url("/assets/fonts/magnetic-pro-thin-italic.woff2") format("woff2"),url("/assets/fonts/magnetic-pro-thin-italic.woff") format("woff");font-weight:100;font-style:italic;font-display:swap}@font-face{font-family:'Eight-bit';src:url("/assets/fonts/eightbitoperatorplus8-bold-webfont.woff2") format("woff2"),url("/assets/fonts/eightbitoperatorplus8-bold-webfont.woff") format("woff");font-weight:bold;font-style:normal;font-display:swap}@font-face{font-family:'Eight-bit';src:url("/assets/fonts/eightbitoperatorplus-regular-webfont.woff2") format("woff2"),url("/assets/fonts/eightbitoperatorplus-regular-webfont.woff") format("woff");font-weight:normal;font-style:normal;font-display:swap}html,body,div,span,h1,h2,h3,h4,ul,ol,p,a,img,section,blockquote{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}main,section{display:block}body{line-height:1}ol,ul{list-style:none}input,textarea{font-size:inherit;font-family:inherit}embed,iframe,img,object,video,svg{float:none;margin-inline-start:auto;margin-inline-end:auto;display:block;max-width:100%}html{box-sizing:border-box;height:100%}*,*::before,*::after{box-sizing:inherit}body{background:url("/assets/images/bg-body.jpg");min-width:calc(320em / 18);height:100%;display:flex;flex-direction:column}main{float:none;margin-inline-start:auto;margin-inline-end:auto;font-family:"Magnetic Pro","HeiTi SC Light","Microsoft YaHei",sans-serif;max-width:48em;width:100%;flex:1 0 auto}main h1,main h2,main h3,main h4{font-family:"Magnetic Pro Black","Arial Black",sans-serif}.content{float:none;margin-inline-start:auto;margin-inline-end:auto;max-width:40rem;background-color:#fafffa;padding:1.5em;line-height:1.5}h1{font-size:185%;margin-block-end:1rem;line-height:1.2}h2{font-size:150%;margin-block-end:0.5rem;line-height:1.2}h2 small{font-size:0.5em;font-weight:400;text-align:right}h3{font-size:125%;margin-block-end:0.5rem}h4{font-size:105%;margin-block-end:0.25rem}p{margin-block-end:1rem}a{text-decoration:none;color:#0a6906;transition:all 0.15s linear;border-block-end:1px dashed #0a6906}a:hover{color:#085105;border-block-end:1px solid #085105}small{font-size:75%}ul{list-style:disc;margin-inline-start:1em}ul ul{list-style:square}li{margin-block-end:1em}ol{counter-reset:list;margin-inline-start:2em}ol li{list-style:none;margin-block-end:1em;position:relative}ol li::before{content:counter(list) ".";counter-increment:list;font-weight:bold;left:-1.5em;position:absolute;top:0}ol ul li{list-style:disc}ol ul li::before{content:"";counter-increment:none}pre{color:#ccc;background-color:#2d2d2d;padding:0.5em;margin:0.5em 0 1em;border-radius:0.3em;overflow:auto;display:flex}code{background-color:rgba(192,192,192,0.5);color:#4c83e1;border-radius:0.25em;padding:2px}pre code{font-size:75%;color:#ccc;background-color:#2d2d2d}blockquote{background:url("/assets/images/bg-quotes.jpg");border-inline-start:0.5em solid #4c83e1;padding:1em;margin-block-end:1em;font-style:italic}blockquote::before{font-size:2.5em;line-height:0.1em;margin-inline-end:0.1em;vertical-align:-0.25em;color:#4c83e1;content:"\201C";font-family:"Eight-bit","Lucida Console","Lucida Sans Typewriter",monospace}blockquote::after{font-size:2.5em;line-height:0.1em;vertical-align:-0.25em;color:#4c83e1;content:"\201D";font-family:"Eight-bit","Lucida Console","Lucida Sans Typewriter",monospace}blockquote p{line-height:1.7rem}blockquote p:first-child,blockquote p:last-child{display:inline}blockquote p:nth-child(2){margin-block-start:1em}blockquote p~p{display:block}blockquote a{color:inherit;border-block-end:1px dashed}figcaption{text-align:center;font-style:italic;margin-block-end:0.25em}figcaption:lang(zh){font-style:normal}kbd{font-size:70%;background-color:#f7f7f7;border:1px solid #ccc;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;display:inline-block;vertical-align:top;margin:0 0.1em;padding:0.1em 0.6em 0;text-shadow:0 1px 0 #fff}iframe,picture img,video{margin-block-end:1em}.icon>svg{display:inline-block;height:1em;vertical-align:middle;width:1em}.icon>svg path{fill:#0a6906}.icon--tag,.icon--tags{margin-inline-end:0.25em}.icon--title>svg{height:1.25em;width:1.25em;display:inline-block;vertical-align:middle}@media all and (min-width: 45em){.icon--title>svg{height:1.5em;width:1.5em}}.icon--title>svg path{fill:#2a2a2a}.emoji{font-size:1.294rem;line-height:1;font-style:normal;display:inline-block;vertical-align:baseline;font-family:"Apple Color Emoji", "Segoe UI Emoji"}_:-ms-lang(x),.emoji{vertical-align:top}span[role="img"][aria-label],span[role="img"][aria-label]{position:relative}span[role="img"][aria-label]:focus::after,span[role="img"][aria-label]:hover::after{font-size:50%;font-family:"Magnetic Pro","HeiTi SC Light","Microsoft YaHei",sans-serif;font-weight:400;position:absolute;display:block;line-height:1.2;content:attr(aria-label);z-index:1;bottom:2.5em;left:0;background:#372822;color:#fff;padding:0.25em;border:1px solid #fff;box-shadow:2px 2px 4px #372822}@media print{span[role="img"][aria-label]::after{content:"(" attr(aria-label) ")"}}.kaomoji{white-space:nowrap;font-family:Arial, sans-serif}.post-meta{font-size:75%;color:#62627b}.blend-checkbox{opacity:0;position:fixed;left:1rem;bottom:1rem}@supports (mix-blend-mode: difference){.blend-toggle{position:fixed;height:3rem;width:3rem;left:1rem;bottom:1rem;border-radius:50%;background-image:url("/assets/images/sun.png");background-position:center;background-size:cover;z-index:1;opacity:0.7}@media all and (min-width: 60em){.blend-toggle{left:calc(50% - 24rem)}}.blender{position:fixed;background-color:#fafffa;mix-blend-mode:difference;pointer-events:none}@media all and (max-width: 59.9375em){.blender{opacity:0;height:100vh;width:100vw;transition:opacity 0.5s ease}}@media all and (min-width: 60em){.blender{height:3rem;width:3rem;left:1rem;bottom:1rem;border-radius:50%;left:calc(50% - 24rem);transition:transform 0.7s ease-out}}@media all and (max-width: 59.9375em){.blender.active{opacity:1}}@media all and (min-width: 60em){.blender.active{transform:scale(100)}}.blender.active~.blend-toggle{background-image:url("/assets/images/moon.png");isolation:isolate}img,.external-url::before,.emoji{isolation:isolate}.blend-checkbox:focus~label{outline:5px auto -webkit-focus-ring-color}}.site-header{background:url("/assets/images/bg-header.jpg")}.site-header__wrapper{float:none;margin-inline-start:auto;margin-inline-end:auto;align-items:center;display:flex;flex-flow:row wrap;max-width:52em;padding:1em}@media all and (min-width: 60em){.site-header__wrapper{flex-flow:row nowrap}.site-header__wrapper .site-branding{flex:3 1 70%}.site-header__wrapper .site-nav{flex:1 1 30%}}.site-branding__image{text-indent:100%;white-space:nowrap;overflow:hidden;background:url("/assets/images/retropc-static.png");background-size:cover;display:block;height:90px;min-width:90px;width:90px}@media all and (min-width: 45em){.site-branding__image{height:120px;width:120px}}.site-branding__image::before{content:url("/assets/images/retropc-dynamic.gif");height:0;visibility:hidden;width:0}.site-branding__image:hover{background:url("/assets/images/retropc-dynamic.gif");background-size:cover}.site-branding{align-items:center;display:flex}.site-branding__wrapper{margin-inline-start:1em}.site-branding__title{margin-block-end:0.25rem}.site-branding__title a{font-size:85%;font-family:"Eight-bit","Lucida Console","Lucida Sans Typewriter",monospace;color:#372822}.site-branding__title a:hover{color:#372822}.site-branding__description{font-size:75%;font-family:"Eight-bit","Lucida Console","Lucida Sans Typewriter",monospace;line-height:2}.site-nav{display:flex;margin-block-start:1em;width:100%;font-family:"Eight-bit","Lucida Console","Lucida Sans Typewriter",monospace;font-size:90%}@media all and (min-width: 60em){.site-nav{margin-block-start:0}}.site-nav a{flex:auto;text-align:center;color:#372822}.site-nav__link:hover{color:#372822}.site-footer{font-family:"Eight-bit","Lucida Console","Lucida Sans Typewriter",monospace;color:#fff}.site-footer a{color:#4abc41}.site-footer a:hover{color:#91d78c}.site-footer svg path{fill:#4abc41}.site-footer__wrapper--main{background:url("/assets/images/bg-footer-2.jpg")}.site-footer__wrapper--secondary{background:url("/assets/images/bg-footer.jpg")}.footer-main{float:none;margin-inline-start:auto;margin-inline-end:auto;display:flex;flex-flow:row wrap;max-width:1140px;padding:0.5em}@media all and (min-width: 51.25em){.footer-main{flex-flow:row nowrap}.footer-main .footer-main__about{flex:25 0 0}.footer-main .footer-main__contact{flex:1 0 250px}}.footer-main p,.footer-main ul{font-size:80%;line-height:2}.footer-main input{position:absolute;opacity:0}.footer-main label{float:none;margin-inline-start:auto;margin-inline-end:auto;position:relative;display:block;cursor:pointer}.footer-main input~label div{display:none}.footer-main input:checked~label div{display:block;position:absolute;top:-6.5em;left:50%;transform:translateX(-50%);background-color:#353542;padding:0.25em 0.5em;border-radius:4px}.footer-main label li{width:max-content}.footer-main__about,.footer-main__contact{margin:0 1em 1em}@media all and (min-width: 51.25em){.footer-main__about,.footer-main__contact{margin-block-start:1em}}.footer-main__avatar{border-radius:50%;height:200px;min-width:200px;width:200px;margin:1em auto;background-color:#fafffa}@media all and (min-width: 51.25em){.footer-main__avatar{flex:1 0 0;margin:0.5em 0 0.5em 1em}}.footer-main__contact ul{margin:0}.footer-main__contact ul li{list-style:none;margin:0}.footer-main__link{display:flex;align-items:center;padding:0.25em}.footer-main__link span:first-child{margin-inline-end:0.5em}.footer-main__link:hover svg path{fill:#91d78c}.footer-secondary{float:none;margin-inline-start:auto;margin-inline-end:auto;align-items:center;display:flex;flex-flow:row wrap;max-width:1140px;padding:1em;font-size:65%}@media all and (min-width: 51.25em){.footer-secondary{flex-flow:row nowrap}.footer-secondary .footer-secondary__nav{flex:2 0 28.5714%}}.footer-secondary .footer-secondary__text{display:flex;flex-flow:row wrap;width:100%;line-height:2}@media all and (max-width: 51.1875em){.footer-secondary .footer-secondary__text{margin-block-end:1em}}@media all and (min-width: 51.25em){.footer-secondary .footer-secondary__text{flex:5 0 71.4285%}}.footer-secondary__attribute,.footer-secondary__copyright{flex:auto;text-align:center;width:275px}.footer-secondary__nav{display:flex;width:100%}.footer-secondary__nav a{flex:auto;text-align:center}.grid{display:flex;flex-flow:row wrap;justify-content:space-around;margin:-1em 0 1em -0.5em}.grid div{padding:1em 0 0 0.5em;flex:1 0 100%}@media all and (min-width: 35.9375em) and (max-width: 44.9375em){.grid div{flex:1 0 50%}}@media all and (min-width: 45em){.grid div{flex:1 0 32%}}@supports (display: grid){.grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(12em, 1fr))}}.page-header{margin-block-end:0.5em}.tag-title{display:inline-block;vertical-align:middle;margin-inline-start:0.25em}.more-link{text-align:right}.external-url::before,.external-url::after{content:"";display:inline-block;height:0.8em;width:0.8em}.external-url::before{margin-inline-end:0.25em;background-size:cover}.external-url::after{background:url("/assets/images/icons/icon-link.svg") no-repeat;background-size:cover;margin-inline-start:0.25em}.alistapart::before{background:url("/assets/images/icons/icon-ala.png") no-repeat}.codrops::before{background:url("/assets/images/icons/icon-codrops.svg") no-repeat;background-size:cover}.wismut::before{background:url("/assets/images/icons/icon-wismut.svg") no-repeat;background-size:cover}.\31 2days::before{background:url("/assets/images/icons/icon-12days.svg") no-repeat;background-size:cover}.\32 4ways::before{background:url("/assets/images/icons/icon-24ways.png") no-repeat;background-size:cover}.smashing::before{background:url("/assets/images/icons/icon-smashing.svg") no-repeat;background-size:cover}.alphabettes::before{background:url("/assets/images/icons/icon-alphabettes.svg") no-repeat;background-size:cover}.logrocket::before{background:url("/assets/images/icons/icon-logrocket.svg") no-repeat;background-size:cover}.bit::before{background:url("/assets/images/icons/icon-bit.svg") no-repeat;background-size:cover}.nexmo::before{background:url("/assets/images/icons/icon-nexmo.svg") no-repeat;background-size:cover}.shopify::before{background:url("/assets/images/icons/icon-shopify.svg") no-repeat;background-size:cover}.post-title{margin-block-end:0.25rem}.post-summary p{margin-block-end:0}.note{font-size:85%;margin-block-end:0.25em}.post-item{font-family:"Magnetic Pro Black","Arial Black",sans-serif}.post-list:last-of-type{margin-block-end:1em}.post-list h3{line-height:1.2}.post-link{color:#372822}.post-content__tag{padding:0.5em 0 0.25em;border-block-end:0;text-decoration:underline;display:inline-block}.post-content__tag:hover{border-block-end:0}.post-tags{margin-block-end:1em;font-size:75%}.tag-link{display:inline-block;white-space:nowrap;background:#0a6906;color:#fafffa;padding:0.125em 0.25em;margin:0.25em 0.125em;border-radius:0.25em}.tag-link:hover{color:#fafffa;background:#0f9909}.rss-subscribe{font-size:75%}.profile-image{float:none;margin-inline-start:auto;margin-inline-end:auto;border-radius:20px;display:block}@media all and (min-width: 35.9375em){.profile-image{float:right;margin-inline-start:0.5em}}.jobs label{cursor:pointer;position:relative;z-index:20;font-size:100%;padding:0.25em 0.75em;background-color:#c7ebc5;margin-block-end:0.25em;display:flex;align-items:center}.jobs label:after{content:url("../images/box.png");margin-inline-start:auto;line-height:0}.jobs input[type="checkbox"]:focus+label{outline:5px auto -webkit-focus-ring-color}.jobs input[type="checkbox"]:checked+label:after{content:url("../images/star.png")}.jobs input[type="checkbox"]:checked+label{margin-block-end:0.25em}.jobs label[for="freelance"]{margin-block-end:1.5em}.jobs input[type="checkbox"]{opacity:0;position:absolute}.jobs input[type="checkbox"]+label+article{display:none;height:0;max-height:0;overflow:hidden}.jobs input[type="checkbox"]:checked+label+article{display:block;height:auto;max-height:none;padding:0.25em 1em}.projects{margin-block-end:0.5em;text-align:center}.project{margin-block-end:1em}.project__image{margin-block-end:0.25em}.project__title{line-height:1.2}.talk{text-align:center}.pagination{margin-block-end:1em;text-align:center}.paginator{padding:0 0.5em}label{display:block;font-size:85%}input[type="text"],input[type="email"]{border:1px solid rgba(166,166,166,0.5);height:2rem;margin-block-end:1em;max-width:18em;padding:0.5em;transition:border 0.3s;width:100%}input[type="text"]:focus,input[type="email"]:focus{border:1px solid}textarea{border:1px solid rgba(166,166,166,0.5);display:block;margin-block-end:1em;max-width:26em;min-height:5em;padding:0.5em;transition:border 0.3s;width:100%}textarea:hover{border:1px solid rgba(166,166,166,0.5)}textarea:focus{border:1px solid}input[type="submit"]{color:#fff;background-color:#4abc41;padding:0.25em 0.5em;transition:background-color 0.15s linear;border:0;cursor:pointer}input[type="submit"]:hover{background-color:#2c7027}.message-wrapper{margin-block-end:1em}.g-recaptcha{margin-block-end:1em}.success{display:inline-block;margin-inline-end:0.5em;vertical-align:middle}.podcast{margin-block-end:0.5em;text-align:center}.podcast img{box-shadow:2px 2px 4px #353542}.newsletter{margin-block-end:1.5em;text-align:center}.newsletter img{position:relative;width:100%;min-height:4em;width:11em}.newsletter img::after{content:attr(alt);display:block;padding:0.5em;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fafffa;box-shadow:2px 2px 4px #353542}.error__wrapper{display:block}@media all and (min-width: 45em){.error__wrapper{display:flex;flex-flow:row nowrap}}@media all and (min-width: 45em){.error__image{flex:1 0 436px;height:auto}}@media all and (min-width: 45em){.error__text{flex:1 1 auto}}.no-margin{margin-block-end:0}a.no-underline,a.no-underline:hover{border:0}.no-list-style{list-style:none}.no-break{white-space:nowrap}.break{word-break:break-all}.italicise{font-style:italic}.sr-only{position:absolute;opacity:0}

/*# sourceMappingURL=pages.css.map */