* { box-sizing: border-box; } body { margin: 0; height: 100vh; display: flex; flex-direction: column; line-height: 1.6; color: black; text-align: justify; hyphens: auto; font-family: sans-serif; overflow-wrap: break-word; } #header { background: #dd6; color: white; box-shadow: 0 -5px 2px rgba(0, 0, 0, 0.1) inset; } #header div { padding: 0 1em; display: flex; align-items: center; justify-content: space-between; } #header h1 { margin: 0; color: #440; display: inline-block; } #header small { opacity: 0.7; } #header nav { float: right; } #header li { display: inline; border-left: 1px solid #440; padding: 0 0.5em; } #header li:first-child { border: none; } #article { display: flex; flex: 1; flex-direction: column; padding: 0 1em 1em; position: relative; } form { display: flex; flex: 1; flex-direction: column; } h1, h2, h3, h4, h5, h6 { line-height: 1.2; } #toolbar { padding: 6px 0; } #split { display: flex; flex: 1; position: relative; } #extrafieldsplit { display: flex; flex: 1; flex-direction: column; } #textarea { flex: 1; position: relative; } textarea { width: 100%; height: 100%; resize: none; } [name=stdin] { height: 124px; } #right-buttons { float: right; } #outputcontainer { flex: 1; position: relative; } #output { padding: 0 1em; position: absolute; width: 100%; height: 100%; overflow: auto; } @media (max-width: 1200px) { #split { flex-direction: column; flex: auto; } #output { padding: 0; max-height: 40vh; max-width: unset; } } table { overflow: auto; border-collapse: collapse; display: block; } td, th { border: 1px solid #dfe2e5; padding: 6px 13px; } tr:nth-child(2n) { background: #f6f8fa; } pre { padding: 16px; overflow: auto; } pre, code { background: #f5f2f0; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; } img { max-width: 100%; } .stdout-header h2, .stdout-header label { display: inline-block; } .stdout-header label { padding-left: 1em; }