@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Outfit:wght@100..900&display=swap');

:root {

    /* variables */
    --bg-body: skyblue;
    --bg-header: tan;
    --clr-text1: #234567;
    --clr-light1: #fffdfd;
    --clr-light2: #cbd2d0;
    --clr-accent1: #f0e100;
    --clr-accent2: #f26430;
    --clr-accent3: lime;
    --clr-dark1: #0b3c49;
    --clr-dark2: #731963;
    --font-primary: "Outfit", sans-serif;
    --font-headline: "Afacad Flux", sans-serif;
    --font-footnote: verdana, sans-serif;

}

body {
    min-height: 100vh; /* 100% of the viewport height */
    background-color: var(--bg-body);
    color: var(--clr-text1);
    font-family: var(--font-primary);
}

header {
    background-color: var(--bg-header);
}

h1, h2 {
    font-family: var(--font-headline);
    margin: 8px;
}