.output,.terminal{display:flex;flex-direction:column}.terminal{margin:50px auto;border-radius:6px;box-shadow:0 0 60px #b7b7b7;border:1px solid #ccc}.terminal .terminal-header{background:#dbd9db;background:linear-gradient(180deg,#e7e5e7,#d2d0d2);text-align:center;position:relative;color:#373537;font-size:14px;padding:5px;border-radius:5px 5px 0 0}.terminal .terminal-header .btns{position:absolute;top:7px;display:flex}.terminal .terminal-header .btns>div{width:14px;height:14px;background:red;border-radius:50%;margin-left:8px}.terminal .terminal-header .btns>div:first-child{background:#fc625d}.terminal .terminal-header .btns>div:nth-child(2){background:#fdbc40}.terminal .terminal-header .btns>div:nth-child(3){background:#35ca4a}.terminal .terminal-body{display:flex;height:180px;justify-content:center;align-items:center;font-size:35px;font-family:monospace;padding:10px;background:#fff}.terminal .terminal-body .text{transition:all .15s ease-in;padding:0 10px;outline:none}.terminal .terminal-body .text.format-bold{font-weight:700}.terminal .terminal-body .text.format-underlined{text-decoration:underline}.terminal .terminal-body .text.format-hidden{visibility:hidden}.terminal .terminal-body .arrow{color:#b7b7b7}.terminal.dark .terminal-header{background:linear-gradient(180deg,#58564e,#403f3a);color:#fff;font-weight:500}.terminal.dark .terminal-header .btns>div:first-child{background:#e35f39}.terminal.dark .terminal-header .btns>div:nth-child(2),.terminal.dark .terminal-header .btns>div:nth-child(3){background:#75746d}.terminal.dark .terminal-body{background:#2f0b24}.terminal.dark .terminal-body .text{color:#fff}.home-screen{text-align:center;max-width:700px;margin:40px auto 0;padding:0 10px}.home-screen .help{margin-bottom:20px;color:grey;font-weight:100}.output{margin:0 auto;text-align:left;background-color:#1b346f;color:#fff;padding:20px;font-weight:300;font-family:monospace;line-height:1.6em;font-size:14px;counter-reset:line;box-shadow:0 0 60px #b7b7b7;border-radius:5px}.output .line{display:flex}.output .line-comment{color:#798bb5}.output .line:before{counter-increment:line;content:counter(line);margin-right:10px;color:grey}.color-chooser{display:inline-block;position:relative}.color-chooser>button{border:none;background:none;cursor:pointer}.color-chooser>button .arrow{font-size:2em;line-height:0;top:2px;position:relative}.color-chooser.active>button .content{text-decoration:underline}.color-chooser .colors{position:absolute;z-index:10;display:flex;flex-wrap:wrap;width:435px;margin-top:5px;background:#fff;border:1px solid grey}.color-chooser .colors button.color{cursor:pointer;height:15px;width:15px;border:1px solid #fff;padding:0}.color-chooser .colors button.color.selected{border:2px solid #000}@media (max-width:500px){.color-chooser .colors{width:300px}.color-chooser .colors button.color{height:30px;width:30px}}.controls button.toggle-settings{border:none;background:none;font-size:15px;line-height:1em;cursor:pointer}.controls .color-chooser>button,.controls label{font-size:15px}.controls label input{margin-right:5px}.controls>*{margin:0 5px;display:inline-block}@media (max-width:500px){.controls>*{margin:0 5px 5px}}.controls .settings{margin-top:20px}.controls .settings label{margin:0 10px}.controls .settings select{margin-left:5px}body,html{margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}button{outline:none}a,a:active,a:visited{color:#1976d2;text-decoration:none}.logo{position:absolute;top:5px;left:8px;font-weight:700}footer{padding:0 10px;max-width:700px;margin:50px auto 20px}footer .github-buttons{text-align:center;margin-bottom:20px}footer .footer-info{display:flex}footer .footer-info .author{flex:1;text-align:right}@media (max-width:500px){.fork-me-btn img{display:none}}