@font-face {
    font-family: UniversLTStd-XBlack;
    src: url(fonts/UniversLTStd-XBlack.otf);
}


  body {
    font-family: UniversLTStd-XBlack;
    margin:0px;
    overflow-x: none !important;

  }

  h3 {
    width: 100%;
    position: sticky;
    top: 0;
    height: 2rem;
    color: white;
    text-align: center;
    font-size: 2rem;
    background-color: rgb(228, 160, 255) ;
    border-radius: 0%;
    margin: 0;
    margin-block-start: 0px;
    margin-block-end: 0px;
    display: block;
    z-index: 300;
  }

  h3:nth-child(2) {
    top: 0;
    color: rgb(147, 255, 150);
}
  h4 {
    width: 100%;
    position: sticky;
    top: 0rem;
    height: 2rem;
    color: white;
    text-align: center;
    font-size: 2rem;
    background-color: rgb(147, 255, 150);
    border-radius: 0%;
    margin: 0;
    margin-block-start: 0px;
    margin-block-end: 0px;
    display: block;
    z-index: 300;
  }


  
  h2 {
    position: relative;
    font-size: 13rem;
    line-height: 100%;
    color: rgb(147, 255, 150);
    text-align: center;
    margin-top: 4rem;
    margin-block-end: 0px;
  }
  
  h1 {
    font-family: UniversLTStd-XBlack;
    line-height: 90%;
    color: white;
    text-align: center;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  
  p, a {
    font-family: UniversLTStd-XBlack;
    font-size: 4vh;
    line-height: 100%;
    color: white;
    text-align: center;
    margin: 0;
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-shadow: 9px 7px 9px  rgb(228, 160, 255);
  }


  .container {
    /* position: sticky; */
    top: 0px;
    left: 0px;
  }

  .container0 {
    position: sticky;
    z-index: 0;
    height: 120vh;

  }

  .container1 {
    font-family: UniversLTStd-XBlack;
    position: relative;
    justify-items: initial;
    align-items: initial;
    justify-content: initial;
    align-content: initial;
    display: flex;
    flex-wrap: wrap;
    background: white;
    height: 207vh;
    background-size: 207vh;
  }

  .container2 {
    font-family: UniversLTStd-XBlack;
    position: sticky;
    justify-items: initial;
    align-items: initial;
    justify-content: initial;
    align-content: initial;
    display: flex;
    flex-wrap: wrap;
    background: transparent;
    background: white;
  }


  .flip-box {
    height: 20%;
    transition: width .2s ease-in-out;
  }

  /* flip box 1 */
  .flip-box1 h1 {
    font-size: 6vh;
}
  .flip-box1 {
    /* grid-area: flip-box1; */
    width: 20vw;
    border-radius: 50%;
    border: 1px black;
    perspective: 300px;
  }
  
  .flip-box-inner1 {
    position: relative;
    border-radius: 50%;
    width: 20vw;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  .flip-box-front1 {
    border-radius: 50%;
    /* background-image: radial-gradient(rgb(228, 160, 255), white, rgb(228, 160, 255) 80%); */
    background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
    background-color: rgb(147, 255, 150);
    color: black;
  }
  
  .flip-box-back1 {
    border-radius: 50%;
    /* background-image: radial-gradient( white, rgb(228, 160, 255), white, rgb(228, 160, 255) 90%); */
    background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
    color: white;
    transform: rotateY(180deg);
  }
  
  .flip-box-front1, .flip-box-back1 {
    border-radius: 50%;
    backface-visibility: hidden;
    position: absolute;
    width: 20vw;
    width: 100%;
    height: 100%;
  }
  
  .flip-box1:hover .flip-box-inner1 {
    transform: rotateY(180deg);
  }


/* flip box 2 */
.flip-box2 h1 {
  font-size:11vh;
}
.flip-box2 {
  /* grid-area: flip-box2; */
  width: 50vw;
  /* height: 100%; */
  border-radius: 50%;
  border: 1px black;
  perspective: 300px;
}

.flip-box-inner2 {
  position: relative;
  border-radius: 50%;
  width: 50vw;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front2 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  color: black;
}

.flip-box-back2 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front2, .flip-box-back2 {
  border-radius: 50%;
  backface-visibility: hidden;
  position: absolute;
  width: 50vw;
  width: 100%;
  height: 100%;
}

.flip-box2:hover .flip-box-inner2 {
  transform: rotateY(180deg);
}

/* flip box 3 */
.flip-box3 h1 {
  font-size:8vh;
}
.flip-box3 {
  /* grid-area: flip-box3; */
  width: 30vw;
  /* height: 100%; */
  border-radius: 50%;
  border: 1px black;
  perspective: 300px;
}

.flip-box-inner3 {
  position: relative;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front3 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  color: black;
}

.flip-box-back3 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front3, .flip-box-back3 {
  border-radius: 50%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box3:hover .flip-box-inner3 {
  transform: rotateY(180deg);
}



/* flip box 4 */
.flip-box4 h1 {
  font-size:12vh;
}
.flip-box4 {
  /* grid-area: flip-box4; */
  border-radius: 50%;
  width: 50vw;
  height: 50vw;
  border: 1px black;
  perspective: 300px;
}

.flip-box-inner4 {
  position: relative;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front4 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  color: black;
}

.flip-box-back4 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front4, .flip-box-back4 {
  border-radius: 50%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box4:hover .flip-box-inner4 {
  transform: rotateY(180deg);
}

/* flip box 5 */
.flip-box5 h1 {
  font-size:12vh;
}
.flip-box5 {
  /* grid-area: flip-box5; */
  border-radius: 50%;
  width: 50vw;
  height: 50vw;
  border: 1px black;
  perspective: 200px;
}

.flip-box-inner5 {
  position: relative;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front5 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  color: black;
}

.flip-box-back5 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front5, .flip-box-back5 {
  border-radius: 50%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box5:hover .flip-box-inner5 {
  transform: rotateY(180deg);
}


/* flip box 6 */
.flip-box6 h1 {
  font-size:8.5vh;
}
.flip-box6 {
  /* grid-area: flip-box6; */
  border-radius: 50%;
  width: 30vw;
  border: 1px black;
  perspective: 300px;
}

.flip-box-inner6 {
  position: relative;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front6 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  color: black;
}

.flip-box-back6 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front6, .flip-box-back6 {
  border-radius: 50%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box6:hover .flip-box-inner6 {
  transform: rotateY(180deg);
}

/* flip box 7 */
.flip-box7 h1 {
  font-size:6vh;
}
.flip-box7 {
  /* grid-area: flip-box7; */
  border-radius: 50%;
  width: 20vw;
  /* height: 100%; */
  border: 1px black;
  perspective: 300px;
}

.flip-box-inner7 {
  position: relative;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front7 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  color: black;
}

.flip-box-back7 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front7, .flip-box-back7 {
  border-radius: 50%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box7:hover .flip-box-inner7 {
  transform: rotateY(180deg);
}

/* flip box 8 */
.flip-box8 h1 {
  font-size:9vh;
}
.flip-box8 {
  /* grid-area: flip-box8; */
  border-radius: 50%;
  width: 50vw;
  /* height: 100%; */
  border: 1px black;
  perspective: 200px;
}

.flip-box-inner8 {
  position: relative;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front8 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  color: black;
}

.flip-box-back8 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front8, .flip-box-back8 {
  border-radius: 50%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box8:hover .flip-box-inner8 {
  transform: rotateY(180deg);
}

/* flip box 9 */
.flip-box9 h1 {
  font-size:9vh;
}
.flip-box9 {
  /* grid-area: flip-box9; */
  border-radius: 50%;
  width: 50vw;
  border: 1px black;
  perspective: 200px;
}

.flip-box-inner9 {
  position: relative;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front9 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  color: black;
}

.flip-box-back9 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front9, .flip-box-back9 {
  border-radius: 50%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box9:hover .flip-box-inner9 {
  transform: rotateY(180deg);
}

/* flip box 10 */
.flip-box10 h1 {
  font-size:9vh;
}
.flip-box10 {
  /* grid-area: flip-box10; */
  border-radius: 50%;
  width: 50vw;
  /* height: 55%; */
  border: 1px black;
  perspective: 200px;
}

.flip-box-inner10 {
  position: relative;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front10 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  color: black;
}

.flip-box-back10 {
  border-radius: 50%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front10, .flip-box-back10 {
  border-radius: 50%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box10:hover .flip-box-inner10 {
  transform: rotateY(180deg);
}


  /* flip box 11 */
  .flip-box11 h1 {
    font-size:8vh;
}
  .flip-box11 {
    /* grid-area: flip-box11; */
    width: 33.3vw;
    height: 33.3vw;
    border-radius: 20%;
    border: 1px black;
    perspective: 800px;
  }
  
  .flip-box-inner11 {
    position: relative;
    border-radius: 20%;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  .flip-box-front11 {
    border-radius: 20%;
    /* background-image: radial-gradient(rgb(228, 160, 255), white, rgb(228, 160, 255) 80%); */
    background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
    color: black;
  }
  
  .flip-box-back11 {
    border-radius: 20%;
    /* background-image: radial-gradient( white, rgb(228, 160, 255), white, rgb(228, 160, 255) 90%); */
    background-image: radial-gradient(rgb(147, 255, 150) 2%, white);
    color: white;
    transform: rotateY(180deg);
  }
  
  .flip-box-front11, .flip-box-back11 {
    border-radius: 20%;
    backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
  .flip-box11:hover .flip-box-inner11 {
    transform: rotateY(180deg);
  }

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loading {
    position: relative;
    width: 33.3vw;
    height: 33.3vw;
    display: flex;
    align-items: center;
    justify-content: center;

}

.loading span{
    position: absolute;
    border-radius: 30%;
    animation: a1 2.5s linear infinite;

}

.loading span:nth-child(1){
    animation-delay: 0s;
}
.loading span:nth-child(2){
    animation-delay: 0.5s;
}
.loading span:nth-child(3){
    animation-delay: 1s;
}


@keyframes a1{
    0%{
        width: 100%;
        height: 100%;
        opacity: 0;
        box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.863);

    }
    100%{
        width: 0%;
        height: 0%;
        opacity: 1;
        box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.89);

    }
}


/* flip box 12 */
.flip-box12 h1 {
  font-size:8vh;
}
.flip-box12 {
  /* grid-area: flip-box12; */
  width: 33.3vw;
  height: 33.3vw;
  border-radius: 20%;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner12 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front12 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  color: black;
}

.flip-box-back12 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front12, .flip-box-back12 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box12:hover .flip-box-inner12 {
  transform: rotateY(180deg);
}

/* flip box 13 */
.flip-box13 h1 {
  font-size:8vh;
}
.flip-box13 {
  /* grid-area: flip-box13; */
  width: 33.3vw;
  height: 33.3vw;
  border-radius: 20%;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner13 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front13 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  color: black;
}

.flip-box-back13 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front13, .flip-box-back13 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box13:hover .flip-box-inner13 {
  transform: rotateY(180deg);
}



/* flip box 14 */
.flip-box14 h1 {
  font-size:8vh;
}
.flip-box14 {
  /* grid-area: flip-box14; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner14 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front14 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  color: black;
}

.flip-box-back14 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front14, .flip-box-back14 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box14:hover .flip-box-inner14 {
  transform: rotateY(180deg);
}

/* flip box 15 */
.flip-box15 h1 {
  font-size:8vh;
}
.flip-box15 {
  /* grid-area: flip-box15; */
  border-radius: 50%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner15 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front15 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  color: black;
}

.flip-box-back15 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front15, .flip-box-back15 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box15:hover .flip-box-inner15 {
  transform: rotateY(180deg);
}


/* flip box 16 */
.flip-box16 h1 {
  font-size:8vh;
}
.flip-box16 {
  /* grid-area: flip-box16; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner16 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front16 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  color: black;
}

.flip-box-back16 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front16, .flip-box-back16 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box16:hover .flip-box-inner16 {
  transform: rotateY(180deg);
}

/* flip box 17 */
.flip-box17 h1 {
  font-size:8vh;
}
.flip-box17 {
  /* grid-area: flip-box17; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner17 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front17 {
  border-radius: 20%;
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  color: black;
}

.flip-box-back17 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front17, .flip-box-back17 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box17:hover .flip-box-inner17 {
  transform: rotateY(180deg);
}

/* flip box 18 */
.flip-box18 h1 {
  font-size:8vh;
}
.flip-box18 {
  /* grid-area: flip-box18; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner18 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front18 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back18 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front18, .flip-box-back18 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box18:hover .flip-box-inner18 {
  transform: rotateY(180deg);
}

/* flip box 19 */
.flip-box19 h1 {
  font-size:9vh;
}
.flip-box19 {
  /* grid-area: flip-box19; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner19 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front19 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back19 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front19, .flip-box-back19 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box19:hover .flip-box-inner19 {
  transform: rotateY(180deg);
}

/* flip box 20 */
.flip-box20 h1 {
  font-size:8vh;
}
.flip-box20 {
  /* grid-area: flip-box20; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner20 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front20 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back20 {
  border-radius: 20%;
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front20, .flip-box-back20 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box20:hover .flip-box-inner20 {
  transform: rotateY(180deg);
}

/* flip box 21 */
.flip-box21 h1 {
  font-size:8vh;
}
.flip-box21 {
  /* grid-area: flip-box21; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner21 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front21 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back21 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front21, .flip-box-back21 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box21:hover .flip-box-inner21 {
  transform: rotateY(180deg);
}

/* flip box 22 */
.flip-box22 h1 {
  font-size:8vh;
}
.flip-box22 {
  /* grid-area: flip-box22; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner22 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front22 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back22 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front22, .flip-box-back22 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box22:hover .flip-box-inner22 {
  transform: rotateY(180deg);
}

/* flip box 23 */
.flip-box23 h1 {
  font-size:8vh;
}
.flip-box23 {
  /* grid-area: flip-box23; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner23 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front23 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back23 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front23, .flip-box-back23 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box23:hover .flip-box-inner23 {
  transform: rotateY(180deg);
}

/* flip box 24 */
.flip-box24 h1 {
  font-size:8vh;
}
.flip-box24 {
  /* grid-area: flip-box24; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner24 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front24 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back24 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front24, .flip-box-back24 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box24:hover .flip-box-inner24 {
  transform: rotateY(180deg);
}

/* flip box 25 */
.flip-box25 h1 {
  font-size:8vh;
}
.flip-box25 {
  /* grid-area: flip-box25; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner25 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front25 {
  border-radius: 20%;
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  color: black;
}

.flip-box-back25 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front25, .flip-box-back25 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box25:hover .flip-box-inner25 {
  transform: rotateY(180deg);
}

/* flip box 26 */
.flip-box26 h1 {
  font-size:8vh;
}
.flip-box26 {
  /* grid-area: flip-box26; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner26 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front26 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back26 {
  border-radius: 20%;
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front26, .flip-box-back26 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box26:hover .flip-box-inner26 {
  transform: rotateY(180deg);
}

/* flip box 27 */
.flip-box27 h1 {
  font-size:8vh;
}
.flip-box27 {
  /* grid-area: flip-box27; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner27 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front27 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back27 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front27, .flip-box-back27 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box27:hover .flip-box-inner27 {
  transform: rotateY(180deg);
}

/* flip box 28 */
.flip-box28 h1 {
  font-size:8vh;
}
.flip-box28 {
  /* grid-area: flip-box28; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner28 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front28 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back28 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front28, .flip-box-back28 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box28:hover .flip-box-inner28 {
  transform: rotateY(180deg);
}

/* flip box 29 */
.flip-box29 h1 {
  font-size:8vh;
}
.flip-box29 {
  /* grid-area: flip-box29; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner29 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front29 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back29 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front29, .flip-box-back29 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box29:hover .flip-box-inner29 {
  transform: rotateY(180deg);
}

/* flip box 30 */
.flip-box30 h1 {
  font-size:8vh;
}
.flip-box30 {
  /* grid-area: flip-box30; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner30 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front30 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back30 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front30, .flip-box-back30 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box30:hover .flip-box-inner30 {
  transform: rotateY(180deg);
}


/* flip box 31 */
.flip-box31 h1 {
  font-size:8vh;
}
.flip-box31 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner31 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front31 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back31 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front31, .flip-box-back31 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box31:hover .flip-box-inner31 {
  transform: rotateY(180deg);
}


/* flip box 32 */
.flip-box32 h1 {
  font-size:8vh;
}
.flip-box32 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner32 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front32 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back32 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front32, .flip-box-back32 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box32:hover .flip-box-inner32 {
  transform: rotateY(180deg);
}

/* flip box 33 */
.flip-box33 h1 {
  font-size:8vh;
}
.flip-box33 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner33 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front33 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back33 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front33, .flip-box-back33 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box33:hover .flip-box-inner33 {
  transform: rotateY(180deg);
}

/* flip box 34 */
.flip-box34 h1 {
  font-size:8vh;
}
.flip-box34 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner34 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front34 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back34 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front34, .flip-box-back34 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box34:hover .flip-box-inner34 {
  transform: rotateY(180deg);
}


/* flip box 35 */
.flip-box35 h1 {
  font-size:8vh;
}
.flip-box35 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner35 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front35 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back35 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front35, .flip-box-back35 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box35:hover .flip-box-inner35 {
  transform: rotateY(180deg);
}

/* flip box 36 */
.flip-box36 h1 {
  font-size:8vh;
}
.flip-box36 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner36 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front36 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back36 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front36, .flip-box-back36 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box36:hover .flip-box-inner36 {
  transform: rotateY(180deg);
}

/* flip box 37 */
.flip-box37 h1 {
  font-size:8vh;
}
.flip-box37 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner37 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front37 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back37 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front37, .flip-box-back37 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box37:hover .flip-box-inner37 {
  transform: rotateY(180deg);
}

/* flip box 38 */
.flip-box38 h1 {
  font-size:8vh;
}
.flip-box38 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner38 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front38 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back38 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front38, .flip-box-back38 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box38:hover .flip-box-inner38 {
  transform: rotateY(180deg);
}

/* flip box 39 */
.flip-box39 h1 {
  font-size:8vh;
}
.flip-box39 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner39 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front39 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back39 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front39, .flip-box-back39 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box39:hover .flip-box-inner39 {
  transform: rotateY(180deg);
}

/* flip box 40 */
.flip-box40 h1 {
  font-size:8vh;
}
.flip-box40 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner40 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front40 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back40 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front40, .flip-box-back40 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box40:hover .flip-box-inner40 {
  transform: rotateY(180deg);
}

/* flip box 41 */
.flip-box41 h1 {
  font-size:8vh;
}
.flip-box41 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner41 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front41 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back41 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front41, .flip-box-back41 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box41:hover .flip-box-inner41 {
  transform: rotateY(180deg);
}

/* flip box 42 */
.flip-box42 h1 {
  font-size:8vh;
}
.flip-box42 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner42 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front42 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back42 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front42, .flip-box-back42 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box42:hover .flip-box-inner42 {
  transform: rotateY(180deg);
}


/* flip box 43 */
.flip-box43 h1 {
  font-size:8vh;
}
.flip-box43 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner43 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front43 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back43 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front43, .flip-box-back43 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box43:hover .flip-box-inner43 {
  transform: rotateY(180deg);
}

/* flip box 44 */
.flip-box44 h1 {
  font-size:8vh;
}
.flip-box44 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner44 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front44 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back44 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front44, .flip-box-back44 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box44:hover .flip-box-inner44 {
  transform: rotateY(180deg);
}


/* flip box 45 */
.flip-box45 h1 {
  font-size:8vh;
}
.flip-box45 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner45 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front45 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back45 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front45, .flip-box-back45 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box45:hover .flip-box-inner45 {
  transform: rotateY(180deg);
}

/* flip box 46 */
.flip-box46 h1 {
  font-size:8vh;
}
.flip-box46 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner46 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front46 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back46 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front46, .flip-box-back46 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box46:hover .flip-box-inner46 {
  transform: rotateY(180deg);
}

/* flip box 47 */
.flip-box47 h1 {
  font-size:8vh;
}
.flip-box47 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner47 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front47 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(147, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back47 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(147, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front47, .flip-box-back47 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box47:hover .flip-box-inner47 {
  transform: rotateY(180deg);
}


/* flip box 48 */
.flip-box48 h1 {
  font-size:8vh;
}
.flip-box48 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner48 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front48 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(148, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back48 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(148, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front48, .flip-box-back48 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box48:hover .flip-box-inner48 {
  transform: rotateY(180deg);
}

/* flip box 49 */
.flip-box49 h1 {
  font-size:8vh;
}
.flip-box49 {
  /* grid-area: flip-box31; */
  border-radius: 20%;
  width: 33.3vw;
  height: 33.3vw;
  border: 1px black;
  perspective: 800px;
}

.flip-box-inner49 {
  position: relative;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front49 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(228, 160, 255) 30%, white);
  /* background-image: radial-gradient(rgb(149, 255, 150) 30%, white); */
  color: black;
}

.flip-box-back49 {
  border-radius: 20%;
  background-image: radial-gradient(rgb(149, 255, 150) 30%, white);
  /* background-image: radial-gradient(rgb(228, 160, 255) 30%, white); */
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front49, .flip-box-back49 {
  border-radius: 20%;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-box49:hover .flip-box-inner49 {
  transform: rotateY(180deg);
}















/* box shadow */

.shadow1 {
  width: 900px;
  height: 700px;
  position: absolute;
  border-radius: 100%;
  box-shadow: 100px -100px 90px 115px #ffffff5d, 
  24px -50px 47px 50px #ffffff76, 
  -20px -80px 97px 80px rgb(228, 160, 255), 
  70px 70px 170px 50px rgba(228, 160, 255, 0.138), 
  -100px 40px 47px 80px rgba(228, 160, 255, 0.475);
  animation: shadow-rotate 10s linear infinite;
}
@keyframes shadow-rotate {
  from {
    transform: translate (100%, 100%) rotate(-90deg);
  }
  to {
    transform: translate(100%, 100%) rotate(-360deg);
  }
}

.shadow2 {
  width: 100px;
  height: 300px;
  position: absolute;
  border-radius: 100%;
  box-shadow: 100px -100px 90px 115px #ffffff30, 
  24px -50px 47px 50px #ffffff41, 
  -20px -80px 97px 80px 255,rgba(255, 218, 253, 0.193), 
  70px 70px 170px 50px rgb(228, 160, 255),
  -100px 40px 47px 80px rgba(255, 218, 253, 0.083);
  animation: shadow-rotate 10s linear infinite;
}
@keyframes shadow-rotate {
  0% {
    transform: translate (0%, 0%) rotate(90deg);
    top: 0;
    left: 0%;
  }
  50% {
    transform: translate(0%, 0%) rotate(360deg);
    top: 50%;
    left: calc(100% - 900px);
   
  }
  100% {
    transform: translate(0%, 0%) rotate(0deg);
    top: 0;
    left: 0%;
  }
}

.shadow3 {
  z-index: 300;
  width: 900px;
  height: 700px;
  position: absolute;
  border-radius: 100%;
  box-shadow: 100px -100px 90px 115px #ffffff5d, 
  24px -50px 47px 50px rgba(227, 157, 255, 0.361), 
  -20px -80px 97px 80px rgb(228, 160, 255), 
  70px 70px 170px 50px #ffffff41, 
  -100px 40px 47px 80px rgba(228, 160, 255, 0.381);
  animation: shadow-rotate 10s linear infinite;
}
@keyframes shadow-rotate {
  from {
    transform: translate (100%, 100%) rotate(-90deg);
  }
  to {
    transform: translate(100%, 100%) rotate(-360deg);
  }
}

.shadow4 {
  z-index: 300;
  width: 100px;
  height: 300px;
  position: absolute;
  border-radius: 100%;
  box-shadow: 100px -100px 90px 115px #ffffff41, 
  24px -50px 47px 50px #ffffff41, 
  -20px -80px 97px 80px 255,#ffffff41, 
  70px 70px 170px 50px #ffffff41,
  -100px 40px 47px 80px rgb(228, 160, 255);
  animation: shadow-rotate 10s linear infinite;
}
@keyframes shadow-rotate {
  0% {
    transform: translate (0%, 0%) rotate(90deg);
    top: 40%;
    left: 0%;
  }

  50% {
    transform: translate(0%, 0%) rotate(360deg);
    top: 0%;
    right: calc(100% - 900px);
  }
  75% {
    transform: translate(0%, 0%) rotate(360deg);
    top:30%;
    left: calc(100% - 900px);
  }
  100% {
    transform: translate(0%, 0%) rotate(0deg);
    top: 40%;
    left: 0%;
  }
}