:root {
    --font-page-title: 1.28rem;
    --font-section-title: 1.05rem;
    --font-card-title: .98rem;
    --font-body: .9rem;
    --font-small: .78rem;
    --font-tiny: .7rem;
    --font-table: .82rem;
    --font-button: .84rem;
}

body {
    font-size: var(--font-body);
}

h1 {
    font-size: var(--font-page-title);
    line-height: 1.35;
}

h2 {
    font-size: var(--font-section-title);
    line-height: 1.35;
}

h3 {
    font-size: var(--font-card-title);
    line-height: 1.35;
}

button,
.btn,
input,
select,
textarea {
    font-size: var(--font-button);
}

table,
th,
td {
    font-size: var(--font-table);
}

.muted,
.mini,
.hint,
small,
.dash-note,
.subtitle {
    font-size: var(--font-small);
}

.badge {
    font-size: var(--font-tiny);
}

body .top h1,
body .header-title h1,
body .hero h1,
body .title h1,
body .section-head h1 {
    font-size: var(--font-page-title) !important;
    line-height: 1.35 !important;
}

body .card h2,
body .panel h2,
body .panel-head h2,
body .section-head h2,
body .scanner-head h2,
body .history h2 {
    font-size: var(--font-section-title) !important;
    line-height: 1.35 !important;
}

body .card h3,
body .panel h3,
body .section-head h3 {
    font-size: var(--font-card-title) !important;
}

body .btn,
body button,
body input,
body select,
body textarea {
    font-size: var(--font-button) !important;
}

body table,
body th,
body td {
    font-size: var(--font-table) !important;
}

body .mini,
body .muted,
body .hint,
body small,
body .subtitle,
body .dash-note,
body .field label,
body label {
    font-size: var(--font-small) !important;
}

body .badge,
body .source-meta span {
    font-size: var(--font-tiny) !important;
}

@media (max-width: 760px) {
    :root {
        --font-page-title: 1.08rem;
        --font-section-title: .98rem;
        --font-card-title: .92rem;
        --font-body: .84rem;
        --font-small: .73rem;
        --font-tiny: .66rem;
        --font-table: .78rem;
        --font-button: .8rem;
    }
}