@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/titillium-web/TitilliumWeb-400.ttf") format("truetype");
}

@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/titillium-web/TitilliumWeb-600.ttf") format("truetype");
}

@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/titillium-web/TitilliumWeb-700.ttf") format("truetype");
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/manrope/Manrope-400.ttf") format("truetype");
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/manrope/Manrope-600.ttf") format("truetype");
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/manrope/Manrope-700.ttf") format("truetype");
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/nunito-sans/NunitoSans-400.ttf") format("truetype");
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/nunito-sans/NunitoSans-600.ttf") format("truetype");
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/nunito-sans/NunitoSans-700.ttf") format("truetype");
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible/AtkinsonHyperlegible-400.ttf") format("truetype");
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible/AtkinsonHyperlegible-700.ttf") format("truetype");
}

html[data-font-preference="titillium"] {
    --bs-body-font-family: "Titillium Web", sans-serif;
    --bs-font-sans-serif: "Titillium Web", sans-serif;
}

html[data-font-preference="manrope"] {
    --bs-body-font-family: "Manrope", sans-serif;
    --bs-font-sans-serif: "Manrope", sans-serif;
}

html[data-font-preference="nunito"] {
    --bs-body-font-family: "Nunito Sans", sans-serif;
    --bs-font-sans-serif: "Nunito Sans", sans-serif;
}

html[data-font-preference="atkinson"] {
    --bs-body-font-family: "Atkinson Hyperlegible", sans-serif;
    --bs-font-sans-serif: "Atkinson Hyperlegible", sans-serif;
}

.font-preview-titillium {
    font-family: "Titillium Web", sans-serif;
}

.font-preview-manrope {
    font-family: "Manrope", sans-serif;
}

.font-preview-nunito {
    font-family: "Nunito Sans", sans-serif;
}

.font-preview-atkinson {
    font-family: "Atkinson Hyperlegible", sans-serif;
}

.font-menu {
    min-width: 15rem;
}