body{background-color:#272727}body>article{background-color:#F7F7F7}body>article header h1{position:relative;margin:0 0 50px;text-align:center;font-size:3em}body>article header h1:after{content:" ";position:absolute;top:125%;right:0;left:0;margin-right:auto;margin-left:auto;display:block;width:50%;max-width:240px;height:1px;background-color:#5F5F5F}body>article p{color:#5F5F5F}body>article #code :not(pre)>code[class*="language-"],body>article #code pre[class*="language-"]{margin-bottom:0;border-radius:0;background-color:#171717}footer{color:#fff;padding:50px 0}footer #color-bar{display:none}#nav-main{margin-right:auto;margin-left:auto;display:block;width:100%;max-width:768px;text-align:center;background-color:#687689}#nav-main ul{margin:0;padding:0;list-style:none}#nav-main-wrapper{display:block;height:100%}#nav-main-logo{display:none}#nav-main-menu{display:block;height:100%;float:none}#nav-main-menu li{display:inline-block}#nav-main-menu li a{display:block;color:#fff}#nav-main-menu li a span{display:none}#steps{position:absolute;top:0;left:0;right:0;margin:0;padding:0;margin-right:auto;margin-left:auto;display:block;width:100%;max-width:768px;height:50px;text-align:center}#steps li{display:inline-block;color:#fff;line-height:50px;opacity:0.5}#steps li a{display:block;line-height:50px;color:#fff}#steps li a:focus,#steps li a:hover{opacity:1;color:#FCB859}#steps li:hover{opacity:1}#steps li.active{opacity:1}#steps li.active a{color:#FCB859}@media screen and (max-width: 768px){body{padding-top:50px}body>article #intro,body>article #result{padding:0 25px}body>article #intro{padding-top:25px}body>article #code h2,body>article #code h3{padding:0 25px}#nav-main{position:fixed;bottom:0;left:0;right:0;height:50px}#nav-main-menu li{padding:0 25px;height:50px;line-height:50px}#steps li:first-child{display:none}#steps li a{padding:0 8.33333px}}@media screen and (min-width: 769px){body{padding-top:100px}body>article{margin-right:auto;margin-left:auto;display:block;max-width:768px}body>article #intro,body>article #result{padding:0 50px}body>article #intro{padding-top:50px}body>article #code h2,body>article #code h3{padding:0 50px}#nav-main{height:75px}#nav-main-menu li{padding:0 50px;height:75px;line-height:75px;font-size:1.25em}#nav-main-menu li a:focus,#nav-main-menu li a:hover{opacity:0.75}#steps li a{padding:0 12.5px}}@media screen and (min-width: 1201px){html,body{height:100%}}