/* your custom css */ .mainContainer .wrapper .post ol { background-color: #fff; border-radius: 8px; padding: 30px 20px 20px 40px; } .mainContainer .wrapper p, .blockElement p, .mainContainer .wrapper ul li, .mainContainer .wrapper ol li { line-height: 1.3; } .darkBackground { background-color: #4A5AB5; } .container .wrapper .imageAlignSide h2 { font-weight: 500; } .container .wrapper .imageAlignSide p { text-align: left; } .todo { display: flex; justify-content: center; align-items: center; font: 2em; font-weight: bold; } main { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100% } #selection { padding: 10px; } #extension { border: 40px solid #ddd; border-width: 55px 7px; border-radius: 40px; margin: 50px auto; width: 30vh; height: 50vh; overflow: hidden; } #extension iframe { border: 0; height: 100%; width: 100% } @media only screen and (min-device-width: 360px) and (max-device-width: 736px) { } @media only screen and (min-width: 1024px) { } @media only screen and (max-width: 1023px) { } @media only screen and (min-width: 1400px) { } @media only screen and (min-width: 1500px) { } /* Try */ html, body { height: 100%; margin: 0; } .parinfer-error { background: #FFBEBE; color: black !important; } .parinfer-paren-trail { opacity: 0.4; } .CodeMirror { box-sizing: border-box; padding: 10px; height: 100% !important; } #wrapper { display: flex; flex-direction: row; height: 100vh; } main { width: 75%; overflow: auto; } #content { height: 80vh; } #errors { height: 20vh; overflow: auto; } #errors.ok { background-color: #E0F2F1; } #errors.warnings { background-color: #FCE4EC; } #errors.errors { background-color: #FCE4EC; } #errors div { padding: 10px; } #panel { display: flex; flex-direction: column; align-items: center; width: 25%; } #panel p { margin: 10px; } #qr { z-index: -1; } #qr-wrapper { display: flex; flex-direction: column; align-items: center; }