1body { 2 display: flex; 3 flex-direction: column; 4 flex-wrap: wrap; 5} 6textarea { 7 font-family: monospace; 8} 9header { 10 font-size: 130%; 11 font-weight: bold; 12} 13.hidden, .initially-hidden { 14 position: absolute !important; 15 opacity: 0 !important; 16 pointer-events: none !important; 17 display: none !important; 18} 19fieldset.options { 20 font-size: 75%; 21} 22fieldset > legend { 23 padding: 0 0.5em; 24} 25span.labeled-input { 26 padding: 0.25em; 27 margin: 0.25em 0.5em; 28 border-radius: 0.25em; 29 white-space: nowrap; 30 background: #0002; 31} 32.center { text-align: center; } 33.error { 34 color: red; 35 background-color: yellow; 36} 37.strong { font-weight: 700 } 38.warning { color: firebrick; } 39.green { color: darkgreen; } 40.tests-pass { background-color: green; color: white } 41.tests-fail { background-color: red; color: yellow } 42.faded { opacity: 0.5; } 43.group-start { color: blue; } 44.group-end { color: blue; } 45.input-wrapper { 46 white-space: nowrap; 47 display: flex; 48 align-items: center; 49} 50#test-output { 51 border: 1px inset; 52 border-radius: 0.25em; 53 padding: 0.25em; 54 /*max-height: 30em;*/ 55 overflow: auto; 56 white-space: break-spaces; 57 display: flex; flex-direction: column; 58 font-family: monospace; 59} 60#test-output.reverse { 61 flex-direction: column-reverse; 62} 63label[for] { cursor: pointer } 64