body{
  overflow: hidden;
}

#cell {
  transition: 
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1s ease;
    animation: colorshift 3s;
    animation-iteration-count: infinite;
    font-size: 5vw;
    color: transparent;
}

#cell:hover {
  transform: scale(16);
  filter: hue-rotate(90deg) brightness(80%);
  background: yellow;
  opacity: 0;
  color: black;
}

#cell:not(:hover) {
  transform: scale(1);
}

#cell::after {
  content: "";
}

#cell {
  
}

.roboto-big {
      animation: colorshift 3s;
    animation-iteration-count: infinite;
  opacity: 0.3;
    font-size: 7rem;
    line-height: 8rem;
  font-variation-settings: "wdth" 25, "opsz" 8, "GRAD" 150, "XTRA" 603, "YTLC" 570, "YTUC" 760;
  background: blue;
    font-family: 'Roboto Flex', sans-serif;
    color:#888;
    font-weight: 700;
    transition: font-weight 0.5s ease,
                font-variation-settings 0.5s ease;
}

.roboto-big:hover {
  font-weight: 700;
  font-variation-settings: "wdth" 25, "opsz" 8, "GRAD" 150, "XTRA" 603, "YTLC" 416, "YTUC" 528;
  cursor: pointer;
}

.roboto {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 7rem;
    line-height: 8rem;
    font-variation-settings: "slnt" 0;  /* upright */
    transition: font-variation-settings 0.5s ease;
    font-weight: 500;
}

.roboto:hover {
    font-variation-settings: "slnt" -10;  /* slanted */ 
    cursor: pointer;
}

.roboto:active {
  filter: scale(10);
}

img {
    pointer-events: none;
}

@keyframes colorshift {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@font-face {
  font-family: "Tiny";
  src: url("TINY5x3GX.ttf") format("truetype-variations");
  font-weight: 0 900; /* supports the full range */
  font-stretch: 75% 125%; /* if width axis is available */
  font-style: normal;
}

/* RobotoFlex.ttf */
@font-face {
  font-family: "Roboto Flex";
  src: url("RobotoFlex.ttf") format("truetype-variations");
  font-weight: 100 1000; /* supports the full range */
  font-stretch: 75% 125%; /* if width axis is available */
  font-style: normal;
}