/* base.css */

html,
body{

  margin:0;
  padding:0;

  overflow-x:hidden;
  min-height:100vh;
}


/* FUNDO */

.background-blur{

  position:fixed;
  inset:0;

  background:
  linear-gradient(
    rgba(255,210,230,.28),
    rgba(255,225,240,.38)
  ),
  url("../../images/minions.png");

  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  z-index:-2;

  filter:blur(3px);
  transform:scale(1.04);
}


/* BOTÃO MUSICA */

#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,235,245,0.45);

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

  box-shadow:
  0 10px 35px rgba(255,170,200,0.28);

  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,225,240,0.72);

  box-shadow:
  0 18px 45px rgba(255,160,195,0.36);

  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;
  }

}