:root {
    --accent-color: #42a2da;
    --accent-color2: #d25f1b;
    --accent-color3: #D71921;
    --accent-color4: #18346A;

    --link-color: #2F5AAE;
    --link-hover-color: #42a2da;

    --link-color-on-dark: #ffffff;
    --link-hover-color-on-dark: #42a2da;

    
    --button-color1: #fff;
    --button-borderColor1: #42a2da;
    --button-bgColor1: #42a2da;
    --buttonHover-color1: #fff;
    --buttonHover-borderColor1: #174354;
    --buttonHover-bgColor1: #174354;

    --button-color2: #fff;
    --button-borderColor2: #174354;
    --button-bgColor2: #174354;
    --buttonHover-color2: #174354;
    --buttonHover-borderColor2: #174354;
    --buttonHover-bgColor2: transparent;

    /*family*/
    --heading-family: "Blinker";
    --body-family: "Lato";

    /*font size*/
    --body-font-size: 16px;
    --body-font-size-small: 14px;
    --body-font-size-large: 20px;
    --body-color: #102B41;
    --body-color-on-dark: #ffffff;

    --heading-1: clamp(40px, calc((58 - 40) / (1600 - 600) * (100vw - 600px) + 40px), 58px);
    --heading-2: clamp(40px, calc((44 - 40) / (1600 - 600) * (100vw - 600px) + 40px), 44px);
    --heading-3: 30px;
    --heading-4: 20px;
    --heading-5: 17px;
    --heading-6: 13px;
    --heading-color: #174354;
    --heading-color-on-dark: #ffffff;

    --menu-font-size: var(--body-font-size);

    --headerBgColor: #800000;
    --footerBgColor: #004356;


    /* Custom */
    --fontFamily-Lato: "Lato";
    --fontFamily-Blinker: "Blinker";

    --sectionSpace: 100px;
}