.OK  { background-color: #9ACD32 !important; }
.ERR { background-color: #FF6347 !important; }

.quiz { grid-template-columns: repeat(1, 1fr); }
.qns, .opts { padding-top: 10px; }
.qns, .opts { width: 100%; }
.qns  { height: calc(70vh - 65px); }
#qns { padding-left: 10px; }
#qns, #opts { padding-right: 10px; }
.qns *, .opts *, .quiz-header { font-family: 'Fira Sans'; }
.quiz-header { font-size: 18px; font-weight: 700; }
.opts { height: calc(30vh - 10px); position: relative; }
.btns { position: relative; height: 35px; background-color: var(--lylclr); }
.btn { padding: 5px; margin: 5px; font-size: 12px; color: var(--wbkclr); background-color: var(--lblclr); cursor: pointer; height: 15px; font-family: 'Mononoki'; }
.opts li { list-style-type: none; }
.opts li, .opts ul { margin: 0; padding: 0; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; }
.rbtn, .gbtn { float: right; font-size: 12px; padding: 5px; margin-right: 15px; color: var(--wbkclr); }
.rbtn { cursor: pointer; background-color: var(--lblclr); }
.gbtn { background-color: var(--lgnclr); }
#inner { font-size: 16px; }

@media (min-width: 900px) {
  .quiz { grid-template-columns: repeat(2, 1fr); }
  .qns, .opts { overflow: hidden; width: 50%; height: calc(100vh - 65px); }
  .opts { position: absolute; right: 0; top: 0; }
  .btn, .btns, .rbtn, .gbtn { font-size: 16px; }
  .quiz-header { font-size: 22px; }
  #inner { font-size: 20px; }
}