body { background-color: #2b8856; } @font-face { font-family: 'Roboto Slab'; src: url(https://fonts.jimstatic.com/s/robotoslab/v11/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISmb2Rj.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } #quiz { background-color: #fff; font-family: "Roboto Slab"; font-size: 16px; margin: 0 auto; width: 960px; } #quiz .overlay { background-color: rgba(0, 0, 0, 0.4); bottom: 0; left: 0; position: fixed; right: 0; top: 0; } #quiz .dialog { background-color: #fff; height: calc(100vh - 100px); margin: 50px; display: grid; grid-template-columns: calc(66.667vw - 79px) auto 30px; grid-template-rows: 30px 100px auto; } #quiz .solution { border-right: 3px solid #444; grid-area: 1 / 1 / 4 / 2; } #quiz .description { grid-area: 1 / 2 / 3 / 3; overflow-y: auto; padding: 10px; } #quiz .description .helptext { white-space: pre-line; } #quiz .description button { background-color: #e8912a; border: none; cursor: pointer; font-family: "Roboto Slab"; font-size: 16px; margin-top: 5px; padding: 5px 10px; } #quiz .close_button { cursor: pointer; grid-area: 1 / 3 / 2 / 4; } #quiz .close_button:hover { background-color: #e8912a; } #quiz .store { border-top: 3px solid #444; grid-area: 3 / 2 / 4 / 4; overflow-y: auto; padding: 5px 0 0 5px; } #quiz .card { background-color: #eee; display: inline-block; margin: 5px; min-height: 50px; padding: 5px; vertical-align: top; width: calc(16.667vw - 50.5px); } #quiz .card span { white-space: pre-line; } #quiz .store .card { cursor: pointer; } #quiz .store .card:hover { background-color: #c7dad0; } #quiz .card.selected { border: 3px solid #2b8856; padding: 2px; } #quiz .card.incorrect { background-color: #faa; } #quiz .solution { overflow-y: auto; padding: 20px 5px; } #quiz .row .card { position: relative; vertical-align: middle; } #quiz .row .card svg { cursor: pointer; position: absolute; right: 5px; top: 5px; visibility: hidden; } #quiz .row .card:hover svg { visibility: visible; } #quiz .row svg.plus { cursor: pointer; vertical-align: middle; } #quiz .arrow { height: 0; width: 0; } #quiz .arrow svg { cursor: pointer; left: calc(16.667vw - 26px); position: relative; top: -10px; }