*, html {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --afstand-rand: 1.4rem;
    --afstand-klein: 0.4rem;
    --afstand-mini: 0rem;
    --kleur-achtergrond: #f3efec;
    --kleur-tekst: rgb(25, 25, 25);
    --font-tekst: "Italiana", sans-serif;
    --font-schrift: "Rouge Script", cursive;
    --font-josefin: "Josefin Sans", sans-serif;
    --font-montserrat:  "Montserrat", sans-serif;
  }


main {
    height: calc(100svh - 1.4rem - 1.4rem);
    padding: calc(var(--afstand-rand) / 2);
    width: calc(100vw - 1.4rem - 1.4rem);
    border: 1px solid black;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

section {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
section>*:not(label) {
    text-align: center;
}

label {
    margin-top: 0.4rem;
    margin-bottom: 0.2rem;
    text-align: left;
    font-size: 1rem;
}

form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
}

input[type = "text"], input[type = "email"], button {
    height: 1.8rem;
    margin-bottom: 0.4rem;
    background-color: var(--kleur-achtergrond);
    border: 1px solid var(--kleur-tekst);
    padding: var(--afstand-klein);
}

textarea {
    width: 100%;
    margin-bottom: 0.4rem;    
    background-color: var(--kleur-achtergrond);
    border: 1px solid var(--kleur-tekst);
    padding: var(--afstand-klein);
    resize: vertical;
}

input[type="radio"], input[type="checkbox"] {
    appearance: none;        /* remove default OS styling */
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--kleur-tekst);
    border-radius: 50%;
    background-color: var(--kleur-achtergrond); /* unselected background */
    position: relative;
    margin-right: 0.4rem;
}


input[type="radio"]:checked::after, input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    background-color: var(--kleur-tekst); /* selected background */
    border-radius: 50%;
}

input[type="checkbox"]:checked::after, input[type="checkbox"] {
    border-radius: 0;
}