html, body, span, p, .mud-button-label {
    font-family: 'Montserrat';
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display';
}

.mud-typography-h1 {
    font-family: 'Playfair Display';
    font-size: calc(26px + (15) * ((100vw - 320px)/ (1600 - 320)));
    letter-spacing: 1px;
    line-height: calc(28px + (20) * ((100vw - 320px)/ (1600 - 320)));
    font-weight: 500;
}

.mud-typography-h2 {

    font-size: calc(24px + (15) * ((100vw - 320px)/ (1600 - 320)));
    letter-spacing: 1px;
    line-height: calc(24px + (15) * ((100vw - 320px)/ (1600 - 320)));
    font-weight: 500;
}

.mud-typography-h3 {
    font-size: calc(22px + (15) * ((100vw - 320px)/ (1600 - 320)));
    letter-spacing: 1px;
    line-height: calc(18px + (15) * ((100vw - 320px)/ (1600 - 320)));
    font-weight: 500;
}

.mud-typography-h4 {
    font-size: calc(14px + (15) * ((100vw - 320px)/ (1600 - 320)));
    letter-spacing: 1px;
    line-height: calc(16px + (15) * ((100vw - 320px)/ (1600 - 320)));
    font-weight: 500;
}

.mud-typography-h5 {
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 23.6px;
    font-weight: 500;
}

.mud-typography-h6 {
    font-size: calc(13px + (2) * ((100vw - 320px)/ (1600 - 320)));
    letter-spacing: 1px;
    line-height: 23.6px;
    font-weight: 500;
}

.mud-typography-subtitle1 {
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 20.6px;
    font-weight: 500;
}

.mud-typography-subtitle2 {
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 20.6px;
    font-weight: 500;
}

.mud-typography-body1 {
    font-size: 15px;
    font-weight: 400;
    line-height: 22.5px;
}

.mud-typography-body2 {
    font-size: 18px;
    font-weight: 500;
}

.mud-typography-button {
    font-size: 11px;
    letter-spacing: 1px;
    line-height: 16px;
    font-weight: 400;
    text-transform: uppercase;
}