@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Manrope:wght@200..800&display=swap');
.btn-a{
  text-decoration:none;
}
.btn-a:hover > .btn-w > .circle{
  background:#000;
}
.btn-a:hover > .btn-w > .circle > svg > path{
  fill:#fff;
}
.btn-w{
  width:295px;
  height:90px;
  background:#fff;
  border-radius:84px;
  display:flex;
  align-items:center;
  gap:25px;
  justify-content:right;
  box-shadow: inset 0 -3px 26px #80CAFF;
  animation: 6s infinite normal inner-shadow;
}
@keyframes inner-shadow{
  20%{
    box-shadow: inset 0 -3px 26px #00FF94;
  }
  40%{
    box-shadow: inset 0 -3px 26px #F37500;
  }
  60%{
     box-shadow: inset 0 -3px 26px #FF2E00;
  }
  80%{
    box-shadow: inset 0 -3px 26px #8425C1;
  }
  100%{
    box-shadow: inset 0 -3px 26px #80CAFF;
  }
}
.btn-w > div {
  margin-right:10px;
}
.btn-w > p{
  font-size:22px;
  font-family: "Manrope", sans-serif;
  font-weight:600;
  color:#000;
}
.circle{
  width:70px;
  height:70px;
  background:transparent;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
/*-------------------------------------*/
.smile-emojy{
  animation: 6s infinite normal move-smile;
}
.smile-emojy > circle, .happy-emojy > circle, .wow-emojy > circle{
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
@keyframes move-smile{
  25%{
    transform: perspective(40px) rotateX(-25deg);
  }
  50%{
    transform: perspective(90px) rotateX(0deg);
  }
  75%{
     transform: perspective(40px) rotateX(-25deg);
  }
  100%{
    transform: perspective(90px) rotateX(0deg);
  }
}
/*--------------------------------------------------*/
.happy-emojy{
  animation: 6s infinite normal move-happy;
}

@keyframes move-happy{
  12%{
    transform: translate(5px, -5px) rotate(15deg);
  }
  24%{
    transform: translate(10px, 0px) rotate(30deg);
  }
  36%{
     transform: translate(5px, -5px) rotate(15deg);
  }
  48%{
    transform: translate(0px, 0px) rotate(0deg);
  }
  60%{
    transform: translate(5px, -5px) rotate(15deg);
  }
  72%{
    transform: translate(10px, 0px) rotate(30deg);
  }
  84%{
     transform: translate(5px, -5px) rotate(15deg);
  }
  100%{
    transform: translate(0px, 0px) rotate(0deg);
  }
}
/*---------------------------------------------*/
.wow-emojy{
  animation: 6s infinite normal move-wow;
}
@keyframes move-wow{
  12%{
    transform: scale(1.1) rotate(15deg);
  }
  24%{
    transform: scale(1) rotate(0deg);
  }
  36%{
     transform: scale(1.1) rotate(-30deg);
  }
  48%{
    transform: scale(1) rotate(0deg);
  }
   60%{
    transform: scale(1.1) rotate(15deg);
  }
  72%{
    transform: scale(1) rotate(0deg);
  }
  84%{
     transform: scale(1.1) rotate(-30deg);
  }
  100%{
    transform: scale(1) rotate(0deg);
  }
}
/*--------------------------------------------*/
.chover:hover{
    color:#00FF94 !important;
}
/*--------------------------------------------*/
.log-in-href{
  text-decoration: none;
}
.log-in-href:hover > .log-in-btn{
  background:#292929;
}
.log-in-btn{
  width:157px;
  height:35px;
  background:#232323;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:93px;
  gap:7px;
}
.log-in-btn > p{
  color:#fff;
  font-size:12px;
  font-family: "Manrope", sans-serif;
}