* {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    /* Kleuren */

    /* Witte achtergrondkleur */
    --primary-background-color: #ffffff;
    /* Zwarte achtergrondkleur */
    --secondary-background-color: #000;
    /* Transparante achtergrondkleur */
    --third-background-color: #00000000;
    /* Gele highlightkleur */
    --primary-highlight-color: #FACC15;
    /* Roze highlightkleur */
    --secondary-highlight-color: #D759A4;
    /* Blauwe highlightkleur */
    --third-highlight-color: #57B3C9;

    /* Tekstkleur zwart */
    --primary-text-color: #000;
    /* Tekstkleur wit */
    --secondary-text-color: #ffffff;

    /* Error kleur rood */
    --error-color: #ff0000;
    /* Check kleur groen */
    --error-color: #22C55E;

    /* Fonts */
    --font-header: 'American-Typewriter-Bold', sans-serif;
    --font-paragraph: 'American-Typewriter-Regular', sans-serif;

    /* Decoratie */

    /* Voor kleine ronde vormen */
    --small-rounded: 4px;
    /* Voor medium ronde vormen */
    --medium-rounded: 16px;
    /* Voor grote ronde vormen */
    --big-rounded: 100px;
}

/* ---------------------------------- States algemeen -------------------------------- */

*:focus-visible {
    outline: 3px dashed var(--primary-highlight-color);
    outline-offset: 4px;
}

/* ---------------------------------- Typografie -------------------------------- */

@font-face {
    font-family: 'American-Typewriter-Regular';
    src: url(../fonts/american-typewriter-regular.ttf) format('truetype');
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: 'American-Typewriter-Bold';
    src: url(../fonts/american-typewriter-bold.ttf) format('truetype');
    font-style: normal;
    font-weight: 800;
}

/* ---------------------------------- Classes kleuren -------------------------------- */

/* Witte achtergrond */
.primary-background {
    background-color: var(--primary-background-color);
}
 
/* Zwarte achtergrond */
.secondary-background {
    background-color: var(--secondary-background-color);
}

/* Gele highlight */
.primary-highlight {
    background-color: var(--primary-highlight-color);
}

/* Roze highlight */
.secondary-highlight {
    background-color: var(--secondary-highlight-color);
}

/* Roze highlight */
.third-highlight {
    background-color: var(--third-highlight-color);
}


/* Zwarte tekst */
.primary-tekst {
    color: var(--primary-text-color);
}

/* Witte tekst */
.secondary-tekst {
    color: var(--secondary-text-color);
}

/* Rood error */
.error-red {
    background-color: var(--secondary-text-color);
}

/* Groen check */
.check-green {
    background-color: var(--error-color);
}

/* ---------------------------------- Tekst elementen -------------------------------- */

h1,
h2,
h3,
h4,
h5,
H6 {
    font-family: var(--font-header);
    color: var(--primary-text-color);
    margin: 0em 0em 1em 0em;
    padding: 0;
}

h1 {
    font-size: clamp(2.1875rem, 1.9022rem + 1.3043vw, 2.725rem);
    line-height: 115%;
}

h2 {
    font-size: clamp(1.375rem, 1.2054rem + 0.7143vw, 1.875rem);
    line-height: 110%;
}

h3 {
   font-size: clamp(1.125rem, 1.0826rem + 0.1786vw, 1.25rem);
    line-height: 115%;
}

h4 {
    font-size: clamp(1.25rem, 1.0846rem + 0.8824vw, 2.1875rem);
    line-height: 118%;
}

h5 {
    font-size: clamp(1.125rem, 0.9926rem + 0.7059vw, 1.875rem);
    line-height: 118%;
}

h6 {
    font-size: clamp(1rem, 0.9007rem + 0.5294vw, 1.5625rem);
    line-height: 118%;
}

/* Paragraaf */
p {
    font-size: clamp(1rem, 1rem + 0vw, 1rem);
    line-height: 180%;
    font-family: var(--font-paragraph);
}

/* ---------------------------------- Pricing elementen -------------------------------- */

.price {
    display: flex;
    flex-direction: row;
}

.price-left {
    font-size: 60px;
}

.price-right {
    font-size: 30px;
    translate: -10px -10px;
}

.price-left-small {
    font-size: 36px;
}

.price-right-small {
    font-size: 20px;
    translate: -8px -5px;
}

/* ---------------------------------- List elementen -------------------------------- */

ul {
    font-size: clamp(1rem, 1rem + 0vw, 1rem);
    line-height: 140%;
    font-family: var(--font-paragraph);
}

ol {
    font-size: clamp(1rem, 1rem + 0vw, 1rem);
    line-height: 140%;
    font-family: var(--font-paragraph);
}

/* ---------------------------------- Formulier elementen -------------------------------- */

form {
    background-color: var(--primary-background-color);
    padding: 2em;
    border-radius: var(--big-rounded);
    width: 12em;
}

label {
    font-size: clamp(1rem, 1rem + 0vw, 1rem);
    line-height: 150%;
    font-family: var(--font-paragraph);
    display: block;
}

input {
    background-color: var(--primary-background-color);
    border: solid 2px var(--secondary-background-color);
    border-radius: var(--big-rounded);
    padding: .8em 1em;
    color: var(--primary-text-color);

    font-size: clamp(1rem, 1rem + 0vw, 1rem);
    line-height: 1.5em;
    font-family: var(--font-paragraph);

}

/* Verzenden knop formulier */
input[type="submit"] {
    background-color: var(--secondary-background-color);
    color: white;
    font-size: clamp(1rem, 1rem + 0vw, 1rem);
    padding: 0.7em 1.4em;
    border: none;
    border-radius: var(--rounded);
    cursor: pointer;
    transition: transform .2s ease-in-out;
}

input[type="submit"]:hover {
    background-color: var(--primary-highlight-color);
    transition: transform .2s ease-in-out;
    transform: scale(1.05);
}

input:user-invalid {
    border: 2px solid red;
    background-color: #ffe6e6;
}

fieldset label {
    align-items: center;
    display: flex;
}

legend {
    font-size: clamp(1rem, 1rem + 0vw, 1rem);
    line-height: 1.5em;
    font-family: var(--font-paragraph);
    display: block;
    margin-bottom: 0.8em;
}

/* ---------------------------------- Knoppen -------------------------------- */

/* Knoppen */
#knoppen {
    padding: 3em 0em 3em 0em;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

#knoppen p {
    margin: -0.9em 0em 1em 0em;
}

/* Linkje */
a {
    font-size: clamp(1rem, 1rem + 0vw, 1rem);
    line-height: 1.5em;
    font-family: var(--font-paragraph);
    color: var(--primary-text-color);
    transition: transform ease-in-out .2s;
}

a:hover {
    color: var(--secondary-highlight-color);
    transition: ease-in-out .2s;
}

/* Knop zwart */
.btn-zwart {
    align-self: baseline;
    font-family: var(--font-header);
    background-color: var(--secondary-background-color);
    color: var(--secondary-text-color);
    padding: 0.9em 1.9em;
    border-radius: var(--big-rounded);
    text-decoration: none;
    gap: 0.5em;
    display: inline-flex;
    transition: 0.2s ease-in-out;
    font-size: clamp(1rem, 1rem + 0vw, 1rem);
}

.btn-zwart:hover {
    background-color: var(--primary-highlight-color);
    color: var(--primary-text-color);
    transition: ease-in-out 0.2s;
}

/* Knop transparant */
.btn-transparant {
    align-self: baseline;
    font-family: var(--font-header);
    background-color: var(--third-background-color);
    color: var(--primary-text-color);
    padding: 0.9em 1.9em;
    border: 2px solid var(--secondary-background-color);
    border-radius: var(--big-rounded);
    text-decoration: none;
    gap: 0.5em;
    display: inline-flex;
    transition: 0.2s ease-in-out;
    font-size: clamp(1rem, 1rem + 0vw, 1rem);
}

.btn-transparant:hover {
    background-color: var(--secondary-background-color);
    color: var(--secondary-text-color);
    transition: ease-in-out .2s;
}

/* Knop verzenden */
.btn-verzenden {
    align-self: baseline;
    font-family: var(--font-header);
    background-color: var(--primary-highlight-color);
    color: var(--primary-text-color);
    padding: 0.9em 1.9em;
    border: 2px solid var(--primary-highlight-color);
    border-radius: var(--big-rounded);
    text-decoration: none;
    gap: 0.5em;
    display: inline-flex;
    transition: 0.2s ease-in-out;
    font-size: clamp(1rem, 1rem + 0vw, 1rem);
    cursor: pointer;
}

.btn-verzenden:hover {
    background-color: var(--secondary-background-color);
    color: var(--secondary-text-color);
    border: 2px solid var(--secondary-background-color);
    transition: ease-in-out .2s;
}

/* ---------------------------------- Width van alle contentblokken -------------------------------- */

.width-top-btm {
    padding: 3.5em 1em 3.5em 1em;

    @media screen and (min-width: 920px) {
        padding: 4.5em 3em 4.5em 3em;
    }

    @media screen and (min-width: 1120px) {
        padding: 5em 7em 5em 7em;
    }

     @media screen and (min-width: 1600px) {
         padding: 4em 4em 4em 4em;
     }
}

/* Width met padding onder */
.width-btm {
    padding: 0em 1em 3.5em 1em;

    @media screen and (min-width: 920px) {
        padding: 0em 3em 4.5em 3em;
    }

    @media screen and (min-width: 1120px) {
        padding: 0em 7em 5em 7em;
    }

    @media screen and (min-width: 1600px) {
        padding: 0em 4em 4em 4em;
    }
}

/* Width met padding boven */
.width-top {
    padding: 3.5em 1em 0em 1em;

    @media screen and (min-width: 920px) {
        padding: 4.5em 3em 0em 3em;
    }

    @media screen and (min-width: 1120px) {
        padding: 5em 7em 0em 7em;
    }

    @media screen and (min-width: 1600px) {
        padding: 4em 4em 0em 4em;
    }
}