@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=Climate+Crisis:YEAR@1979..2050&display=swap');

@font-face {
	font-family: 'Ruder';
  src: url('RuderPlakatLLVarTrialWeb.woff2') format('woff2-variations');
	/* font-weight: 100 1000;
	font-stretch: 25% 151%; */

}

@font-face {
	font-family: 'ease';
  src: url('EaseVariableTRIALVF.woff2') format('woff2-variations');
}

@font-face {
	font-family: 'edgy';
  src: url('StudioFeixenEdgyVFTRIALGX.ttf') format('woff2-variations');
}


@font-face {
	font-family: 'grid';
  src: url('GridlitePEVFTRIAL-All.ttf') format('woff2-variations');
}

@font-face {
	font-family: 'mono';
  src: url('StudioFeixenMonoVFTRIALGX.ttf') format('woff2-variations');
}

@font-face {
	font-family: 'recursive';
  src: url('Recursive_VF_1.085--subset-GF_latin_basic.woff2') format('woff2-variations');
}

@font-face {
	font-family: 'humane';
  src: url('Humane-VF.ttf') format('woff2-variations');
}

@font-face {
	font-family: 'nickel';
  src: url("NickelGothicV3Variable[slnt,wdth].woff2") format('woff2-variations');
}

@font-face {
	font-family: 'whoa';
  src: url("WHOA-Spine-v0.4.1.ttf") format('woff2-variations');
}

@font-face {
	font-family: 'kyrios';
  src: url("WHOA-Spine-AT-Kyrios-Variable.Trial.ttf.4.1.ttf") format('woff2-variations');
}

@font-face {
	font-family: 'tiny';
  src: url("TINY5x3GX.ttf") format('woff2-variations');
}

@font-face {
	font-family: 'asfalt';
  src: url("ABCAsflatVariableVF-Trial.woff2") format('woff2-variations');
}

body {
	background-color: black;

}

h2 {
	position: fixed;
	color: #e000ff; 
	font-family: ease;
	font-size: 30px;
	margin-top: 50px;
}


a {
	text-decoration: none;
	color: #e000ff; 
	font-variation-settings: "YTUC" 100;


} 

a:hover {
	color: #980033;
	/* color: #980033; */
	font-variation-settings: "YTUC" 900;
  }

/* a:visited {
	color: #18aa1c;
} */


li {
	list-style: none;
	font-family: Ruder;
	font-size: 320px;
	line-height: 320px;
	
}

.container-list {
	display: flex;
	justify-content: right;
	align-items: left;
	height: 100%;
	margin-top: 20px;
	margin-left: 400px;
	height: 100%;
	

}



/*
 * =======================
 * 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%;
} tool zeigt werte
*/

/*
 * =====================================
 * 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!
*/