/* CSS related to typography */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400&display=swap');

:root {
    --small-font-size: 12px;
    --settings-font-size: 12.5px;

    --small-heading-font-size: 18px;

    --radio-label-font-size: 18px;

    --mobile-font-size: 13px;
    --mobile-slider-mark-size: 12px;

    --body-padding: 3em;
    --mobile-body-padding: 1em;

    --accent-color: #de1616;

}

/* For default, desktop layout */
body {
    font-family: 'Barlow', sans-serif;
    font-size: 135%;
    padding: var(--body-padding);
}
h1 {
    color: var(--accent-color);
    font-size: 300%;
}
h2 {
    color: var(--accent-color);

}
h3 {
    font-size: 200%;
}
h4 {
    color: var(--accent-color);
    font-size: 175%;
    padding: 0;
    margin: 0;
}
h5 {
    color: var(--accent-color);
    font-size: var(--small-heading-font-size);
}
h6 {
    color: var(--accent-color);
    font-size: 145%;
}

.header-small-text {
    font-size: var(--small-font-size);
}
.footer-small-text {
    font-size: var(--small-font-size);
}

.model-output-text {
    padding-left: 2em
}

.model-output-text-small {
    color: var(--accent-color);
}

.faq-answer {
    padding-left: 1em;
}

#header-left {
    font-size: var(--settings-font-size);
}

.settings-header {
    color: #de1616;
}

six-ft-output {
    color: var(--accent-color);
}

#adv-co2-output, #adv-co2-output-healthy, #adv-exp-time-output-co2 {
    color: var(--accent-color);
}

.radio-label {
    font-size: var(--radio-label-font-size);
}

/* Small-width/mobile layout */
@media only screen and (max-width: 800px) {
    body {
        font-family: 'Barlow', sans-serif;
        font-size: var(--mobile-font-size);
        padding: var(--mobile-body-padding);
    }
    h1 {
        font-size: 36px;
    }
    h3 {
        font-size: 20px;
    }
    h4 {
        font-size: 18px;
    }
    h5 {
        font-size: 15px;
    }
    h6 {
        font-size: 18px;
    }

    .model-output-text {
        padding-left: 1em;
    }
    .faq-answer {
        padding-left: 0
    }

    .rc-slider-mark-text {
        font-size: var(--mobile-slider-mark-size);
    }
}