:root {
    --spacing: 24px;
    --borderRadius: 8px;
    --showRomaji: none;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background: #333;
    color: #fff;
    font-family: "Roboto", sans-serif;
}

body {
    margin: var(--spacing);
}


/* --> */

header {

}

header div {
    margin-bottom: var(--spacing);
}

header input {
    width: calc(100% - 32px);
    height: 32px;
    padding: 0 8px;
    line-height: 32px;
}

header div:first-child button {
    width: 32px;
    height: 32px;
}

header select {
    width: 100%;
    padding: var(--borderRadius);
    border-radius: var(--borderRadius) var(--borderRadius) 0 0;
}


header select {
    appearance: base-select;
    height: inherit;
}

header select option {
    margin-bottom: 12px;
}

header select option:last-of-type {
    margin-bottom: 0;
}

header div:last-child button {
    width: 50%;
    padding: var(--borderRadius);
}


/* --> */

.quiz-container {
    display: grid;
    grid-template-rows: auto min-content;
    gap: 24px;
    min-height: calc(100dvh - 48px);
}


/* --> */

.table {
    display: table;
    width: 100%;
}

.table div {
    display: table-row;
}

.table div:nth-child(even) {
    background-color: #666;
}

.table div span {
    display: table-cell;
    padding: 8px;
    line-height: 32px;
}


/* --> */

.settings {
    text-align: center;
}

/* --> */

.quiz {
    text-align: center;
}

.quiz p {
    margin-bottom: var(--spacing); 
}

.quiz div {
    cursor: pointer;
    margin-bottom: var(--spacing);
    padding: var(--borderRadius);
    border: 2px solid #666;
    border-radius: var(--borderRadius);
    transition: all 0.6s ease-in-out;
}

.quiz div span:first-child {
    font-size: 1.2em;
    font-weight: bold;
}

.quiz div span:last-child {
    display: var(--showRomaji);
}

.quiz[data-answer="yes"] div[data-correct] {
    background-color: rgba(0, 255, 0, 0.4);
    border: 2px solid green;
}

.quiz .wrong {
    background-color: rgba(255, 0, 0, 0.4);
    border: 2px solid red;
}