:root {
	--input-bg: light-dark(#eee, #333);
	--input-fg: light-dark(#000, #eee);
	--input-border: light-dark(#bbb, #666);

	--quiz-button-bg: light-dark(#777, #ccc);
	--quiz-button-fg: light-dark(#fff, #000);
	--quiz-button-hover-bg: light-dark(#555, #eee);
	--quiz-button-hover-fg: light-dark(#fff, #000);
	--quiz-button-active-bg: light-dark(#444, #fff);
	--quiz-button-active-fg: light-dark(#fff, #000);

    --radiocheck-bg: light-dark(#fff, #222);
    --radiocheck-border: light-dark(#999, #888);
    --radiocheck-checked-bg: light-dark(#fff, #222);
    --radiocheck-checked-border: light-dark(#666, #ddd);
	--radiocheck-hover-bg: light-dark(#ddd, #444);

}

input, select, optgroup, option, button {
	font-size: 1rem;
	vertical-align: middle;
}

select {
	background-color: var(--input-bg);
	color: var(--input-fg);
	border: 0;
	display: block;
	width: 100%;
	height: 2em;
	margin: 0.25em 0;
	padding-left: 0.5em;
	/* Safari */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

label {
	line-height: 2;
	padding: 0;
	background-color: var(--input-bg);
	display: block;
	margin: 0.25em 0;
}

input[type=submit], button {
	border: 0;
	background-color: var(--quiz-button-bg);
	color: var(--quiz-button-fg);
	padding: 0.5em 1.5em;
	margin: 1em 0.75em 1em 0;
	cursor: pointer;
	border-radius: 0.25em;
}
input[type=submit]:hover, button:hover {
	background-color: var(--quiz-button-hover-bg);
	color: var(--quiz-button-hover-fg);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}
input[type=submit]:active, button:active {
	background-color: var(--quiz-button-active-bg);
	color: var(--quiz-button-active-fg);
	text-decoration-thickness: 3px;
	transform: scale(0.98);
}


.radiocheck-radio, .radiocheck-checkbox {
    display: none;
}

.radiocheck-radio + label, .radiocheck-checkbox + label {
    position: relative;
    padding-left: 2em;
    cursor: pointer;
}

.radiocheck-radio + label::before, .radiocheck-checkbox + label::before {
    content: '';
    position: absolute;
    left: 0.5em;
    top: 50%;
	transform: translateY(-50%);
    width: 0.8em;
    height: 0.8em;
    background-color: var(--radiocheck-bg);
    border: 0.1em solid var(--radiocheck-border);
}

.radiocheck-radio + label::before {
    border-radius: 0.8em;
}

.radiocheck-checkbox + label::before {
    border-radius: 0.15em;
}

.radiocheck-radio:checked + label::before, .radiocheck-checkbox:checked + label::before {
    width: 0.3em;
    height: 0.3em;
    background-color: var(--radiocheck-checked-bg);
    border: 0.35em solid var(--radiocheck-checked-border);
}

.radiocheck-radio:hover + label::before, .radiocheck-checkbox:hover + label::before {
    background-color: var(--radiocheck-hover-bg);
}


.quiz-answers {
	display: none;
}

.quiz-answers p {
	margin: 0.5em 0;
}

#result {
	display: block;
	margin: 1em 0;
}
#result:target {
	display: none;
}
#result:target + #answers {
	display: block;
}