/* variables */
:root {
    --valid: green;
	--valid-dark: darkgreen;
	--invalid: red;
    --light: white;
    --dark: black;
}

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

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    width: 90%;
    margin: auto;
    padding: 1em;
}
h1, h2, h3 {
    padding-bottom: .5em;
}
form, input, select, textarea {
    width: 100%;
}
input, select, button, textarea {
    font-size: inherit;
    padding: .25em;
    margin-bottom: .5em;
    border-radius: 5px;
}
label {
    display: block;
    padding-bottom: .25em;
}
textarea {
    font-family: inherit;
    height: 8em;
}
input:required {
    border: 2px solid var(--invalid);
}
input:valid {
    border: 2px solid var(--valid);
}
legend {
    font-size: 120%;
    font-weight: bold;
}
fieldset {
    padding: .5em 1em;
    margin-bottom: 1em;
}
.button-base {
    cursor: pointer;
    width: 8em;
    padding: .5em;
    font-weight: bold;
    &:hover {
        color: var(--dark);
        background-color: var(--light);
    }
}
.button-submit {
    color: var(--light);
    background-color: var(--valid-dark);
    &:hover { border-color: var(--valid-dark); }
}
.button-danger {
    color: var(--light);
    background-color: var(--invalid);
    &:hover { border-color: var(--invalid); }
}