:root{--main-font-family: "Helvetica", "Arial", sans-serif;--main-font-size: 13px}html,body,#app{margin:0;height:100vh;width:100vw}#app{display:grid;grid-template-rows:60px 1fr 40px;grid-template-columns:300px 1fr;grid-template-areas:"header  header" "sidebar main" "footer  footer"}#app>header{grid-area:header;background:#dafaff;border:2px solid #8df0ff;align-items:center;text-align:center;padding:0 1rem;margin:5px;font-family:var(--main-font-family);font-size:15px}#app>main{grid-area:main;overflow:auto;margin:7px 18px;font-family:var(--main-font-family);font-size:var(--main-font-size)}#app>aside{background:#f6f6f6;border:2px solid #e2e2e2;grid-area:sidebar;overflow:hidden;padding:1rem;margin:0 5px;font-family:var(--main-font-family);font-size:var(--main-font-size)}#picker{margin-bottom:1.5em}#app>footer{grid-area:footer;background:#e5ffcc;border:2px solid #98fb00;display:flex;align-items:center;justify-content:center;margin:5px;font-family:var(--main-font-family);font-size:var(--main-font-size)}#explainer{display:flex;align-items:center;justify-content:center;width:100%;height:80%;margin:2em 0}#explainer>div{text-align:center;width:80%}@media (max-width: 768px){#app{grid-template-rows:60px auto 1fr 40px;grid-template-columns:1fr;grid-template-areas:"header" "sidebar" "main" "footer"}#app>aside{width:auto;overflow:visible}}