/* @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400;6..12,700&display=swap'); */
@import url('https://use.typekit.net/mbp2iux.css');

:root {
    --background: 196.46deg 100% 46.47%;
    --foreground: 0deg 0% 100%;
    --card: 0 0% 100%;
    --card-foreground: 230deg 8.82% 13.33%;
    --primary: 24deg 100% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 207.5deg 100% 9.41%;
    --secondary-foreground: 0 0% 100%;
    --cta: 24deg 100% 50%;
    --cta-foreground: 0 0% 100%;
    --border: 216deg 14.71% 86.67%;
    --input: 216deg 14.71% 86.67%;
    --radius: .375rem;

    --text-lg-size: 1rem;
    --text-xl-size: 1.25rem;
    --text-2xl-size: 1.5rem;
    --text-3xl-size: 1.75rem;
    --text-4xl-size: 2rem;
    --text-5xl-size: 2.25rem;
    --text-6xl-size: 2.5rem;
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --card: 207.5deg 100% 9.41%;
        --primary: 196.46deg 100% 46.47%;
        --primary-foreground: 0 0% 100%;
        --secondary: 207.5deg 100% 9.41%;
        --secondary-foreground: 0 0% 100%;    
        --cta: 24deg 100% 50%;
        --cta-foreground: 0 0% 100%;
        --input: 207.5deg 40% 29.41%;
        --border: 207.5deg 40% 29.41%;
    }
}

body {
    line-height: 1.33;
}

header {
    --card: var(--secondary);
    --card-foreground: var(--secondary-foreground);
}

.site-background {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -10;
    overflow: hidden;
    background: url(../Images/Blauw-Blok-VRIJ-860px-PSD.jpg);
    background-size: cover;
    background-position: right;
}

@media (min-width: 481px) {
    .site-background {
        background-image: url(../Images/Blauw-Blok-VRIJ-1400px-PSD.jpg);
    }
}

@media (min-width: 1024px) {
    .site-background {
        background-image: url(../Images/Blauw-Blok-VRIJ-2200px-PSD.jpg);
    }
}

@media (prefers-color-scheme: dark) {
    .site-background {
        background-image: url(../Images/Blauw-Blok-VRIJ-860px-PSD-dark.jpg);
    }
}

@media (prefers-color-scheme: dark) and (min-width: 481px) {
    .site-background {
        background-image: url(../Images/Blauw-Blok-VRIJ-1400px-PSD-dark.jpg);
    }
}

@media (prefers-color-scheme: dark) and (min-width: 1024px) {
    .site-background {
        background-image: url(../Images/Blauw-Blok-VRIJ-2200px-PSD-dark.jpg);
    }
}