@import 'theme.css';
@import 'sections.css';
@import 'snippets/sitebutton.css';
@import 'snippets/faqlist.css';
@import 'snippets/speclist.css';
@import 'snippets/hero.css';
@import 'snippets/card.css';
@import 'snippets/siteheader.css';
@import 'snippets/sectionheader.css';
@import 'snippets/slider.css';
@import 'snippets/footer.css';
@import 'helpers/cursor.css';

:root {
    --unit: 16px;
    --max-width: 1336px;
    --vertical-margin-large: 64px;
    --vertical-margin-medium: 36px;
    --vertical-margin-small: 36px;
}

@media screen and (min-width: 800px) {
    :root {
        --vertical-margin-large: 96px;
        --vertical-margin-medium: 72px;
    }
}

body {
    background-color: var(--primaryBackgroundColor);
    color: var(--primaryTextColor);
    font-family: var(--fontFamily);
    font-size: var(--bodySizeOne);
    font-weight: 300;
    line-height: calc(var(--bodySizeOne) + var(--bodyLineHeightOne));
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--vertical-margin-medium);

    h1, h2, h3, h4, h5, h6 {
        line-height: 110%;
    }

    h1 {
        font-size: var(--headlineExtraLargeMobile);
        font-weight: var(--headlineExtraLargeWeight);

        @media screen and (min-width: 600px) {
            font-size: var(--headlineExtraLarge);
        }
    }

    h2 {
        font-size: var(--headlineLargeMobile);
        font-weight: var(--headlineLargeWeight);

        @media screen and (min-width: 600px) {
            font-size: var(--headlineLarge);
        }
    }

    h3 {
        font-size: var(--headlineMediumMobile);
        font-weight: var(--headlineMediumWeight);

        @media screen and (min-width: 600px) {
            font-size: var(--headlineMedium);
        }
    }

    h4 {
        font-size: var(--headlineSmallMobile);
        font-weight: var(--headlineSmallWeight);

        @media screen and (min-width: 600px) {
            font-size: var(--headlineSmall);
        }
    }

    h5 {
        font-size: var(--headlineExtraSmallMobile);
        font-weight: var(--headlineExtraSmallWeight);

        @media screen and (min-width: 600px) {
            font-size: var(--headlineExtraSmall);
        }
    }

    img {
        width: 100%;
    }
}