:root {
    --font-heading: 'Darker Grotesque', sans-serif;
    --font-body: 'Source Sans 3', sans-serif;

    --font-display-weight: 900;
    --font-display-size: 72px;
    --font-display-line-height: 0.7;
    --font-display-letter-spacing: 0;
}

html {
    font-family: var(--font-body);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 900;
    color: #373737;
}

p,
label,
input,
textarea,
select,
button,
a,
li,
span,
small,
td,
th {
    font-family: var(--font-body);
}

.font-heading {
    font-family: var(--font-heading);
}

.font-body {
    font-family: var(--font-body);
}

.font-display {
    font-family: var(--font-heading);
    font-weight: var(--font-display-weight);
    font-style: normal;
    font-size: var(--font-display-size);
    line-height: var(--font-display-line-height);
    letter-spacing: var(--font-display-letter-spacing);
    text-align: center;
    vertical-align: middle;
    color: #373737;
}

@media (max-width: 768px) {
    :root {
        --font-display-size: 48px;
    }
}