@font-face {
    font-family: ExtendomaticVariable-VF;
    src: url("../fonts/ExtendomaticVariable-VF.woff2");
}

body {
    font-optical-sizing: auto;
    font-family: "Gugi", sans-serif; 
    font-weight: 400;
    font-style: normal; 
}

form:nth-child(2) > div:nth-of-type(1){
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: none;
} 

h1 {
    font-family: "ExtendomaticVariable-VF";
    /* slnt, TRAK, wght */
    --trak: calc(500 - var(--speed)*20);
    --color-text: rgb(216, 216, 216);
    margin: 0;
    font-size: 2.2em;
    color: var(--color-text);
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
       "slnt" -10,
      "wdth" 100,
      "TRAK" 0;
    animation: slide 3s linear infinite;
    max-width: 2em;
}

@property --trak {
    syntax: "<number>";
    inherits: false;
    initial-value: 150;
  }

@keyframes slide {
    0%{
        font-variation-settings:
        "slnt" 20,
        "wght" 200,
        "TRAK" var(--trak);
    }
    75%{
        font-variation-settings:
        "slnt" -20,
        "wght" 500,
        "TRAK" 0;
    }
    80%{
        font-variation-settings:
        "slnt" 20,
        "wght" 400,
        "TRAK" 50;
    }
    100%{
        font-variation-settings:
        "slnt" 20,
        "wght" 200,
        "TRAK" var(--trak);
    }
}