/* Fluid typography system to keep font sizes consistent across all tabs 
and responsive across devices*/

html {
    color: #222;
    font-family: Arial, Helvetica, sans-serif;
}

/* attention-grabbing - think modal titles */
.font-display {
    font-size: 40px;
    font-weight: 300;
}

/* page header - think page title */
.font-header {
    font-size: 32px;
    font-weight: 550;
}

/* graph title, graph info title */
.font-title {
    font-size: 24px;
    font-weight: 500;
}

/* can be used as subtitle or as smaller title - think of the info cards on the summary dashboard */
.font-subtitle {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 5px;
}

/* main paragraph text */
.font-body {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 2px;
}

.font-body-bold {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

.font-body-muted {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 2px;
    color: #777 !important;
}

/* small text used for footers and timestamps */
.font-caption {
    font-size: 12px;
    font-weight: 300;
}

/* 
Fluid typography equation:
    
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));    
*/

/* Corresponds with Bootstrap xs screen width */
/* @media screen and (min-width: 300px) { */
@media screen and (min-width: 300px) {
    .font-display {
        font-size: calc(36px + -2 * ((100vw - 300px) / (767 - 300)));
    }

    .font-header {
        font-size: calc(32px + -2 * ((100vw - 300px) / (767 - 300)));
    }

    .font-title {
        font-size: calc(22px + -2 * ((100vw - 300px) / (767 - 300)));
    }

    .font-subtitle {
        font-size: calc(18px + -2 * ((100vw - 300px) / (767 - 300)));
    }

    .font-body {
        font-size: calc(14px + -2 * ((100vw - 300px) / (767 - 300)));
    }

    .font-body-bold {
        font-size: calc(14px + -2 * ((100vw - 300px) / (767 - 300)));
    }

    .font-body-muted {
        font-size: calc(14px + -2 * ((100vw - 300px) / (767 - 300)));
    }

    .font-caption {
        font-size: calc(10px + -2 * ((100vw - 300px) / (767 - 300)));
    }
}

/* Corresponds with Bootstrap small screen width */
/* @media screen and (min-width: 768px) and (max-width: 991px) { */
@media screen and (min-width: 576px) {
    .font-display {
        font-size: calc(36px + -2 * ((100vw - 768px) / (991 - 768)));
    }

    .font-header {
        font-size: calc(32px + -2 * ((100vw - 768px) / (991 - 768)));
    }

    .font-title {
        font-size: calc(22px + -2 * ((100vw - 768px) / (991 - 768)));
    }

    .font-subtitle {
        font-size: calc(18px + -2 * ((100vw - 768px) / (991 - 768)));
    }

    .font-body {
        font-size: calc(14px + -2 * ((100vw - 768px) / (991 - 768)));
    }

    .font-body-bold {
        font-size: calc(14px + -2 * ((100vw - 768px) / (991 - 768)));
    }

    .font-body-muted {
        font-size: calc(14px + -2 * ((100vw - 768px) / (991 - 768)));
    }

    .font-caption {
        font-size: calc(10px + -2 * ((100vw - 768px) / (991 - 768)));
    }
} 

/* Corresponds with Bootstrap medium screen width */
/* @media screen and (min-width: 992px) and (max-width: 1199px) { */
@media screen and (min-width: 768px) {
    .font-display {
        font-size: calc(40px + 0 * ((100vw - 992px) / (1199 - 992)));
    }

    .font-header {
        font-size: calc(32px + 0 * ((100vw - 992px) / (1199 - 992)));
    }

    .font-title {
        font-size: calc(24px + 0 * ((100vw - 992px) / (1199 - 992)));
    }

    .font-subtitle {
        font-size: calc(20px + 0 * ((100vw - 992px) / (1199 - 992)));
    }

    .font-body {
        font-size: calc(14px + 0 * ((100vw - 992px) / (1199 - 992)));
    }

    .font-body-bold {
        font-size: calc(14px + 0 * ((100vw - 992px) / (1199 - 992)));
    }

    .font-body-muted {
        font-size: calc(14px + 0 * ((100vw - 992px) / (1199 - 992)));
    }

    .font-caption {
        font-size: calc(12px + 0 * ((100vw - 992px) / (1199 - 992)));
    }
} 

/* Corresponds with Bootstrap large screen width */
/* @media screen and (min-width: 1200px) { */
@media screen and (min-width: 992px) {
    .font-display {
        font-size: calc(40px + 1 * ((100vw - 1200px) / (1400 - 1200)));
    }

    .font-header {
        font-size: calc(32px + 1 * ((100vw - 1200px) / (1400 - 1200)));
    }

    .font-title {
        font-size: calc(24px + 1 * ((100vw - 1200px) / (1400 - 1200)));
    }

    .font-subtitle {
        font-size: calc(20px + 1 * ((100vw - 1200px) / (1400 - 1200)));
    }

    .font-body {
        font-size: calc(16px + 1 * ((100vw - 1200px) / (1400 - 1200)));
    }

    .font-body-bold {
        font-size: calc(16px + 1 * ((100vw - 1200px) / (1400 - 1200)));
    }

    .font-body-muted {
        font-size: calc(16px + 1 * ((100vw - 1200px) / (1400 - 1200)));
    }

    .font-caption {
        font-size: calc(12px + 1 * ((100vw - 1200px) / (1400 - 1200)));
    }
} 

/* Corresponds with Bootstrap extra large screen width */
@media screen and (min-width: 1200px) {
    .font-display {
        font-size: calc(40px + 1 * ((100vw - 1200px) / (1920 - 1200)));
    }

    .font-header {
        font-size: calc(32px + 1 * ((100vw - 1200px) / (1920 - 1200)));
    }

    .font-title {
        font-size: calc(24px + 1 * ((100vw - 1200px) / (1920 - 1200)));
    }

    .font-subtitle {
        font-size: calc(20px + 1 * ((100vw - 1200px) / (1920 - 1200)));
    }

    .font-body {
        font-size: calc(16px + 1 * ((100vw - 1200px) / (1920 - 1200)));
    }

    .font-body-bold {
        font-size: calc(16px + 1 * ((100vw - 1200px) / (1920 - 1200)));
    }

    .font-body-muted {
        font-size: calc(16px + 1 * ((100vw - 1200px) / (1920 - 1200)));
    }

    .font-caption {
        font-size: calc(12px + 1 * ((100vw - 1200px) / (1920 - 1200)));
    }
}