body { /*padding: 20px;*/ background-color: #191919; color: white; font-family: monospace; /*margin-bottom: 100px;*/ min-height: 100vh; margin: 0px; } h1, h2 { color: orange; } h3, h4 { color: gray; } a { text-decoration: none; color: orange; } a:hover { color: #191919; background-color: orange; } hr { border: none; border-bottom: 1px solid #444; margin: 0px; } input { border: 1px solid black; background-color: white; } body > footer { background-color: black; position: fixed; left: 0; bottom: 0; width: calc(100vw - 20px); padding: 10px; text-align: center; overflow: hidden; } ul { margin: 0px; padding-left: 10px; padding-bottom: 0px; } ul p { margin: 0px; } li { margin-top: -2px; margin-bottom: -1px; } body > main { display: flex; min-height: 100vh; } body > main > * > *:not(hr) { padding: 20px; } body > main hr { width: 100%; } body > main > nav { background-color: black; flex-shrink: 0; } body > main > nav ul { list-style-type: none; } body > main > article ul { margin-bottom: 10px; } nav { display: flex; flex-direction: column; border-right: 1px solid #444; width: 200px; } article { flex-grow: 1; display: flex; flex-direction: column; } article > main { flex-grow: 1; } pre { background-color: #000; color: #DDD; padding: 10px; padding-left: 20px; } .grayed { color: gray; } .editor-toolbar { border-top: 0px solid #444; border-left: 0px solid #444; border-right: 0px solid #444; border-radius: 0px; } .EasyMDEContainer .CodeMirror { border: 1px solid #444; } .editor-toolbar .fa { color: white; } .editor-toolbar button.active, .editor-toolbar button:hover { background-color: black; } .CodeMirror { color: white; background-color: black; } .CodeMirror-cursor { border-left: 2px solid gray; }