body{margin:0;padding:0}#menuToggle{display:block;position:relative;top:30px;left:30px;z-index:1;-webkit-user-select:none;user-select:none}#menuToggle input{display:block;width:40px;height:32px;position:absolute;top:-7px;left:-5px;cursor:pointer;opacity:0;z-index:2;-webkit-touch-callout:none}#menuToggle span{display:block;width:33px;height:4px;margin-bottom:5px;position:relative;background:#cdcdcd;border-radius:3px;z-index:1;transform-origin:4px 0px;transition:transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),opacity 0.55s ease}#menuToggle span:first-child{transform-origin:0% 0%}#menuToggle span:nth-last-child(2){transform-origin:0% 100%}#menuToggle input:checked ~ span{opacity:1;transform:rotate(45deg) translate(-2px, -1px);background:#232323}#menuToggle input:checked ~ span:nth-last-child(3){opacity:0;transform:rotate(0deg) scale(0.2, 0.2)}#menuToggle input:checked ~ span:nth-last-child(2){transform:rotate(-45deg) translate(0, -1px)}#menu{position:absolute;width:280px;margin:-100px 0 0 -50px;padding:50px;padding-top:125px;line-height:1.3em;background:#ededed;list-style-type:none;-webkit-font-smoothing:antialiased;transform-origin:0% 0%;transform:translate(-100%, 0);transition:transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1)}a{text-decoration:none;color:#232323;transition:color 0.3s ease}a:hover{color:tomato}#menu li{padding:8px 0;font-size:14px}#menuToggle input:checked ~ ul{transform:none}body{line-height:1.6em;background-color:white;color:#555;font-family:-apple-system, 'Fira Sans', sans-serif;padding:1rem 38vh;font-weight:400}.content a{border-bottom:2px solid #aaa;text-decoration:none;position:relative;color:rgba(0,0,0,0.7)}.content a:focus,.content a:hover{color:rgba(0,0,0,0.6);border-bottom:2px solid #E8802E}.content .middleman-logo{margin-bottom:1rem;width:10rem}.content img{border-radius:3px !important}.content td{vertical-align:bottom}.content .hero{margin-bottom:100px}.content .topics li{list-style:none}.content .topics li span{background:rgba(255,255,255,0.8);padding:2px 4px}.content .h1wrap{background-repeat:no-repeat;background-position:85%;background-size:contain;padding-left:50px}.content h1{font-family:'Fira sans', serif;font-weight:400;font-size:1.9em !important;margin-bottom:30px;line-height:1.8em;background:rgba(255,255,255,0.9);border-radius:6px}.content h2,.content h3,.content h4{font-weight:200;font-size:1.4em !important}.content .step-head{border-radius:50%;width:40px;border:2px solid #666;margin-right:10px;left:-55px;top:13px;position:relative;float:left}.content .step-head span{text-align:center;line-height:40px;display:block;font-weight:bold;font-size:1.7em}.content h2{left:-50px;position:relative;overflow:hidden}.content img.screenshot{border-radius:3px !important;filter:drop-shadow(0px 0px 3px #888)}.content .aside-right{left:200px;height:1px;position:relative;float:right}.content .aside-left{left:-200px;height:1px;position:relative;float:left}.content pre,.content code{font-family:'Fira Mono', monospace !important}.content code{background:#F4F4F4;border-radius:4px;padding:1px 4px;font-size:0.95em}.content div.highlight{border-radius:5px;margin-bottom:20px}.content div.highlight pre.highlight{border-radius:5px;width:90%;margin:0 0 0 0px;font-size:13px;line-height:1.5em}.content div.highlight pre.highlight code{background:none;border-radius:0px;padding:0;font-size:1em}.content div.highlight pre.highlight td.rouge-gutter{border-radius:5px;background-color:#eee;color:#777}.content mark{padding:1px 3px;background:#F6DE7D !important;border-radius:3px !important}.content .emphasis{background:#fdedb7;border-radius:3px;padding:1px 5px 1px 0}div.footer-links{font-size:0.8em}@media (min-width: 240px){body{font-size:1.0rem;padding:1rem 1rem}.h1wrap{padding-left:0px}}@media (min-width: 960px){body{font-size:1.1rem;padding:1rem 8rem}.h1wrap{padding-left:0px}}@media (min-width: 1100px){body{font-size:1.1rem;padding:1rem 14rem}}@media (min-width: 1300px){body{font-size:1.2rem;padding:1rem 18rem}}.step{padding:30px 80px;margin:30px 0;border-radius:5px;border:2px dashed white}.step:hover{border:2px dashed #aaa}#next-lesson{border:2px solid gray;border-radius:450px;padding:10px;background:red}#next-lesson a{background:yellow}