:root {
    --error-color: red;
    --success-color: green;
}


/* Very unwide page */
.container {
    max-width: 40rem;
}

.quiz-input {
    max-width: 15rem;
}


/* Common elements */
details * {
    box-sizing: border-box;
}

label, summary b {
    cursor: pointer;
}


/* Input validation */
.success-message {
    color: var(--success-color);
}

.error-message {
    color: var(--error-color);
}

.success-box {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.error-box {
    background-color: var(--error-color);
    border-color: var(--error-color);
}

input[data-entered=true]:valid {
    border-color: var(--success-color);
    color: var(--success-color);
}

input[data-entered=true]:invalid {
    border-color: var(--error-color);
    color: var(--error-color);
}