*{
  margin: 0;
  padding: 0;  
}
html{
  font-family: Poppins;
  color: #f0f0f0;
}
bxBody{
  min-height: 100vh;
  background:rgba(15,15,25.4);
  color: rgba(162,165,179,.4);
  align-content: center;
  filter: blur-background(1.8rem);
  

}
bxH1{
  color: white;
}




@media screen and (min-width: 490px) {
  .bxAniCss{
  margin: -10% -10% -10% 0%;
  padding: .25em 1em .25em 1em;
  width: max-content;
  background: rgba(55,55,215,.0);
  filter: blur-background(2.8rem);

  text-align: center;
  border-radius: 0%;
  position: relative;
  }
}
/* Mobile Version */
@media screen and (max-width: 490px) {
  .bxAniCss{
  margin: -5% -5% -5% 0%;
  
  
  /*margin: -1% -10% -5% 15%;*/
  padding: 1rem 0rem 1rem 0rem;
  /*width: max-content;*/
  
  filter: blur-background(1.8rem);
  
   position: absolute;
  z-index:9;
  }
}
.bxAniLogoCss{
  margin: -10% -10% -10% 0%;
  padding: .25em .4em .25em .4em;
  width: max-content;
  background: rgba(55,55,215,.0);
  filter: blur-background(1.8rem);

  text-align: center;
  border-radius: 0%;
  position: relative;
  
  
}
.bxAniCss2{
  /*margin: -30% -30% -30% 0%;*/
  padding: 0% 0% 0% 0%;
  width: max-content;
  background: rgba(55,55,215,.0);
  filter: blur-background(1.8rem);

  text-align: center;
  border-radius: 0%;
  position: relative;
  
  
}

@property --angle{
  syntax: "<angle>";
  initial-value: 130deg;
  inherits: false;
  
}
.bxAniCss2::after, .bxAniCss::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 80%;
  /*background-image: conic-gradient(from var(--angle), #0101af, #27c7eb, #006aff, #2241d9, #68b7fc);*/
  
  top: 30%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 1%;
  border-radius: 1%;
  opacity: .4;
  animation: 4s anibox linear infinite;
  filter: blur(3.8rem);
}
.bxAniCss2::before{
  filter: blur(1.8rem);
  opacity: 0.5;

}
.bxAniCss::after, .bxAniCss::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 80%;
  /*background-image: conic-gradient(from var(--angle), #0101af, #27c7eb, #006aff, #2241d9, #68b7fc);*/
  
  top: 30%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 1%;
  border-radius: 1%;
  opacity: .4;
  animation: 4s anibox linear infinite;
  filter: blur(3.8rem);
}
.bxAniCss::before{
  filter: blur(1.8rem);
  opacity: 0.5;

}
.bxOpac {
  opacity: .3;
}
/*@keyframes spin{
  from{
    --angle: 0deg;
  }
  to{
    --angle: 360deg;
  }*/
  @keyframes anibox{
   25%   {background-color: rgba(3, 26, 155,.5);}
  50%   {background-color: rgba(3, 26, 155,.5);}
   25%  {background-color: rgba(29, 174, 253, 0.8);}
  50%  {background-color: rgba(35,66,200,.7);}
  45% {background-color: rgba(108, 52, 251, 0.5);}
  50%   {background-color: rgba(3, 26, 155,.8);}
  25% {background-color: rgba(108, 52, 251, 0.7);}
  45% {background-color: rgba(108, 52, 251, 0.5);}
  75% {background-color: rgba(108, 52, 251, 0.7);}

  }