@import url('https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap'); 

@import url('https://fonts.googleapis.com/css2?family=Rokkitt:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wdth,wght@0,100..125,100..900;1,100..125,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Climate+Crisis:YEAR@1979..2050&display=swap');

@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wdth,wght@75..100,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Text:wght@100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Gluten:slnt,wght@-13..13,100..900&family=Tilt+Neon:XROT,YROT@-45,-26&display=swap');

@import url('href="https://fonts.googleapis.com/css2?family=Tilt+Neon:XROT,YROT@-45..45,-45..45&display=swap');


@font-face {
	font-family: 'NickelGothic_Web';
  src: url(Fonts/NickelGothicV3Variable[slnt\,wdth].woff2) format('woff2-variations');

  /*
  Variable Axes: 
  Width 25 - 150
  Slant -15 - 15
  */
}


@font-face {
	font-family: 'Purple-haze-web';
  src: url(Fonts/PurpleHaze-Trial.woff2) format('woff2-variations');

  /*
    Stylesheet will contain the class "purple-haze-trial-thin-custom-instance"
    to enable a custom instance with the following values:

    "wtun" 100, "wtsp" 900
  */
}

@font-face {
	font-family: 'Pouf';
  src: url(Fonts/PoufVar0.5.woff2) format('woff2-variations');

  /*
  font-variation-settings: "brth"10; "wght"100;

  "brth"10 bis 100
  "wght"10 bis 100
  */
}

/*
 * =======================
 * rokkitt
 * =======================
 *
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.rokkitt-<uniquifier> {
  font-family: "Rokkitt", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
/*
 * =======================
 * Sour Gummy
 * =======================
 *
//<uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900
// <width>: Use a value from 100 to 125

.sour-gummy-<uniquifier> {
  font-family: "Sour Gummy", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" <width>;
}

 * =======================
 * Climate Crisis
 * =======================
 *
// <uniquifier>: Use a unique and descriptive class name
// <year>: Use a value from 1979 to 2050

.climate-crisis-<uniquifier> {
  font-family: "Climate Crisis", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "YEAR" <year>;
}


 * =======================
 * Dyna Puff
 * =======================
 *
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 700
// <width>: Use a value from 75 to 100

.dynapuff-<uniquifier> {
  font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" <width>;
}

 * =======================
 * EB Garamond
 * =======================
 *
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 800

.eb-garamond-<uniquifier> {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

 * =======================
 * Big Shoulders InLine Text
 * =======================
 *
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.big-shoulders-inline-text-<uniquifier> {
  font-family: "Big Shoulders Inline Text", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

 * =======================
 * Gluten
 * =======================
 *
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900
// <slant>: Use a value from -13 to 13

.gluten-<uniquifier> {
  font-family: "Gluten", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" <slant>;

}
 * =======================
 * Tilt Neon
 * =======================
 *
// <uniquifier>: Use a unique and descriptive class name
// <rotation in x>: Use a value from -45 to 45
// <rotation in y>: Use a value from -45 to 45

.tilt-neon-<uniquifier> {
  font-family: "Tilt Neon", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "XROT" <rotation in x>,
    "YROT" <rotation in y>;
}



*/




/*
 * =======================
 * Variable Font einbinden
 * =======================
 *
 * Lesen:
 * https://web.dev/variable-fonts/
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
 *
 */


/* 
 * =================
 * Entweder ab Datei
 * =================
 */

/*
 * - Vergleiche mit ‘Introduction to variable fonts on the web’
 * - Den Namen der font-family kannst du frei wählen.
 * - Foo-Bar-VF.woff2 mit dem Dateinamen deines Fonts ersetzen.
 * - Die Werte zu font-weight und font-stretch stellst du gemäss Font-Eigenschaften ein.
 */

/* 
 @font-face {
	font-family: 'My Variable Font';
  src: url('Foo-Bar-VF.woff2') format('woff2-variations');
	font-weight: 100 1000;
	font-stretch: 25% 151%;
}
*/

/*
 * =====================================
 * Oder ab CDN (Google, Adobe, Monotype)
 * =====================================
 */

/*
 @import url('https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap');
*/

/*
ACHTUNG! die @import-Zeile muss zuoberst im Stylesheet stehen!
*/