* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    padding: 1rem 5%;
    font-family: helvetica, sans-serif;
}

/* form styles */
form {
    width: 30rem;
}

form label,
form button,
form textarea,
form input {
    display: block;
    margin-bottom: 1rem;
}

form input,
form textarea {
    width: 100%
}

form textarea {
    height: 5rem;
}

form input[type=checkbox],
form input[type=radio] {
    display: inline;
    width: auto;
    margin-bottom: 0.5rem;
}

form input[type=text],
form input[type=date],
form input[type=email],
form input[type=number],
form textarea {
    font-size: 1.25rem;
}

form label:has(input[type=radio]),
form label:has(input[type=checkbox]) {
    margin-bottom: 0;
}

form fieldset {
    margin-bottom: 1rem;
}

form button[type=submit] {
    font-size: 1rem;
    padding: 0.5rem;
    border-radius: 1rem;
}

footer {
    margin-top: 2rem;
    border-top: 2px solid black;
}

a:link,
a:visited {
    color: blue;
    text-decoration: none;
}

a:hover,
a:active {
    text-decoration: underline;
}

ul li {
    margin-bottom: 0.5rem;
}

/* for DIY styles */
.error {
    border: thin solid red;
    background-color: rgb(255, 230, 230);
    padding: 1rem;
    display: none;
}

.error.visible {
    display: block;
}