body {
    background-color: #212331;
}

iframe {
    width: 90%;
    height: 50vh;
    border: none;
    transition-duration: 0.3s;
    backdrop-filter: blur(10px);
}

.col {
    /* height:100vh; */
    height: 100%;
    margin-top: 40%;



}

.cent {
    margin-top: 20%;

}

#preloader {
    display: none;
    width: 0;
    height: 0;
    border: 0;
}

/* animatable base angle */

/* 1) make the “gain” animatable */
@property --g { syntax: '<number>'; inherits: false; initial-value: 0; }

#li1{
  border-radius:16px;
  --g:0;
  animation: orbit 20s linear infinite;
  background-color: rgba(0,3,1,0);                /* start transparent */
  transition: --g 1s ease-in-out, background-color 7s ease;  /* <-- add this */
}

#li1:hover,#li1:active{
  --g:1;
  background-color: rgba(0,3,1,0.699);            /* will now fade in/out */
}


/* 2) step-pulse rainbow — alphas scaled by --g so it fades away cleanly */
@keyframes orbit{
  /* base/dim */
  0%, 100%{
    box-shadow:
      0 0 0 1px     hsl(0 0% 100% / calc(.28 * var(--g))),
      0 0 12px 6px  hsl(0 0% 100% / calc(.22 * var(--g))),
      0 0 28px 14px hsl(0 0% 100% / calc(.16 * var(--g))),
      0 0 60px 28px hsl(0 0% 100% / calc(.10 * var(--g))),
      0 0 40px 10px hsl(  0 100% 60% / calc(.10 * var(--g)));
  }

  /* RED bright → dim */
  6.25%{
    box-shadow:
      0 0 0 1px     hsl(0 0% 100% / calc(.28 * var(--g))),
      0 0 12px 6px  hsl(0 0% 100% / calc(.22 * var(--g))),
      0 0 28px 14px hsl(0 0% 100% / calc(.16 * var(--g))),
      0 0 60px 28px hsl(0 0% 100% / calc(.10 * var(--g))),
      0 0 70px 22px hsl(  0 100% 60% / calc(.40 * var(--g)));
  }
  12.5%{
    box-shadow:
      0 0 0 1px     hsl(0 0% 100% / calc(.28 * var(--g))),
      0 0 12px 6px  hsl(0 0% 100% / calc(.22 * var(--g))),
      0 0 28px 14px hsl(0 0% 100% / calc(.16 * var(--g))),
      0 0 60px 28px hsl(0 0% 100% / calc(.10 * var(--g))),
      0 0 40px 10px hsl(  0 100% 60% / calc(.10 * var(--g)));
  }

  /* ORANGE */
  18.75%{
    box-shadow:
      0 0 0 1px     hsl(0 0% 100% / calc(.28 * var(--g))),
      0 0 12px 6px  hsl(0 0% 100% / calc(.22 * var(--g))),
      0 0 28px 14px hsl(0 0% 100% / calc(.16 * var(--g))),
      0 0 60px 28px hsl(0 0% 100% / calc(.10 * var(--g))),
      0 0 70px 22px hsl( 30 100% 60% / calc(.40 * var(--g)));
  }
  25%{
    box-shadow:
      0 0 0 1px     hsl(0 0% 100% / calc(.28 * var(--g))),
      0 0 12px 6px  hsl(0 0% 100% / calc(.22 * var(--g))),
      0 0 28px 14px hsl(0 0% 100% / calc(.16 * var(--g))),
      0 0 60px 28px hsl(0 0% 100% / calc(.10 * var(--g))),
      0 0 40px 10px hsl( 30 100% 60% / calc(.10 * var(--g)));
  }

  /* YELLOW */
  31.25%{
    box-shadow:
      0 0 0 1px     hsl(0 0% 100% / calc(.28 * var(--g))),
      0 0 12px 6px  hsl(0 0% 100% / calc(.22 * var(--g))),
      0 0 28px 14px hsl(0 0% 100% / calc(.16 * var(--g))),
      0 0 60px 28px hsl(0 0% 100% / calc(.10 * var(--g))),
      0 0 70px 22px hsl( 60 100% 60% / calc(.40 * var(--g)));
  }
  37.5%{
    box-shadow:
      0 0 0 1px     hsl(0 0% 100% / calc(.28 * var(--g))),
      0 0 12px 6px  hsl(0 0% 100% / calc(.22 * var(--g))),
      0 0 28px 14px hsl(0 0% 100% / calc(.16 * var(--g))),
      0 0 60px 28px hsl(0 0% 100% / calc(.10 * var(--g))),
      0 0 40px 10px hsl( 60 100% 60% / calc(.10 * var(--g)));
  }

  /* GREEN */
  43.75%{
    box-shadow:
      0 0 0 1px     hsl(0 0% 100% / calc(.28 * var(--g))),
      0 0 12px 6px  hsl(0 0% 100% / calc(.22 * var(--g))),
      0 0 28px 14px hsl(0 0% 100% / calc(.16 * var(--g))),
      0 0 60px 28px hsl(0 0% 100% / calc(.10 * var(--g))),
      0 0 70px 22px hsl(120 100% 60% / calc(.40 * var(--g)));
  }
  50%{
    box-shadow:
      0 0 0 1px     hsl(0 0% 100% / calc(.28 * var(--g))),
      0 0 12px 6px  hsl(0 0% 100% / calc(.22 * var(--g))),
      0 0 28px 14px hsl(0 0% 100% / calc(.16 * var(--g))),
      0 0 60px 28px hsl(0 0% 100% / calc(.10 * var(--g))),
      0 0 40px 10px hsl(120 100% 60% / calc(.10 * var(--g)));
  }

  /* CYAN */
  56.25%{
    box-shadow:
      0 0 0 1px     hsl(0 0% 100% / calc(.28 * var(--g))),
      0 0 12px 6px  hsl(0 0% 100% / calc(.22 * var(--g))),
      0 0 28px 14px hsl(0 0% 100% / calc(.16 * var(--g))),
      0 0 60px 28px hsl(0 0% 100% / calc(.10 * var(--g))),
      0 0 70px 22px hsl(180 100% 60% / calc(.40 * var(--g)));
  }
  62.5%{
    box-shadow:
      0 0 0 1px     hsl(0 0% 100% / calc(.28 * var(--g))),
      0 0 12px 6px  hsl(0 0% 100% / calc(.22 * var(--g))),
      0 0 28px 14px hsl(0 0% 100% / calc(.16 * var(--g))),
      0 0 60px 28px hsl(0 0% 100% / calc(.10 * var(--g))),
      0 0 40px 10px hsl(180 100% 60% / calc(.10 * var(--g)));
  }

  /* BLUE */
  68.75%{
    box-shadow:
      0 0 0 1px     hsl(0 0% 100% / calc(.28 * var(--g))),
      0 0 12px 6px  hsl(0 0% 100% / calc(.22 * var(--g))),
      0 0 28px 14px hsl(0 0% 100% / calc(.16 * var(--g))),
      0 0 60px 28px hsl(0 0% 100% / calc(.10 * var(--g))),
      0 0 70px 22px hsl(240 100% 60% / calc(.40 * var(--g)));
  }
  75%{
    box-shadow:
      0 0 0 1px     hsl(0 0% 100% / calc(.28 * var(--g))),
      0 0 12px 6px  hsl(0 0% 100% / calc(.22 * var(--g))),
      0 0 28px 14px hsl(0 0% 100% / calc(.16 * var(--g))),
      0 0 60px 28px hsl(0 0% 100% / calc(.10 * var(--g))),
      0 0 40px 10px hsl(240 100% 60% / calc(.10 * var(--g)));
  }

  /* MAGENTA */
  81.25%{
    box-shadow:
      0 0 0 1px     hsl(0 0% 100% / calc(.28 * var(--g))),
      0 0 12px 6px  hsl(0 0% 100% / calc(.22 * var(--g))),
      0 0 28px 14px hsl(0 0% 100% / calc(.16 * var(--g))),
      0 0 60px 28px hsl(0 0% 100% / calc(.10 * var(--g))),
      0 0 70px 22px hsl(300 100% 60% / calc(.40 * var(--g)));
  }
  87.5%{
    box-shadow:
      0 0 0 1px     hsl(0 0% 100% / calc(.28 * var(--g))),
      0 0 12px 6px  hsl(0 0% 100% / calc(.22 * var(--g))),
      0 0 28px 14px hsl(0 0% 100% / calc(.16 * var(--g))),
      0 0 60px 28px hsl(0 0% 100% / calc(.10 * var(--g))),
      0 0 40px 10px hsl(300 100% 60% / calc(.10 * var(--g)));
  }

  /* close the loop gently */
  93.75%{
    box-shadow:
      0 0 0 1px     hsl(0 0% 100% / calc(.28 * var(--g))),
      0 0 12px 6px  hsl(0 0% 100% / calc(.22 * var(--g))),
      0 0 28px 14px hsl(0 0% 100% / calc(.16 * var(--g))),
      0 0 60px 28px hsl(0 0% 100% / calc(.10 * var(--g))),
      0 0 40px 10px hsl(  0 100% 60% / calc(.10 * var(--g)));
  }
}




@media screen and (min-height:935px) {
    iframe {
        width: 90%;
        height: 45vh;
        max-height: 500px;
        overflow: hidden;

    }
}

@media screen and (max-width:2000px) {
    iframe {
        width: 90%;
        max-height: 90vh;
        overflow: hidden;
    }
}

@media screen and (max-width:1200px) {
    .container {
        margin: 0px;
        max-width: 99999px;
    }

}

@media screen and (max-width:1022px) {
    .container {
        margin: 0px;
        max-width: 99999px;
    }

    .padd-0 {
        padding: 0%;
    }

    iframe {
        width: 97%;


    }
}

@media screen and (max-height:935px) {
    iframe {
        width: 90%;
        height: minmax(52vh, 500px);
        overflow: none;

    }

    .cent {
        margin-top: 15%;
    }
}

@media screen and (max-height:834px) {
    iframe {
        width: 90%;
        height: 59vh;

    }

    .cent {
        margin-top: 13%;
    }
}

@media screen and (max-height:745px) {
    iframe {
        width: 90%;
        /* height:90vh; */

    }

    .cent {
        margin-top: 10%;
    }
}

@media screen and (max-height:717px) {
    iframe {

        height: 65vh;

    }
}

@media screen and (max-height:623px) {
    iframe {
        width: 90%;
        height: 70vh;
        margin-top: 5vh;

    }

    .cent {
        margin-top: 7%;
        height: 90vh;
    }

    .container {
        height: 90vh;
    }
}

@media screen and (max-height:573px) {
    iframe {
        margin-top: 2vh;
        width: 90%;
        height: 75vh;

    }

    .cent {
        margin-top: 6%;
    }
}

@media screen and (max-height:529px) {
    iframe {
        width: 90%;
        height: 89vh;

    }

    .cent {
        margin-top: 4%;
    }
}

@media screen and (max-height:465px) {
    iframe {
        width: 90%;
        height: 94vh;

    }

    .cent {
        margin-top: 3%;
    }
}

@media screen and (max-height:465px) {
    iframe {
        width: 90%;
        height: 100vh;

    }

    .cent {
        margin-top: 0%;
    }
}

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

    .container {
        margin: 0px;
        max-width: 99999px;
    }

    iframe {
        height: 85vh;

    }
}

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

    .container {
        margin: 0px;
        max-width: 99999px;
    }

    iframe {
        height: 90vh;
        max-height: initial;

    }
}