@import url('https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

body {
    font-family: "EB Garamond", serif;
}

h1 {
    font-family: "Henny Penny", sans-serif;
    text-shadow: 2px 2px 4px silver;
}

form.fancy-form {
    background-color: #f8faff;
    border: medium solid indigo;
    max-width: 50ch;
    overflow: auto;
    width: 100%;
}

form.fancy-form div {
    margin: 1em;
}

form.fancy-form label:has(+ :is(input, select, textarea)[required])::after {
    color: crimson;
    content: "*";
    font-size: small;
    vertical-align: super;
}

form.fancy-form input[type=checkbox]:not(:checked) + fieldset.conditional {
    display: none;
}

form.fancy-form label {
    display: block;
    margin-bottom: 0.25em;
}

form.fancy-form :is(input, select, textarea) {
    border: medium solid darkslateblue;
    border-radius: 0.25em;
    box-sizing: border-box;
    padding: 0.5em;
    width: 100%;
}

form.fancy-form textarea {
    resize: none;
}

form.fancy-form > div:has(button[type=submit]) {
    text-align: center;
}

form.fancy-form button[type=submit] {
    background-color: darkslateblue;
    border: none;
    border-radius: 0.5em;
    color: white;
    cursor: pointer;
    padding: 0.5em 1.5em;
    transition: background-color 0.3s ease;
}

form.fancy-form button[type=submit]:hover {
    background-color: forestgreen;
}

form.fancy-form input[type=email]:invalid {
    background-color: tomato;
    color: white;
}

form.fancy-form :focus {
    outline: thick solid forestgreen;
}