html,body{background:#f5f5f5;height:100%;margin:0}body{color:#000;letter-spacing:.8px;padding:1rem;font-family:Proxima Nova,proxima-nova,sans-serif;font-size:1rem;font-weight:400;line-height:1.6}h1{margin:0;line-height:1}*{box-sizing:border-box}#root{height:100%}#app{flex-direction:column;height:100%;display:flex}main{flex:1;display:flex;overflow:hidden}main>div{flex:1;margin:0 1rem 0 0}#editor{border:1px solid #aaa;flex-direction:column;display:flex}#editor #HTML_EDITOR{flex:1}#editor .presets{border-bottom:1px solid #aaa;padding:5px 10px;display:flex}#editor .presets ul{text-align:right;flex:1;margin:0;padding:0}#editor .presets li{border-right:1px solid #aaa;margin:0;padding:0 10px;list-style-type:none;display:inline}#editor .presets li:last-of-type{border:none;padding-right:0}#editor .presets .view-tab{font:inherit;cursor:pointer;color:#555;background:0 0;border:none;outline:none;padding:0;text-decoration:none}#editor .presets .view-tab:hover{color:#3498db;text-decoration:underline}#editor .presets .view-tab:focus-visible{outline-offset:2px;border-radius:2px;outline:2px solid #3498db}#editor .presets .view-tab.active{color:#333;font-weight:700;position:relative}#editor .presets .view-tab.active:after{content:"";background:#3498db;height:2px;position:absolute;bottom:0;left:0;right:0}#editor .editor-wrapper{flex:1;min-height:0}header h1{padding:0 0 1rem}header a{float:right;color:#c00;line-height:32px;text-decoration:none}header a svg{margin-right:5px;position:relative;top:2px}header a svg #github{fill:#c00}header a:hover{color:#900}header a:hover #github{fill:#900}#html{background:#fff;border:1px solid #aaa;padding:.5rem;font-size:.9rem;overflow-y:scroll}#html h1,#html h2,#html h3,#html h4,#html h5,#html p,#html ul{margin:.5rem 0}