:root {
  font-size: 300%;
  background-color: hsl(0, 0%, 0%);
  text-transform: uppercase;
}

h1 {
  /* font-size: 150%; */
  font-family: "GT-Flexa-VF", Arial, sans-serif;
  color: white;
  line-height: 1;
  animation: my-width 8s infinite alternate;
  text-align: center;
  text-wrap-mode: nowrap;
}

ul {
  font-size: 50%;
  font-family: "GT-Flexa-VF", Arial, sans-serif;
  font-variation-settings: "wght" 250, "wdth" 200;
  letter-spacing: -1px;
  list-style: none;
  color: white;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(30, 80px);
  justify-items: middle;
  grid-auto-flow: column;
  align-items: bottom;
  text-align: center;
}

a {
  color: yellowgreen;
  text-decoration: none;
}

.thumb {
  display: block;
  width: 50%;
  height: auto;
  border: solid yellowgreen 2px;
  position: relative;
  left: 25%;
  border-radius: 50px;
  max-height: 60px;
  min-width: 100px;
  /* margin-top:10px */
}


p {
  font-family: "GT-Flexa-VF", Arial, sans-serif;
  color: white;
  font-size: 50%;
  line-height: 1;
  text-align: center;
  position: relative;
  top:-40px;
  letter-spacing: 2px;
  font-variation-settings: "wght" 350, "wdth" 200;
}

@keyframes my-width {
  from {
    font-variation-settings: "wght" 100, "wdth" 25;
  }

  to {
    font-variation-settings: "wght" 800, "wdth" 150;
  }
}

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