@font-face {
    font-family: "DM Sans";
    src: url(DMSans-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "DM Sans";
    src: url(DMSans-Italic.ttf);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "DM Sans";
    src: url(DMSans-Bold.ttf);
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "DM Sans";
    src: url(DMSans-BoldItalic.ttf);
    font-weight: 700;
    font-style: italic;
}

/* ---- menu font --------------------------------------------------- */

@font-face {
    font-family: "Montserrat";
    src: url(Montserrat-Medium.ttf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat";
    src: url(Montserrat-MediumItalic.ttf);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Montserrat";
    src: url(Montserrat-SemiBold.ttf);
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat";
    src: url(Montserrat-SemiBoldItalic.ttf);
    font-weight: 700;
    font-style: italic;
}

/* ---- root -------------------------------------------------------- */

:root {
    --content-width: 1220px;

    --base-font: "DM Sans", sans-serif;
    --nav-font: "Montserrat", sans-serif;
    --gallery-font: "Montserrat", sans-serif;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --color_bg: #F9F8F6;
    --color_nav_bg: #EFE9E3;
    --color_menu_bg: #F9F8F6ff;

    --color_fg: #504B38;
    --color_fg_muted: #7a7463;
    --color_title_fg: #D9CFC7;

    --color_link: #705030;
    --color_link_hover: #9A6A2A;

    --color_overlay_text: #FFFFFF;
    --color_overlay_shadow: rgba(0, 0, 0, 0.6);

    --color_border_soft: rgba(80, 75, 56, 0.12);
}

.menu a.item {
    text-transform: uppercase;
    letter-spacing: 0.01em;
}