@import url('https://fonts.googleapis.com/css?family=Noto%20Sans%20Medium:700|Noto%20Sans:400|Noto%20Sans%20Mono:700|Noto%20Serif:400');

:root {
    --font-sans: 'Noto Sans';
    --font-sans-light: 'Noto Sans';
    --font-sans-medium: 'Noto Sans Medium';
    --font-mono: 'Noto Sans Mono';
    --font-serif: 'Noto Serif';

    --font-heading: var(--font-sans-medium), var(--font-sans), sans-serif;
    --font-body: var(--font-sans-light), var(--font-sans), sans-serif;

    --heading-color: var(--text, #000);
}

body {
    font-family: var(--font-body);
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading-1,
.heading-2,
.heading-3,
.heading-4,
.heading-5,
.heading-6 {
    font-family: var(--font-heading);
    color: var(--heading-color);
}

h1,
h2,
h3,
h4,
h5,
.heading-1,
.heading-2,
.heading-3,
.heading-4,
.heading-5 {
    font-weight: 700;
}

html {
    font-size: 100%;
    /* 16px */
}


h1,
.heading-1 {
    font-size: 3.053em;
    /* 48.8px */
}

h2,
.heading-2 {
    font-size: 2.442em;
    /* 39.04px */
}

h3,
.heading-3 {
    font-size: 1.954em;
    /* 31.2px */
}

h4,
.heading-4 {
    font-size: 1.563em;
    /* 24.96px */
}

h5,
.heading-5 {
    font-size: 1.250em;
    /* 20px */
}

small,
.small {
    font-size: 0.800em;
    /* 12.8px */
}

.font-mono {
    font-family: var(--font-mono), monospace;
}

.font-serif {
    font-family: var(--font-serif), serif;
}

.font-sans {
    font-family: var(--font-sans), sans-serif;
}