* {
    box-sizing: border-box;
}

html {
    font-family: helvetica, sans-serif;
}

html,
body,
header,
main,
footer {
    margin: 0;
    padding: 0;
}

header,
main,
footer {
    padding: 1rem 1rem 0;
}

header h1 {
    margin: 0
}

main h2:first-child {
    margin-block-start: 0;
}

footer {
    margin-block-start: 1rem;
    border-block-start: 2px solid black;
    font-size: smaller;
    display: flex;
}
footer > * {
    margin-block-start: 0;
}
footer > p:last-child {
    flex: 12rem 0 0;
    text-align: right;
}
a:link,
a:visited {
    color: blue;
    text-decoration: none;
}

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

ul li {
    margin-block-end: 0.5rem;
}
code {
    background-color: rgb(240,240,240);
    padding: 0.25em;
    color: rgb(175,0,0);
}
/* =========================================
   === form styles 
   ========================================= */
form {
    width: 100%;
   max-width: 30rem;
}

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

form input,
form textarea {
    width: 100%
}

form textarea {
    height: 5rem;
}

form input[type=checkbox],
form input[type=radio] {
    display: inline;
    width: auto;
    margin-block-end: 0.5rem;
    margin-inline-end: 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-block-end: 0;
}

form fieldset {
    margin-block-end: 1rem;
}

form button[type=submit] {
    font-size: 1rem;
    padding: 0.5rem;
    border-radius: 1rem;
    transition: filter 200ms linear;
}
form button[type=submit]:hover {
    filter: brightness(90%);

}
/* === END form styles 
   ========================================= */


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

.error.visible {
    display: block;
}
/* === END - DIY form validation styles
   ========================================= */