:root {
    --boldr-columns-width: 69px;
    --boldr-spacers-width: 30px;

    --boldr-primary-color: #294072;
    --boldr-highlight-color: #DCEDC6;

    --boldr-spacing-flow: 20px;
    --boldr-spacing-small: 30px;
    --boldr-spacing-medium: 50px;
    --boldr-spacing-large: 100px;

    --boldr-text-font-size: 16px;
    --boldr-text-font-family: 'Now Alt';
    --boldr-text-font-weight: 400;
    --boldr-text-font-style: normal;
    --boldr-text-color: var(--boldr-primary-color);
    --boldr-text-line-height: 1.5;
    --boldr-secondary-text-color: #A7B3BA;

    --boldr-heading-font-size: 100px;
    --boldr-heading-font-family: 'Now Alt';
    --boldr-heading-font-weight: 500;
    --boldr-heading-font-style: normal;

    --boldr-subheading-font-family: 'Now Alt';
    --boldr-subheading-font-weight: normal;
    --boldr-subheading-font-style: normal;

    --boldr-button-font-family: var(--boldr-text-font-family);
    --boldr-button-font-weight: 400;
    --boldr-button-font-style: normal;
    --boldr-button-font-size: 14px;
    --boldr-button-large-font-size: 20px;
    --boldr-button-light-color: var(--boldr-text-color);
    --boldr-button-padding: 10px 25px 12px 25px;
    --boldr-button-large-padding: 18px 40px;
}

@media only screen and (max-width: 1260px) {
    :root {
        --boldr-columns-width: calc(100vw / 18.2608);
        --boldr-spacers-width: calc(100vw / 42);

        --boldr-spacing-flow: calc(100vw / 63);
        --boldr-spacing-small: calc(100vw / 42);
        --boldr-spacing-medium: calc(100vw / 25.2);
        --boldr-spacing-large: calc(100vw / 12.6);


        --boldr-heading-font-size: calc(100vw / 12.6);
    }
}

@media only screen and (max-width: 630px) {
    :root {
        --boldr-heading-font-size: 50px;
    }
}