@font-face {
    font-family: 'Inter';
    src: url('Inter.var.woff2') format('woff2 supports variations'),
        url('Inter.var.woff2') format('woff2-variations');
    font-weight: 100 1000;
	font-stretch: 25% 151%;
  }

  @font-face {
    font-family: 'Raleway';
    src: url('Raleway-VariableFont_wght.ttf');
    font-weight: 100 1000;
	font-stretch: 25% 151%;
  }

  @font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght].ttf');
    font-weight: 100 1000;
	font-stretch: 25% 151%;
  }

  body {
    display: grid;
    place-items: center;
  }

ul {
    display: flex;
    justify-content: center;
    font-size: 200px;
    list-style: none;
    font-family: 'Roboto Flex';
}

li {
    transition: font-stretch .5s, font-weight .5s, transform 1s;
    white-space: pre-wrap;
}

li:hover {
    font-stretch: 151%;
    font-weight: 800;
    font-variation-settings: 'slnt' 10;
}

.inputText {
    display: block;
    margin: 0 auto;
    font-size: 70px;
}

.animated {
  font-stretch: 151%;
    font-weight: 800;
    font-variation-settings: 'slnt' 10;
    transform: translateY(-60px);
}