@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700,700italic);@import url(https://fonts.googleapis.com/css?family=Cutive+Mono);@import url(https://fonts.googleapis.com/css?family=Delius+Unicase:400,700);*{box-sizing:border-box}body,html{width:100%;height:100%;padding:0;margin:0}body{background-color:#444}header{width:100%;text-align:center}header h1{font:2em/1.5 Delius Unicase,cursive;color:#fff;text-shadow:0 0 40px #000}header h2{text-align:center;font:1.5em/1.5 Delius Unicase,cursive;margin:0 0 5px}.container{height:100%;width:100%;margin:0 auto;max-width:960px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.editor,.output{margin:10px;padding:20px;width:100%;background-color:#fff;border:1px solid #ccc}.editor header,.output header{margin-bottom:20px;border-bottom:1px solid #ccc}@media (min-width:700px){.editor,.output{width:50%;-webkit-box-flex:1;-ms-flex:1;flex:1}}.editor{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border:10px solid #cde0f2}.output{font:1em/1.2 Quattrocento Sans,sans-serif;border:10px solid #dbf2cd}.output a{color:#529828}.output div{min-height:200px}form{-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2;display:-webkit-box;display:-ms-flexbox;display:flex}textarea{width:100%;min-height:200px;-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0;padding:10px;font:1em/1.2 Quattrocento Sans,sans-serif;background-color:#f5f9fd;border:1px solid #ccc}code{background-color:#eaf7e1}code,pre{font:1em/1.2 Cutive Mono,monospace}pre{width:100%;padding:5px 10px;border-radius:3px;background-color:#444;color:#dbf2cd}pre code{background-color:inherit}ol,ul{margin:0}