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


    body {
        background-color: white;
      }
    p {
        font-size:3vh;
    }

    h3 {
        font-size: 2.5vh;
        height: 2.5vh;
        width: 100%;
        top: 0rem;
    }
    h4 {
      font-size: 2.5vh;
      height: 2.5vh;
      width: 100%;
      top: 0rem;
  }
    h2 {
      font-size: 14.6vw;
        word-break: break-word;
    }
    h1 {
      font-size: 3vh;
    }
    .loading {
      position: relative;
      width: 100vw;
      height: 100vw;
      display: flex;
      align-items: center;
      justify-content: center;
  }
    .container0{
      height: 90vh;
      margin-top: 20%;
    }
    .container1{
      height: 100%;
    }
    
   .flip-box h1{
     font-size: 8vh;
   }
   .flip-box1 {
    height: 100vw;
    width: 100vw;
  }
  .flip-box2 {
    height: 100vw;
    width: 100vw;
  }
  .flip-box3 {
    height: 100vw;
    width: 100vw;
  }
  .flip-box4 {
    height: 100vw;
    width: 100vw;
  }
  .flip-box5 {
    height: 100vw;
    width: 100vw;
  }
  .flip-box6 {
    height: 100vw;
    width: 100vw;
  }
  .flip-box7 {
    height: 100vw;
    width: 100vw;
  }
  .flip-box8 {
    height: 100vw;
    width: 100vw;
  }
  .flip-box9 {
    height: 100vw;
    width: 100vw;
  }
  .flip-box10 {
    height: 100vw;
    width: 100vw;
  }



  .flip-box11 {
    height: 100vw;
    width: 100vw;
  }
  .flip-box12 {
    height: 100vw;
    width: 100vw;
  }
  .flip-box13{
    height: 100vw;
    width: 100vw;
  }
  .flip-box14{
    height: 100vw;
    width: 100vw;
  }
  .flip-box15{
    height: 100vw;
    width: 100vw;
  }
  .flip-box16{
    height: 100vw;
    width: 100vw;
  }
  .flip-box17{
    height: 100vw;
    width: 100vw;
  }
  .flip-box18{
    height: 100vw;
    width: 100vw;
  }
  .flip-box19{
    height: 100vw;
    width: 100vw;
  }
  .flip-box20{
    height: 100vw;
    width: 100vw;
  }
  .flip-box21{
    height: 100vw;
    width: 100vw;
  }
  .flip-box22{
    height: 100vw;
    width: 100vw;
  }
  .flip-box23{
    height: 100vw;
    width: 100vw;
  }
  .flip-box24{
    height: 100vw;
    width: 100vw;
  }
  .flip-box25{
    height: 100vw;
    width: 100vw;
  }
  .flip-box26{
    height: 100vw;
    width: 100vw;
  }
  .flip-box27{
    height: 100vw;
    width: 100vw;
  }
  .flip-box28{
    height: 100vw;
    width: 100vw;
  }
  .flip-box29{
    height: 100vw;
    width: 100vw;
  }
  .flip-box30{
    height: 100vw;
    width: 100vw;
  }
  .flip-box31{
    height: 100vw;
    width: 100vw;
  }
  .flip-box32{
    height: 100vw;
    width: 100vw;
  }
  .flip-box33{
    height: 100vw;
    width: 100vw;
  }
  .flip-box34{
    height: 100vw;
    width: 100vw;
  }
  .flip-box35{
    height: 100vw;
    width: 100vw;
  }
  .flip-box36{
    height: 100vw;
    width: 100vw;
  }
  .flip-box37{
    height: 100vw;
    width: 100vw;
  }
  .flip-box38{
    height: 100vw;
    width: 100vw;
  }
  .flip-box39{
    height: 100vw;
    width: 100vw;
  }
  .flip-box40{
    height: 100vw;
    width: 100vw;
  }
  .flip-box41{
    height: 100vw;
    width: 100vw;
  }
  .flip-box42{
    height: 100vw;
    width: 100vw;
  }
  .flip-box43{
    height: 100vw;
    width: 100vw;
  }
  .flip-box44{
    height: 100vw;
    width: 100vw;
  }
  .flip-box45{
    height: 100vw;
    width: 100vw;
  }
  .flip-box46{
    height: 100vw;
    width: 100vw;
  }
  .flip-box47{
    height: 100vw;
    width: 100vw;
  }
  .flip-box48{
    height: 100vw;
    width: 100vw;
  }
  .flip-box49{
    height: 100vw;
    width: 100vw;
  }







  .shadow1 {
    width: 300px;
    height: 200px;
    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 120 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% - 450px);
     
    }
    100% {
      transform: translate(0%, 0%) rotate(0deg);
      top: 0;
      left: 0%;
    }
  }
  
  .shadow3 {
    display: none;
  }
  
  .shadow4 {
  display: none;
  }
  

  .container0 {
    height: auto !important;
    margin-top: calc(50vh - 50%);
    margin-bottom: calc(50vh - 50%);
  }


}