* {box-sizing:border-box;}

html {height:100%;}

body {max-height:100vh; height:100%; min-height:-moz-available; min-height:-webkit-fill-available; min-height:fill-available; margin:0; font-family:sans-serif;}

div.container {height:100%; text-align:center; padding:1rem; background-color:#444; overflow:hidden;}
div.container {display:flex; flex-direction:row; justify-content:center;}

div.container div.col {height:100%; flex-grow:1; position:relative;}
div.container div.colA {padding-right:1.5px;}
div.container div.colB {padding-left:1.5px; padding-right:1.5px;}
div.container div.colC {padding-left:1.5px; display:none;}

div.container div.col h1 {position:absolute; top:.5rem; right:.5rem; margin:0; padding:.5rem .5rem .25rem; border-radius:.25rem;}
div.container div.col h1 {font-weight:100; color:#fff; background-color:#000; opacity:.5; user-select:none; cursor:pointer;}
div.container div.col h2 {margin-bottom:0;}
div.container div.col iframe {height:100%; width:100%; background-color:#fff;}
div.container div.col div.outputBox {height:100%; background-color:#000c; color:wheat; padding:1rem; overflow-y:auto;}
div.container div.col div.outputBox ol {padding-left:2rem; /*list-style:none;*/ display:inline-block; min-width:50%;}



/* Large Screen */
@media screen and (max-width:1199px) {
	div.container {padding:1rem 1rem 1.25rem; height:50%;}
	div.container div.col {height:100%; width:50%; margin:0 auto;}
	div.container div.colA {padding-right:1.5px;}
	div.container div.colB {padding-left:1.5px;}
	div.container div.colC {padding:0;}
}

/* Small Screen */
@media screen and (max-width:767px) {
	div.container div.col h1 {font-size:1.5em;}
	/* div.container div.col {height:33.33%; width:100%; padding:0;} */
}