fieldset {
    margin-top: .75em;
    padding: .5em 1em;
    border-radius: 5px;
    & legend {
        color: maroon;
        font-weight: bold;
    }
}

p {
    margin-bottom: 0.2em;
}
label {
    display: block;
    margin-bottom: 0.2em;
}
input, select, textarea, button { 
    font-size: inherit; 
    padding: .2em; 
    margin-bottom: .5em; 
    border-radius: 5px;
}

input, select, textarea { 
    width: 100%;
} 
textarea {
    font-family: inherit; 
    height: 5em;
}

.radio-group {
    padding: .2em; 
    & label, & input {    
        width: fit-content;
        display: inline;
        padding: .2em; 
    }
}

input {
    &:invalid {
        border: 2px solid red;
    }
    &:valid {
        border: 2px solid green;
    }
}

/* asterisks for all required fields */
.required::after {
    content: " *";
    color: red;
    font-weight: bold;
}

/* buttons */
.button {
    font-size: inherit;
    font-weight: bold;
    width: 8em;
    padding: .5em;
    border-radius: 10px;
    margin: 0.5em;
    &:hover {
        color: black;
        background-color: white;
        cursor: pointer;
    }
}

.button-submit {
    color: white;
    background-color: steelblue;
}

.button-danger {
    color: white;
    background-color: maroon;
}