/* global variables */
:root {
    --fontsize: calc(0.3125rem + ((1vw - 3.6px) * 0.4965));
}

:root {
    /* add fluid rem function */
    font-size: max(37.5%, min(var(--fontsize), 62.5%));
    /* RWD */
    --global-width: min(calc(320px + ((1vw - 3.6px) * 100)), 135.5rem);

    /* colors */
    --color-white: #fff;
    --color-blue: #047AEA;
    --color-darkblue: #080D29;
    --color-navy: #070D28;
    --color-darkgray: #475059;
    --color-gray: #F3F4F7;
    --color-lightgray: #111E600D;

    /* fonts */
    --font-family-main: "Montserrat", sans-serif;
    --font-size-12: max(12px, 1.2rem);
    --font-size-13: max(13px, 1.3rem);
    --font-size-14: max(14px, 1.4rem);
    --font-size-15: max(15px, 1.5rem);
    --font-size-16: max(16px, 1.6rem);
    --font-size-22: max(22px, 2.2rem);
    --font-size-24: max(24px, 2.4rem);
    --font-size-36: max(36px, 3.6rem);
    --font-size-42: max(42px, 4.2rem);
    --font-size-56: max(56px, 5.6rem);
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    font-family: var(--font-family-main);
}

@media(min-width: 2048px) {
    :root {
        font-size: 85%;
    }
}

@media(min-width: 3840px) {
    :root {
        font-size: 140%;
    }
}


/* colors */
.color-white {
    color: var(--color-white);
}

.color-blue {
    color: var(--color-blue);
}

.color-darkblue {
    color: var(--color-darkblue);
}

.color-navy {
    color: var(--color-navy);
}

.color-darkgray {
    color: var(--color-darkgray);
}

.color-gray {
    color: var(--color-gray);
}

.color-lightgray {
    color: var(--color-lightgray);
}


/* backgrounds */
.background-white {
    background-color: var(--color-white);
}

.background-blue {
    background-color: var(--color-blue);
}

.background-darkblue {
    background-color: var(--color-darkblue);
}

.background-navy {
    background-color: var(--color-navy);
}

.background-darkgray {
    background-color: var(--color-darkgray);
}

.background-gray {
    background-color: var(--color-gray);
}

.background-lightgray {
    background-color: var(--color-lightgray);
}


/* fonts */
.font-size-12 {
    font-size: var(--font-size-12);
}

.font-size-13 {
    font-size: var(--font-size-13);
}

.font-size-14 {
    font-size: var(--font-size-14);
}

.font-size-15 {
    font-size: var(--font-size-15);
}

.font-size-16 {
    font-size: var(--font-size-16);
}

.font-size-22 {
    font-size: var(--font-size-22);
}

.font-size-24 {
    font-size: var(--font-size-24);
}

.font-size-42 {
    font-size: var(--font-size-42);
}

.font-size-56 {
    font-size: var(--font-size-56);
}

.font-weight-light {
    font-weight: var(--font-weight-light);
}

.font-weight-regular {
    font-weight: var(--font-weight-regular);
}

.font-weight-medium {
    font-weight: var(--font-weight-medium);
}

.font-weight-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-weight-bold {
    font-weight: var(--font-weight-bold);
}

.font-weight-extrabold {
    font-weight: var(--font-weight-extrabold);
}

.cont {
    width: var(--global-width);
    max-width: 96%;
}
@media screen and (max-width: 768px) {
    .cont {
        width: 86%;
    }
}
a {
    text-decoration: none;
}