@font-face {
    font-family: synonym-extralight;
    src: url('../assets/fonts/Synonym-Extralight.woff2'), url('../assets/fonts/Synonym-Extralight.woff');
}
@font-face {
    font-family: synonym-light;
    src: url('../assets/fonts/Synonym-Light.woff2'), url('../assets/fonts/Synonym-Light.woff');
}
@font-face {
    font-family: synonym-regular;
    src: url('../assets/fonts/Synonym-Regular.woff2'), url('../assets/fonts/Synonym-Regular.woff');
}
@font-face {
    font-family: synonym-medium;
    src: url('../assets/fonts/Synonym-Medium.woff2'), url('../assets/fonts/Synonym-Medium.woff');
}
@font-face {
    font-family: synonym-semibold;
    src: url('../assets/fonts/Synonym-Semibold.woff2'), url('../assets/fonts/Synonym-Semibold.woff');
}
@font-face {
    font-family: synonym-bold;
    src: url('../assets/fonts/Synonym-Bold.woff2'), url('../assets/fonts/Synonym-Bold.woff');
}




@font-face {
    font-family: melodrama-light;
    src: url('../assets/fonts/Melodrama-Light.woff2'), url('../assets/fonts/Melodrama-Light.woff');
}
@font-face {
    font-family: melodrama-regular;
    src: url('../assets/fonts/Melodrama-Regular.woff2'), url('../assets/fonts/Melodrama-Regular.woff');
}
@font-face {
    font-family: melodrama-medium;
    src: url('../assets/fonts/Melodrama-Medium.woff2'), url('../assets/fonts/Melodrama-Medium.woff');
}
@font-face {
    font-family: melodrama-semibold;
    src: url('../assets/fonts/Melodrama-Semibold.woff2'), url('../assets/fonts/Melodrama-Semibold.woff');
}
@font-face {
    font-family: melodrama-bold;
    src: url('../assets/fonts/Melodrama-Bold.woff2'), url('../assets/fonts/Melodrama-Bold.woff');
}




:root{
    --body-font-extralight: synonym-extralight, sans-serif;
    --body-font-light: synonym-light, sans-serif;
    --body-font-regular: synonym-regular, sans-serif;
    --body-font-medium: synonym-medium, sans-serif;
    --body-font-semibold: synonym-semibold, sans-serif;
    --body-font-bold: synonym-bold, sans-serif;


    --head-font-light: melodrama-light, sans-serif;
    --head-font-regular: melodrama-regular, sans-serif;
    --head-font-medium: melodrama-medium, sans-serif;
    --head-font-semibold: melodrama-semibold, sans-serif;
    --head-font-bold: melodrama-bold, sans-serif;
}





.body-font-extralight{
    font-family: var(--body-font-extralight);
}
.body-font-light{
    font-family: var(--body-font-light);
}
.body-font-regular{
    font-family: var(--body-font-regular);
}
.body-font-medium{
    font-family: var(--body-font-medium);
}
.body-font-semibold{
    font-family: var(--body-font-semibold);
}
.body-font-bold{
    font-family: var(--body-font-bold);
}



.head-font-light{
    font-family: var(--head-font-light);
    letter-spacing: 1px !important;
}
.head-font-regular{
    font-family: var(--head-font-regular);
    letter-spacing: 1px !important;
}
.head-font-medium{
    font-family: var(--head-font-medium);
    letter-spacing: 1px !important;
}
.head-font-semibold{
    font-family: var(--head-font-semibold);
    letter-spacing: 1px !important;
}
.head-font-bold{
    font-family: var(--head-font-bold);
    letter-spacing: 1px !important;
}