/* base.css */



html,
body{

  margin:0;
  padding:0;

  overflow-x:hidden;
}



#musicToggle{

  position:absolute;

  top:24px;
  right:24px;

  width:62px;
  height:62px;

  border:none;
  border-radius:999px;

  cursor:pointer;

  z-index:999999;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
  rgba(255,255,255,0.18);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  box-shadow:
  0 10px 35px rgba(0,0,0,0.10);

  margin:0;

  transition:
  transform .28s cubic-bezier(.2,.8,.2,1),
  background .28s ease,
  box-shadow .28s ease,
  opacity .28s ease;
}



#musicToggle .icon{

  width:26px;
  height:26px;

  object-fit:contain;

  pointer-events:none;
  user-select:none;

  transition:
  transform .35s cubic-bezier(.2,.8,.2,1),
  opacity .25s ease,
  filter .25s ease;
}


#musicToggle:hover{

  background:
  rgba(255,255,255,0.28);

  box-shadow:
  0 18px 45px rgba(0,0,0,0.14);

  transform:
  translateY(-2px)
  scale(1.04);
}



#musicToggle:active{

  transform:
  scale(0.88);
}



#musicToggle.switching .icon{

  animation:
  musicPop .45s cubic-bezier(.2,.8,.2,1);
}



@keyframes musicPop{

  0%{

    transform:
    scale(.55)
    rotate(-18deg);

    opacity:.4;

    filter:
    blur(2px);
  }

  45%{

    transform:
    scale(1.22)
    rotate(12deg);

    opacity:1;
  }

  100%{

    transform:
    scale(1)
    rotate(0deg);

    opacity:1;

    filter:
    blur(0px);
  }

}



@media(max-width:768px){

  #musicToggle{

    top:18px;
    right:18px;

    width:56px;
    height:56px;
  }

  #musicToggle .icon{

    width:22px;
    height:22px;
  }

}