html{
  background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(145,0,255,1) 100%);
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    overflow:hidden;
}

#audioPlay{
  width:90%;
  height:90%
}
body {
  background: rgb(10 10 10);
  background: linear-gradient(177deg, rgb(32 95 176) 0%, rgb(0 0 0) 35%, rgb(5 41 55) 100%);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
}

#audioToggle {
  width: 100vw;
  background-color: rgba(0,0,0,0.2);
  border: none;
  color: #eeeeee;
  height: 100px;
  width: 100px;
  cursor: pointer;
  z-index: 999;
  border-radius: 100%;
  padding: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

#audioSlider {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  padding: 2px;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  z-index: 99999;
  transform: translate3d3d(-50%,-50%,0);
  -webkit-animation: pulse linear .5s infinite;
  animation: pulse linear .5s infinite;
  -o-transition-property: all;
  transition: move 3s ease-in;
  margin: 0px auto;
}

magic-book{
  background-image:url(https://res.cloudinary.com/wikacy-com/video/upload/q_auto/v1698342107/user-audio/battlecry-two-steps-from-hell-spellcaster_xkwjsa.mp3);
}


@-webkit-keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .1; } 
	100% { opacity: 1; }
}
@keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .1; } 
	100% { opacity: 1; }
}

/*flash-rotate*/
@-webkit-keyframes flash-rotate {
	0% { opacity: 1;
  transform:rotate(33deg) } 
	50% { opacity: .8;
    transform:rotate(66deg) } 
	100% { opacity: 1;
    transform:rotate(99deg) }
}
@keyframes flash-rotate {
	0% { opacity: 1; 
    transform:rotate(33deg)} 
	50% { opacity: .8;
    transform:rotate(66deg) } 
	100% { opacity: 1; 
    transform:rotate(99deg) }
}

@-webkit-keyframes pulse {
	0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}

70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}

100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
@keyframes pulse {
	0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}

70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}

100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}

@keyframes move {
  0% {
    bottom: 40%;
    left: 35%;
    width: 60px;
    height:60px;

  }

  50% {
    bottom: 25%;
  left: 35%;
  width: 55px;
  height:55px;

  }

  100%{
    bottom: 10%;
  left: 35%;
  width:50px;
  height:50px;


  }
}
#light-cont {
  position: absolute;
  bottom: 50vh;
  left: 50vw;
  z-index: 999;
  display: flex;
  width: 100px;
  border-radius: 100%;
  transform: translate3d(-50%,50%,0);
  justify-content: center;
}


canvas {
  position: relative;
  width: 100px;
  border-radius: 100%;
  box-shadow: 20px 20px 20px #fff;
  z-index: 9;
}


@media screen and (min-width:500px){
  #strike{z-index: 999;
    display: inline-block;
    width: 300px;
    height: 500px;
    position: absolute;
    left: 45%;
    top: 60%!important;
    transform: translate3d3d(-50%,-70%,0) rotate(-12deg);
    animation: flash-rotate linear 0.2s infinite;
    display:inline-block;
  }
  canvas {
    position: relative;
    width: 100px;
    border-radius: 100%;
    box-shadow: 20px 20px 20px #fff;
    z-index: 9;
}
}
#magicbooks-app-icon {
  width: 100%;
  height: 100%;
  z-index: 9999;
  position: absolute;
}
@media screen and (max-width:420px){
  
  #strike{
  z-index: 999;
  display: inline-block;
  width: 300px;
  height: 500px;
  position: absolute;
  left: 0%;
  top: 0%!important;
  transform: translate3d3d(-50%,-50%,0) rotate(-12deg);
  animation: flash-rotate linear 2.2s infinite;
  display:inline-block;

  }
}
#strike img{
  z-index:999;display:inline-block;width: 
    300px; height: 500px;position:absolute;left:0%;top:0%;transform:translate3d(-50%,-50%,0) rotate(-12deg);animation: flash-rotate linear 0.2s infinite;
  
  }

  .rain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }
  
  .drop {
    position: absolute;
    width: 1px;
    height: 60px;
    background-color: #fff;
    animation: rain-fall 1s linear infinite;
  }
  
  @keyframes rain-fall {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    100% {
      transform: translateY(100vh);
      opacity: 1;
    }
  }