:root { --grayscalewhite: rgba(255, 255, 255, 1); --blue-medium-shadow: 0px 8px 24px 0px rgba(0, 146, 255, 0.15); --layout-XL: 1440px; --layout-l: 1024px; --layout-m: 768px; --layout-s: 393px; --typography-breakpoint: var(--layout-XL); --typography-hide-on-mobile: initial; --font-open-sans: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif; --font-bitter: 'Bitter', ui-serif, Georgia, 'Times New Roman', Times, 'Noto Serif', 'Source Serif 4', serif; /* --font-soehne: 'Söhne', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'Inter', 'Noto Sans', Ubuntu, Cantarell, sans-serif; */ } /* Usage */ .font-open-sans { font-family: var(--font-open-sans); } .font-bitter { font-family: var(--font-bitter); } /* .font-soehne { font-family: var(--font-soehne); } */ /* To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so: You can apply the theme on any DOM node, not just the `body` */ [data-typography-mode="desktop"] { --typography-breakpoint: var(--layout-XL); --typography-hide-on-mobile: initial; } [data-typography-mode="mobile"] { --typography-breakpoint: var(--layout-m); --typography-hide-on-mobile: none; }