/* //////////////////// Grid //////////////////// */
#state4 .c13,
#state5 .c13,
#state6 .c13,
#state7 .c13,
#state8 .c13 {
  z-index: 100;
  position: absolute;
  top: 33.333%;
  left: 0;
  width: calc(25% - 10px);
  height: calc(66.666% - 10px);
  border: 10px solid white;
  border-top: 0px;
  opacity: 100%;
  transition: top 1s ease, left 1s ease, width 1s ease;
}

#state1 .c13,
#state2 .c13,
#state3 .c13 {
  z-index: 100;
  position: absolute;
  top: 100%;
  left: 0;
  width: calc(25% - 20px);
  height: calc(66.666% - 10px);
  border: 10px solid white;
  border-top: 0px;

  opacity: 100%;
  transition: top 1s ease, left 1s ease, width 1s ease;
}

#state4 .c14 {
  position: absolute;
  top: 33.333%;
  left: 25%;
  width: calc(25% - 0px);
  height: calc(33.333% - 10px);
  border: 10px solid white;
  border-left: 0px;
  border-top: 0px;
  opacity: 100%;
  transition: top 1s ease 0.1s, left 1s ease 0.2s, width 1s ease;
}

#state1 .c14,
#state2 .c14,
#state3 .c14 {
  position: absolute;
  top: 100%;
  left: 25%;
  width: calc(25% - 10px);
  height: calc(33.333% - 10px);
  border: 10px solid white;
  border-left: 0px;
  border-top: 0px;
  opacity: 100%;
  transition: top 1s ease 0.1s, left 1s ease 0.2s, width 1s ease;
}

.c14 {
  position: absolute;
  top: 0%;
  left: 25%;
  width: calc(25% - 10px);
  height: calc(33.333% - 10px);
  border: 10px solid white;
  border-left: 0px;
  border-top: 0px;
  opacity: 100%;
  transition: top 1s ease 0.2s, left 1s ease, width 1s ease;
}

#state4 .c15 {
  position: absolute;
  top: 33.333%;
  left: calc(50% + 10px);
  width: calc(25% - 0px);
  height: calc(33.333% - 10px);
  border-bottom: 10px solid white;
  opacity: 100%;
  transition: top 1s ease 0.2s, left 1s ease 0.2s, width 1s ease;
}

#state1 .c15,
#state2 .c15,
#state3 .c15 {
  position: absolute;
  top: 100%;
  left: calc(50% + 10px);
  width: calc(25% - 0px);
  height: calc(33.333% - 10px);
  border: 10px solid white;
  border-left: 0px;
  border-top: 0px;
  opacity: 100%;
  transition: top 1s ease 0.2s, left 1s ease 0.2s, width 1s ease;
}

.c15 {
  position: absolute;
  top: 0%;
  left: calc(50% + 10px);
  width: calc(25% - 0px);
  height: calc(33.333% - 10px);
  border: 10px solid white;
  border-left: 0px;
  border-top: 0px;
  opacity: 100%;
  transition: top 1s ease 0.1s, left 1s ease, width 1s ease;
}

#state4 .c16 {
  position: absolute;
  top: 66.666%;
  left: 25%;
  width: calc(25% - 0px);
  height: calc(33.333% - 10px);
  border: 10px solid white;
  border-left: 0px;
  border-top: 0px;
  opacity: 100%;
  transition: top 1s ease 0.1s, left 1s ease 0.1s, width 1s ease;
}

#state1 .c16,
#state2 .c16,
#state3 .c16 {
  position: absolute;
  top: 133.3%;
  left: 25%;
  width: calc(25% - 0px);
  height: calc(33.333% - 10px);
  border: 10px solid white;
  border-left: 0px;
  border-top: 0px;
  opacity: 100%;
  transition: top 1s ease 0.1s, left 1s ease 0.1s, width 1s ease;
}

.c16 {
  position: absolute;
  top: 33.333%;
  left: 25%;
  width: calc(25% - 0px);
  height: calc(33.333% - 10px);
  border: 10px solid white;
  border-left: 0px;
  border-top: 0px;
  opacity: 100%;
  transition: top 1s ease 0.2s, left 1s ease, width 1s ease;
}

#state4 .c17 {
  position: absolute;
  top: 66.666%;
  left: calc(50% + 10px);
  width: calc(25% - 0px);
  height: calc(33.333% - 10px);
  border-bottom: 10px solid white;
  opacity: 100%;
  transition: top 1s ease 0.2s, left 1s ease 0.2s, width 1s ease;
}

#state1 .c17,
#state2 .c17,
#state3 .c17 {
  position: absolute;
  top: 133.2222%;
  left: calc(50% + 10px);
  width: calc(25% - 0px);
  height: calc(33.333% - 10px);
  border: 10px solid white;
  border-left: 0px;
  border-top: 0px;
  opacity: 100%;
  transition: top 1s ease 0.2s, left 1s ease 0.2s, width 1s ease;
}

.c17 {
  position: absolute;
  top: 33.333%;
  left: calc(50% + 10px);
  width: calc(25% - 0px);
  height: calc(33.333% - 10px);
  border: 10px solid white;
  border-left: 0px;
  border-top: 0px;
  opacity: 100%;
  transition: top 1s ease 0.1s, left 1s ease, width 1s ease;
}
/* //////////////////// Style //////////////////// */

@keyframes cheeseAnim {
  0% {
    filter: blur(0px);
    letter-spacing: 0;
    text-indent: 0;
    font-variation-settings: "wght" 430, "wdth" 10;
    transform: translate(-50%, -50%) rotate(90deg) scale(1, 1.3);
  }

  25% {
    font-variation-settings: "wght" 150, "wdth" 10;
  }

  50% {
    filter: blur(20px);
    letter-spacing: -4vw;
    text-indent: 33vh;
    font-variation-settings: "wght" 150, "wdth" 10;
    top: 55%;
    transform: translate(-50%, -50%) rotate(90deg) scale(1, 1);
  }

  75% {
    font-variation-settings: "wght" 150, "wdth" 10;
  }

  100% {
    filter: blur(0px);
    letter-spacing: 0;
    text-indent: 0;
    font-variation-settings: "wght" 430, "wdth" 10;
    transform: translate(-50%, -50%) rotate(90deg) scale(1, 1.3);
  }
}

@keyframes cheeseSquareAnim {
  0% {
    top: 90%;
    height: 0;
    width: 0%;
  }

  50% {
    top: 85%;
    height: 15%;
    width: 120%;
  }

  100% {
    top: 90%;
    height: 0;
    width: 0%;
  }
}

.cheese {
  z-index: 10;
  text-align: left;
  position: absolute;
  margin: 0;
  transform: translate(-50%, -50%) rotate(90deg);
  width: auto;
  font-family: circular;
  font-size: 22vw;
  letter-spacing: 0vw;
  top: 50%;
  left: 47%;
  animation-name: cheeseAnim;
  animation-duration: 3.4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.cheddar {
  z-index: 10;
  text-align: left;
  position: absolute;
  margin: 0;
  transform: translate(-50%, -50%) rotate(90deg);
  width: auto;
  font-family: circular;
  font-size: 17vw;
  letter-spacing: 0vw;
  top: 50%;
  left: 47%;
  animation-name: cheeseAnim;
  animation-duration: 3.4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.raclette {
  z-index: 10;
  text-align: left;
  position: absolute;
  margin: 0;
  transform: translate(-50%, -50%) rotate(90deg);
  width: auto;
  font-family: circular;
  font-size: 17vw;
  letter-spacing: 0vw;
  top: 50%;
  left: 47%;
  animation-name: cheeseAnim;
  animation-duration: 3.4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.gruyere {
  z-index: 10;
  text-align: left;
  position: absolute;
  margin: 0;
  transform: translate(-50%, -50%) rotate(90deg);
  width: auto;
  font-family: circular;
  font-size: 17vw;
  letter-spacing: 0vw;
  top: 50%;
  left: 47%;
  animation-name: cheeseAnim;
  animation-duration: 3.4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.mix {
  z-index: 10;
  text-align: left;
  position: absolute;
  margin: 0;
  transform: translate(-50%, -50%) rotate(90deg);
  width: auto;
  font-family: circular;
  font-size: 22vw;
  letter-spacing: 0vw;
  top: 50%;
  left: 47%;
  animation-name: cheeseAnim;
  animation-duration: 3.4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.cheeseSquare {
  transform: translate(-50%, -50%);
  filter: blur(20px);
  z-index: 10;
  position: absolute;
  top: 53%;
  left: 50%;
  height: 45%;
  width: 90%;
  background-color: white;
  animation-name: cheeseSquareAnim;
  animation-duration: 3.4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

#ch1 {
  text-align: left;
  font-size: 11vw;
  line-height: 0.8;
  font-variation-settings: "wght" 700, "wdth" 40;
  top: 51%;
  left: 50%;
  transition: filter 0.3s ease-in;
}

#ch2 {
  text-align: left;
  font-size: 11vw;
  line-height: 0.8;
  font-variation-settings: "wght" 700, "wdth" 50;
  top: 51%;
  left: 49%;
  transition: filter 0.3s ease-in;
}

#ch3 {
  text-align: left;
  font-size: 11vw;
  line-height: 0.8;
  font-variation-settings: "wght" 700, "wdth" 40;
  top: 51%;
  left: 50%;
  transition: filter 0.3s ease-in;
}

#ch4 {
  text-align: left;
  font-size: 21vw;
  line-height: 0.8;
  font-variation-settings: "wght" 700, "wdth" 5;
  top: 52%;
  left: 49%;
  transition: filter 0.3s ease-in;
}