*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}html:focus-within{scroll-behavior:smooth}body{text-rendering:optimizeSpeed;min-width:375px;line-height:1.5em;min-height:100vh}a{color:inherit}img,picture{max-width:100%;height:auto;display:block}table{border-collapse:collapse}input,button,textarea,select{font:inherit;-webkit-appearance:none;border-radius:0}@media(prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{-webkit-animation-duration:.01ms !important;animation-duration:.01ms !important;-webkit-animation-iteration-count:1 !important;animation-iteration-count:1 !important;-webkit-transition-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}:root{--bg-color: #171321;--text-color: #ffffff;--text-link-color: #689af8;--text-highlight-color: #f393a4;--mgc-blue: #19c0e2;--red: #d00c0c;--green: #00ff00c9;--font-sans: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", "helvetica neue", helvetica, Ubuntu, roboto, noto, arial, sans-serif;--font-mono: Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace}@font-face{font-family:cd-icons;src:url("/fonts/cd-icons.woff?v=1.0.1"),url("/fonts/cd-icons.woff2?v=1.0.1"),url("/fonts/cd-icons.ttf?v=1.0.1");font-weight:normal;font-style:normal;font-display:block}i{font-family:cd-icons !important;speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}i.i-cloud:before{content:""}i.i-bars:before{content:""}i.i-times:before{content:""}i.i-tick:before{content:""}i.i-cog:before{content:""}i.i-external-link:before{content:""}html{scroll-behavior:smooth;padding:0;margin:0}body{font-family:var(--font-sans);font-size:18px;min-width:375px;background-color:var(--bg-color);padding-top:68px}@media(min-width: 1330px){body{padding-top:0}}@media(max-width: 499px){body.mobile-nav-open{overflow:hidden}}body a:not([href*="chrisdrew.me"]):not([href^="#"]):not([href^="/"]):after{font-family:cd-icons !important;content:" ";font-size:.9em}body>header{position:fixed;inset:0 0 auto 0;background-color:var(--bg-color);color:var(--text-color);padding:1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;z-index:10}body>header .site-title{text-transform:uppercase;font-weight:bold;letter-spacing:3px}body>header .menu-toggle{position:relative;z-index:20;color:var(--text-color);border:none;background-color:rgba(0,0,0,0);font-size:2rem;cursor:pointer;-webkit-transition:color 200ms ease;transition:color 200ms ease}body>header .menu-toggle:hover{color:var(--text-highlight-color)}body>header nav{background-color:var(--bg-color);position:fixed;top:0;right:0;bottom:0;width:100vw;padding:5rem 0 1rem 0;overflow:hidden auto;-webkit-transition:opacity 300ms ease-in,-webkit-transform 300ms ease-in,-webkit-box-shadow 300ms ease-in;transition:opacity 300ms ease-in,-webkit-transform 300ms ease-in,-webkit-box-shadow 300ms ease-in;transition:transform 300ms ease-in,box-shadow 300ms ease-in,opacity 300ms ease-in;transition:transform 300ms ease-in,box-shadow 300ms ease-in,opacity 300ms ease-in,-webkit-transform 300ms ease-in,-webkit-box-shadow 300ms ease-in;-webkit-transform:translateX(100vw);transform:translateX(100vw);-webkit-box-shadow:0 0 150px rgba(0,0,0,0);box-shadow:0 0 150px rgba(0,0,0,0);opacity:0;z-index:10}body>header nav.open{-webkit-transition:opacity 300ms ease-in,-webkit-transform 300ms ease-out,-webkit-box-shadow 300ms ease-in;transition:opacity 300ms ease-in,-webkit-transform 300ms ease-out,-webkit-box-shadow 300ms ease-in;transition:transform 300ms ease-out,box-shadow 300ms ease-in,opacity 300ms ease-in;transition:transform 300ms ease-out,box-shadow 300ms ease-in,opacity 300ms ease-in,-webkit-transform 300ms ease-out,-webkit-box-shadow 300ms ease-in;-webkit-transform:translateX(0);transform:translateX(0);-webkit-box-shadow:0 0 100px rgba(0,0,0,.6);box-shadow:0 0 100px rgba(0,0,0,.6);opacity:1}body>header nav ul{list-style-type:none;padding:0}body>header nav a{display:block;padding:.5rem 1rem .5rem 4rem;text-decoration:none;font-weight:525;letter-spacing:.5px;-webkit-transition:color 200ms ease;transition:color 200ms ease}body>header nav a.active{color:var(--text-highlight-color)}body>header nav a:hover{color:var(--text-highlight-color)}@media(min-width: 500px){body>header nav{width:350px}}@media(min-width: 1330px){body>header{background-color:rgba(0,0,0,0);inset:0 auto 0 calc((100vw - 1200px)/2 - 80px);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;width:80px;padding-top:8px}body>header .menu-toggle{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}body>header .site-title{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-transform:rotate(-90deg) translateX(-150px);transform:rotate(-90deg) translateX(-150px)}body>header nav{left:0;width:100vw;bottom:unset;-webkit-transform:translate(0, -53px);transform:translate(0, -53px);padding:5px 0 0 0;height:53px}body>header nav.open{-webkit-transform:translateY(0);transform:translateY(0)}body>header nav ul{display:-webkit-box;display:-ms-flexbox;display:flex;max-width:1200px;margin:0 auto}}main{font-size:16px;line-height:2em}main h1{font-weight:200;font-size:4rem;line-height:1.05em;margin-bottom:3rem}@media(min-width: 600px){main h1{font-size:6rem}}main h2{font-weight:300;font-size:3rem;line-height:1em;letter-spacing:-3px;color:var(--text-color)}main p{margin-bottom:2em}main p.lead{font-size:1.2em}main a{-webkit-transition:all 200ms ease;transition:all 200ms ease;color:var(--text-link-color)}main a:hover{background-color:var(--text-link-color);color:var(--bg-color)}main blockquote{display:block;font-size:1.5em;font-style:italic;color:#fff;margin:3rem auto;max-width:500px;text-align:center}section{max-width:1200px;background-color:var(--text-color);margin:0 auto;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;z-index:1}@media(min-width: 740px){section{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}}section#home{margin:0 auto 3rem auto;min-height:calc(100vh - 68px);background-color:var(--bg-color);color:var(--text-color);padding:0 3rem;-ms-flex-pack:distribute;justify-content:space-around}section#home>div:first-of-type{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}section#home>div:last-of-type{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}@media(min-width: 740px){section#home div{-ms-flex-preferred-size:50%;flex-basis:50%}section#home>div:first-of-type{padding:4rem;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}section#home>div:last-of-type{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}}@media(min-width: 1330px){section#home{min-height:100vh}}section#work{display:block}section#work>div:first-of-type{position:relative}section#work>div:first-of-type::before{content:"";position:absolute;inset:0 0 auto 0;height:120px;background:-webkit-gradient(linear, left bottom, left top, from(rgba(23, 19, 33, 0)), to(rgb(23, 19, 33)));background:linear-gradient(0deg, rgba(23, 19, 33, 0) 0%, rgb(23, 19, 33) 100%)}section#work>div:last-of-type{background-color:#272822;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}section#work>div:last-of-type>div:first-of-type{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#1e1f1c;padding:2rem}section#work>div:last-of-type>div:last-of-type{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:var(--font-mono);padding:5rem 1rem 3rem 6rem;color:#f8f8f2;position:relative;line-height:1.5em;overflow:hidden}section#work>div:last-of-type>div:last-of-type .breadcrumb{position:absolute;top:0;left:0;right:0;padding:.1rem 1.5rem;font-size:13px;-webkit-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;color:#aaaaa9}section#work>div:last-of-type>div:last-of-type ul{position:absolute;list-style:none;padding-left:1.5rem;padding-right:1.5rem;margin:0;top:30px;left:0;text-align:right;color:#868680;border-right:1px solid #464741}section#work>div:last-of-type>div:last-of-type .code-red{color:#e22669}section#work>div:last-of-type>div:last-of-type .code-green{color:#a6e22e}section#work>div:last-of-type>div:last-of-type .code-yellow{color:#e1d772}section#work>div:last-of-type>div:last-of-type .code-grey{color:#87836e}section#work>div:last-of-type>div:last-of-type .tab1{padding-left:1.5rem;border-left:1px solid #464741}section#work>div:last-of-type>div:last-of-type p{margin-bottom:1rem}section#work>div:last-of-type>div:last-of-type a:hover{background-color:#f8f8f2;color:#272822;text-decoration:none}@media(min-width: 740px){section#work>div:last-of-type{padding:0 !important;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}section#work>div:last-of-type>div:first-of-type{-ms-flex-preferred-size:33.33%;flex-basis:33.33%}section#work>div:last-of-type>div:last-of-type{padding:5rem 6rem 3rem 6rem;-ms-flex-preferred-size:66.66%;flex-basis:66.66%}}section#work p{max-width:500px}section#skills{background-color:var(--text-color)}section#skills div:first-of-type{color:#000;padding:2rem 2rem 0 2rem}section#skills div:first-of-type h2{color:rgba(0,0,0,.4);margin-bottom:2rem;font-size:1.1rem;letter-spacing:-1px;font-weight:bold;text-align:left;line-height:1.1em}section#skills div:first-of-type h2 strong{color:#000;font-size:3rem;letter-spacing:-3px;font-weight:normal;line-height:.8em;text-transform:uppercase}section#skills div:last-of-type{background-color:var(--text-color);padding:0 1rem 1rem 1rem;position:relative}@media(min-width: 760px){section#skills div:first-of-type{-ms-flex-preferred-size:33.333333%;flex-basis:33.333333%;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:left;padding:4rem 4rem 2rem 4rem}section#skills div:last-of-type{-ms-flex-preferred-size:66.666666%;flex-basis:66.666666%;padding:5rem 6rem 3rem 6rem;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}section#community{background-color:#000}section#community div:first-of-type{color:#fff;padding:2rem 2rem 0 2rem}section#community div:first-of-type p{padding:0;margin:0}section#community div:last-of-type{padding:2rem 2rem 0 2rem;color:var(--text-color)}section#community h2{margin-bottom:2rem}section#community .hashtag{display:block;color:rgba(255,255,255,.8);font-size:22px;letter-spacing:-0.5px}section#community .hash{color:var(--text-highlight-color);padding-right:3px}@media(min-width: 760px){section#community div:first-of-type{-ms-flex-preferred-size:33.333333%;flex-basis:33.333333%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:left;padding:4rem 4rem 2rem 4rem}section#community div:last-of-type{-ms-flex-preferred-size:66.666666%;flex-basis:66.666666%;padding:5rem 6rem 3rem 6rem}}section#cv{background-color:#a45b6d;color:var(--text-color)}section#cv div:last-of-type{padding:2rem 2rem 0 2rem}section#cv div:last-of-type p{font-size:1.1em}section#cv div:first-of-type{padding:0 1rem 1rem 1rem}section#cv div:first-of-type h2{color:var(--text-color) !important;margin-bottom:2rem;letter-spacing:-1px;text-align:center;line-height:1.1em}section#cv div:first-of-type .blockquote-wrapper{margin:2rem 0}section#cv div:first-of-type blockquote{border-top:2px solid #fff;border-bottom:2px solid #fff;margin:0;padding:1rem;color:rgba(255,255,255,.9) !important;line-height:1.5em}section#cv div:first-of-type cite{font-size:.8rem}@media(min-width: 760px){section#cv div:first-of-type{-ms-flex-preferred-size:33.333333%;flex-basis:33.333333%;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:left;padding:4rem 4rem 2rem 4rem}section#cv div:last-of-type{-ms-flex-preferred-size:66.666666%;flex-basis:66.666666%;padding:5rem 6rem 3rem 6rem;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}section#me{color:var(--text-color);background:#3a60b4;background:-webkit-gradient(linear, left top, left bottom, from(rgb(58, 96, 180)), to(#d26f0d));background:linear-gradient(180deg, rgb(58, 96, 180) 0%, #d26f0d 100%)}section#contact{background-color:#0a080e;color:var(--text-color);padding:5rem 3rem}section#contact div:first-of-type{-ms-flex-preferred-size:33.33%;flex-basis:33.33%}section#contact div:last-of-type{-ms-flex-preferred-size:66.66%;flex-basis:66.66%;padding:0}@media(min-width: 740px){section#contact div:last-of-type{padding:0 0 0 3rem}}section#contact h2{margin-bottom:3rem}@-webkit-keyframes spin{100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@keyframes spin{100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}body>footer{max-width:1200px;margin:2rem auto 2rem auto}body>footer .small-print{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:rgba(255,255,255,.9);font-size:14px;padding:0 1rem}body>footer .small-print a{text-decoration:none}body>footer .small-print a.mgc:hover{background-color:var(--mgc-blue)}@media(min-width: 600px){body>footer .small-print{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}@media(min-width: 1225px){body>footer .small-print{padding:0}}.mgc-contact-form{padding:1rem 0}.mgc-contact-form .form-field{height:50px;position:relative;margin-bottom:1rem}.mgc-contact-form .form-field.text-area{height:150px;padding-left:0 !important}.mgc-contact-form .form-field:last-of-type{margin-bottom:2rem}.mgc-contact-form input,.mgc-contact-form button,.mgc-contact-form textarea{width:100%;height:100%;color:var(--text-color);padding:25px 6px 10px 6px;border:none;outline:none;font-size:1.1rem;font-family:var(--font-sans);background-color:rgba(255,255,255,.1)}.mgc-contact-form input:focus+label span,.mgc-contact-form input.dirty+label span,.mgc-contact-form button:focus+label span,.mgc-contact-form button.dirty+label span,.mgc-contact-form textarea:focus+label span,.mgc-contact-form textarea.dirty+label span{-webkit-transform:translateY(-80%);transform:translateY(-80%);font-size:14px}.mgc-contact-form input:focus+label::after,.mgc-contact-form button:focus+label::after,.mgc-contact-form textarea:focus+label::after{-webkit-transform:translateX(0%);transform:translateX(0%);border-bottom-color:var(--text-highlight-color)}.mgc-contact-form input:invalid.dirty+label::after,.mgc-contact-form button:invalid.dirty+label::after,.mgc-contact-form textarea:invalid.dirty+label::after{border-bottom-color:var(--red);-webkit-transform:translateX(0%);transform:translateX(0%)}.mgc-contact-form input:invalid.dirty+label span::after,.mgc-contact-form button:invalid.dirty+label span::after,.mgc-contact-form textarea:invalid.dirty+label span::after{display:inline-block;font-family:cd-icons;content:"";color:var(--red);margin-left:5px}.mgc-contact-form input:valid.dirty+label span::after,.mgc-contact-form button:valid.dirty+label span::after,.mgc-contact-form textarea:valid.dirty+label span::after{display:inline-block;font-family:cd-icons;font-size:.5rem;content:"";color:var(--green);margin-left:5px}.mgc-contact-form textarea{height:150px;padding-top:15px}.mgc-contact-form label{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-bottom:1px solid #000;overflow:hidden;z-index:1}.mgc-contact-form label span{position:absolute;top:21px;left:5px;-webkit-transition:all .3s ease;transition:all .3s ease;color:gray}.mgc-contact-form label::after{content:"";position:absolute;height:100%;width:100%;border-bottom:3px solid var(--text-color);left:0;right:0;bottom:-2px;-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 300ms ease;transition:-webkit-transform 300ms ease;transition:transform 300ms ease;transition:transform 300ms ease, -webkit-transform 300ms ease;z-index:2}.mgc-contact-form #submit{border-color:var(--green);background-color:var(--green);color:var(--text-color);opacity:.3;pointer-events:none;padding:.5rem;line-height:1em;-webkit-transition:all 200ms ease;transition:all 200ms ease}.mgc-contact-form #submit.sending::after{display:inline-block;height:20px;width:20px;font-family:cd-icons;content:"";-webkit-transform-origin:center;transform-origin:center;-webkit-animation:mgc-spin 1s infinite steps(8);animation:mgc-spin 1s infinite steps(8)}.mgc-contact-form:not(.has-recaptcha):valid #submit,.mgc-contact-form.has-recaptcha.recaptcha-passed:valid #submit{cursor:pointer;opacity:1;pointer-events:auto}.mgc-contact-form:not(.has-recaptcha):valid #submit:hover,.mgc-contact-form.has-recaptcha.recaptcha-passed:valid #submit:hover{background-color:var(--text-highlight-color)}@-webkit-keyframes mgc-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes mgc-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}/*# sourceMappingURL=style.min.css.map */