@font-face {
font-family: 'Starter';
src: url(fonts/DMStarterVariable.woff2) format('woff2'),
url(fonts/DMStarterVariable.woff) format('woff');
font-style: normal;
font-weight: 100 1000; }

@font-face {
font-family: 'Plankton';
src: url(fonts/DMPlanktonVariable.woff2) format('woff2'),
url(fonts/DMPlanktonVariable.woff) format('woff');
font-style: normal;
font-weight: 400 1000;  }

@font-face {
font-family: 'Eukalyptus';
src: url(fonts/DMEukalyptusVariable.woff2) format('woff2'),
url(fonts/DMEukalyptusVariable.woff) format('woff');
font-style: normal;
font-weight: 400; }

@font-face {
font-family: 'Raufaser';
src: url(fonts/DMRaufaserVariable.woff2) format('woff2'),
url(fonts/DMRaufaserVariable.woff) format('woff');
font-style: normal;
font-weight: 400 1000; }

@font-face {
font-family: 'Sitzfleisch';
src: url(fonts/DMSitzfleischVariable.woff2) format('woff2'),
url(fonts/DMSitzfleischVariable.woff) format('woff');
font-style: normal;
font-weight: 400 1000; }

@font-face {
font-family: 'Jogney';
src: url(fonts/DMJogneyVariable.woff2) format('woff2'),
url(fonts/DMJogneyVariable.woff) format('woff');
font-style: normal;
font-weight: 400 700; }

/************************************************************* T Y P E ****************/


.starter { font-family: 'Starter'; font-variation-settings: "slnt" 0, "MONO" 0; }
.plankton { font-family: 'Plankton'; font-variation-settings: "slnt" 0, "MONO" 0; }
.eukalyptus { font-family: 'Eukalyptus'; font-variation-settings: "MONO" 0;  }
.raufaser { font-family: 'Raufaser'; font-variation-settings: "wdth" 5, "slnt" 0;}
.sitzfleisch { font-family: 'Sitzfleisch'; }
.jogney { font-family: 'Jogney'; }

.thin { font-weight: 100; }
.ultralight { font-weight: 200; }
.light { font-weight: 300; }
.regular { font-weight: 400; }
.book { font-weight: 500; }
.medium { font-weight: 600; }
.bold { font-weight: 700; }
.heavy { font-weight: 800; }
.black { font-weight: 900; }
.ultra { font-weight: 1000; }

.mono { font-variation-settings: "MONO" 1, "slnt" 0;  } 
.italic { font-variation-settings: "slnt" 12, "MONO" 0; }


/************************************************************* EXTRA STYLES ****************/

.compressed { font-variation-settings: "wdth" 1, "slnt" 0, "MONO" 0;;  }
.condensed { font-variation-settings: "wdth" 3, "slnt" 0, "MONO" 0;;  }
.extended { font-variation-settings: "wdth" 7, "slnt" 0, "MONO" 0;;  }
.expanded { font-variation-settings: "wdth" 9, "slnt" 0, "MONO" 0;;  }