@import url('https://fonts.googleapis.com/css?family=Prosto+One&display=swap&subset=cyrillic');
  
  @font-face {
    font-family: 'Inconsolata';
    src: url('fonts/Inconsolata-DH.ttf');
    font-weight: 275 900;
    font-stretch: 50% 200%;
  }


  main {
    max-width: 90%;
    white-space: nowrap;
    padding-top: 200px;
    width: 90%;
    margin: auto;
    color: white;
    font-size: 8em;
    font-family: 'Inconsolata';
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .static {
    padding-top: 35px;
    padding-left: 10px;
    font-size: 30px;
    text-align: left;
    color: orange;
    font-variation-settings: "wght"900, "wdth"200;
    font-family: 'Prosto One', cursive;
  }

  .variable {
    display: flex;
    font-variation-settings: "wght"275, "wdth"50;
    text-align: center;
    animation: swapthings 3s infinite both cubic-bezier(0.17, 0.04, 0.04, 0.99);
  }

  .work {
    animation: swapthings2 3s infinite both cubic-bezier(0.17, 0.04, 0.04, 0.99);
  }


  @keyframes swapthings {
    0% {
      font-variation-settings: "wght"275, "wdth"50;
    }

    50% {
      font-variation-settings: "wght"900, "wdth"200;
    }

    100% {
      font-variation-settings: "wght"275, "wdth"50;
    }
  }

  @keyframes swapthings2 {
    0% {
      font-variation-settings: "wght"900, "wdth"200;
    }

    50% {
      font-variation-settings: "wght"275, "wdth"50;
    }

    100% {
      font-variation-settings: "wght"900, "wdth"200;
    }
  }

  @media screen and (max-width: 980px) {

    main {
      max-width: 90%;
      white-space: nowrap;
      padding-top: 100px;
      width: 90%;
      margin: auto;
      color: white;
      font-size: 3em;
      font-family: 'Inconsolata';
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

  }