<div class="card">
      <h3>Are you Sure about unsubscribing?</h3>
      <p>
        If you unsubscribe, you will stop receving our latest deals and updates
      </p>

      <button class="btn btn-primary">I'd rather stay</button>
      <button class="btn btn-secondary">Unsubcribe me</button>

      <div class="emo-container">
        <div class="bunny">
          <div class="ear l"></div>
          <div class="ear r"></div>
          <div class="face">
            <div class="eye l"></div>
            <div class="eye r"></div>
            <div class="nose"></div>
            <div class="mouth"></div>
            <div class="mostash l"></div>
            <div class="mostash r"></div>
          </div>
          <div class="hand l"></div>
          <div class="hand r"></div>

          <div class="leg l"></div>
          <div class="leg r"></div>
          <div class="tail"></div>
        </div>
      </div>
    </div>

$snd: #d571a6;
$speed: 0.35s;
$timing: ease-out;

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Poppins";
  background: #3173f6;
  background-size: cover;
  height: 100vh;
  display: grid;
  place-items: center;
}

.card {
  background: #fff;
  width: calc(100% - 40px);
  max-width: 640px;
  padding: 20px;
  text-align: center;
  padding-top: 260px;
  position: relative;
   
  h3 {
    margin: 0 0 10px;
    font-size: 24px;
    color: #263238;
    font-weight: 700;
  }

  p {
    margin: 0 0 15px;
    color: #546e7a;
  }
}

.btn {
  padding: 13px 10px;
  border: none;
  min-width: 180px;
  border-radius: 4px;
  transition: 0.2s ease-in;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 6px #0001;

  &:hover {
    box-shadow: 0 3px 15px #0002;
  }

  & + & {
    margin-left: 10px;
  }

  &-primary {
    background: #304ffe;
    color: #fff;

    &:hover {
      background: #536dfe;
    }
  }

  &-secondary {
    background: #f5f5f5;

    &:hover {
      background: #e0e0e0;
    }
  }
}

.emo-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 240px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 0px;
  background: #3173f6;
  * {
    transition: 0.2s ease-in;
  }
}

.bunny {
  height: 180px;
  width: 130px;
  background: #fff;
  border-radius: 100px;
  border: 1px solid #eee;
  position: relative;
  z-index: 10;
  transform: translateY(8px);
  .leg {
    position: absolute;
    background: #fefefe;
    width: 45px;
    height: 70px;
    bottom: 10px;
    z-index: 20;
    border-radius: 50px;
    transform-origin: 22.5px 70px 0;
    border: 1px solid #eee;

    &:before {
      content: "";
      position: absolute;
      top: 5px;
      color: $snd;
      background: currentcolor;
      left: 50%;
      transform: translateX(-50%);
      width: 12px;
      height: 13px;
      border-radius: 50%;
      box-shadow: 12px 7px 0 -2px, -12px 7px 0 -2px;
    }

    &.l {
      left: 15px;
      transform: rotate(-40deg);
      box-shadow: 0px -3px 6px #0001;
      animation: $speed * 4 doubtLegL $timing infinite alternate;
    }

    &.r {
      transform: rotate(40deg);
      right: 15px;
      box-shadow: 3px 0px 6px #0001;
      animation: $speed * 4 doubtLegR $timing infinite alternate;
    }
  }

  .face {
    background: #fff;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    z-index: 10;
    position: relative;

    .eye {
      top: 25px;
      position: absolute;
      z-index: 6;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      border: 2px solid #444;
      background: radial-gradient(circle 5px, #222 100%, transparent 0)
        no-repeat;
      animation: $speed * 8 doubtEye $timing infinite alternate;

      &.l {
        left: 30px;
      }

      &.r {
        right: 30px;
      }
    }
  }

  .mostash {
    position: absolute;
    width: 50px;
    height: 30px;
    border: 1px solid #0000;
    border-top-color: #fff;
    border-radius: 50%;
    top: 35px;
    transform: rotate(-4deg);
    z-index: 2;
    &:after {
      content: "";
      position: absolute;
      width: 50px;
      height: 30px;
      border: 1px solid #0000;
      border-top-color: #fff;
      border-radius: 50%;
      transform-origin: 50px 0;
    }
    &.l {
      left: -35px;
      transform-origin: 50px 0;

      &:after {
        left: 8px;
        top: -8px;
        transform: rotate(15deg);
      }
    }

    &.r {
      right: -35px;
      transform-origin: 0px 0;

      &:after {
        left: auto;
        right: 8px;
        top: -20px;
        transform: rotate(-15deg);
      }
    }
  }

  .nose {
    position: absolute;
    width: 16px;
    height: 14px;
    transform: translateX(-50%);
    left: 50%;
    top: 40px;
    &:before,
    &:after {
      content: "";
      position: absolute;
      top: 0;
      width: 8px;
      height: 12px;
      border-radius: 16px;
      background: $snd;
    }

    &:before {
      left: 8px;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }

    &:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }
  }

  .mouth {
    position: absolute;
    left: 50%;
    top: 55px;
    width: 15px;
    height: 5px;
    border-radius: 0 0 50% 50%;
    transform: translateX(-50%);
    overflow: hidden;
    border: 2px solid #0000;
    border-bottom-color: #000;
  }

  .ear {
    position: absolute;
    width: 32px;
    background: $snd;
    border: 9px solid #fff;
    height: 100px;
    border-radius: 20px 20px 0 0;
    transform-origin: 16px 100px;

    &.r {
      right: 35px;
      transform: rotate(14deg);
      bottom: 160px;
      animation: $speed doubtEarR $timing infinite alternate;
    }

    &.l {
      left: 35px;
      transform: rotate(-4deg);
      bottom: 160px;
    }
  }

  .hand {
    position: absolute;
    width: 32px;
    background: #fff;
    height: 60px;
    border-radius: 0 0 20px 20px;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    transform-origin: 16px 0px;
    z-index: 16;
    top: 90px;
    box-shadow: 2px 4px 8px #0001;

    &:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      background: #fff;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid #fff;
      border-color: #fff #fff #d571a6 #d571a6;
      transform: rotate(-45deg);
    }

    &.l {
      left: 0px;
      transform: rotate(345deg);
      animation: $speed * 4 doubtHandL $timing infinite alternate;
    }

    &.r {
      right: 0px;
      transform: rotate(120deg);
      animation: $speed * 2 doubtHandR $timing infinite alternate;
    }
  }

  .tail {
    position: absolute;
    left: 50%;
    bottom: -10px;
    background: #eee;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
}

.btn:hover ~ .emo-container {
  .bunny {
    .ear {
      &.l {
        bottom: 135px;
        &:after {
          content: "";
          position: absolute;
          width: 32px;
          height: 64px;
          background: #fff;
          border-radius: 20px;
          transform-origin: 16px 16px;
          transform: rotate(64deg);
          top: -9px;
          left: -9px;
          box-shadow: 4px 4px 4px #0001;
        }
      }
    }
    .mouth {
      background: #562242;
      &:before {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        z-index: 2;
        width: 18px;
        border-style: solid;
        border-color: #eee #0000 #0000 #0000;
        border-width: 8px 3px 0px 3px;
      }

      &:after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        background: $snd;
        width: 36px;
        height: 12px;
        border-radius: 30px 30px 0 0;
        box-shadow: 0 -10px 0 5px #3e1632;
      }
    }
  }
}

// Happy
.btn-primary {
  &:hover {
    & ~ .emo-container {
      &:after {
        content: "";
        aspect-ratio: 10/1;
        width: 100%;
        background: #3173f6;
        position: absolute;
        left: 0;
        bottom: 0;
        border-radius: 50%;
        animation: $speed happyJumpMat $timing infinite alternate;
      }

      .bunny {
        animation: $speed happyJump $timing infinite alternate;

        .ear {
          &.l:after {
            animation: happyEarL $speed $timing infinite alternate;
          }

          &.r {
            animation: happyEarR $speed $timing infinite alternate;
          }
        }
        .eye {
          top: 30px;
          width: 20px;
          height: 20px;
          background: #0000;
          border: 2px solid #0000;
          border-color: #000 #000 #0000 #0000;
          transform: rotate(-45deg);
        }

        .mostash {
          &.l {
            animation: happyMostashL $speed $timing infinite alternate;
          }

          &.r {
            animation: happyMostashR $speed $timing infinite alternate;
          }
        }

        .mouth {
          border: none;
          width: 70px;
          border-radius: 0 0 50px 50px;
          animation: happyMouth $speed $timing infinite alternate;
        }

        .hand {
          &.l {
            animation: $speed happyHandL $timing infinite alternate;
          }

          &.r {
            animation: $speed happyHandR $timing infinite alternate;
          }
        }

        .tail {
          animation: $speed happyTail $timing infinite alternate;
        }

        .leg {
          &.l {
            animation: happyLegL $speed $timing infinite alternate;
          }

          &.r {
            animation: happyLegR $speed $timing infinite alternate;
          }
        }
      }
    }
  }
}
// Sad
.btn-secondary:hover {
  & ~ .emo-container {
    .bunny {
      animation: $speed sadMove $timing infinite alternate;
      .ear {
        &.l {
          &:after {
            animation: sadEarL $speed $timing infinite alternate;
          }
        }

        &.r {
          bottom: 140px;

          &::after {
            content: "";
            position: absolute;
            width: 32px;
            height: 64px;
            background: #fff;
            border-radius: 20px;
            transform-origin: 16px 16px;
            transform: rotate(-64deg);
            top: -9px;
            left: -9px;
            box-shadow: -4px 4px 4px #0001;
            animation: sadEarR $speed $timing infinite alternate;
          }
        }
      }

      .mostash {
        &.l {
          animation: sadMostashL $speed $timing infinite alternate;
        }

        &.r {
          animation: sadMostashR $speed $timing infinite alternate;
        }
      }

      .eye {
        top: 35px;
        width: 20px;
        height: 18px;
        border: 2px solid #444;
        background: radial-gradient(circle 6px, #222 100%, transparent 0)
          no-repeat;

        &::after,
        &::before {
          content: "";
          background: #8ecbf9;
          border: 1px solid #1d90ee;
          width: 10px;
          height: 10px;
          border-radius: 50px 50px 0 50px;
          position: absolute;
          transform: rotate(-15deg);
          top: 0px;
          left: 0px;
          z-index: 100;
          animation: dropL $speed * 4.2 $timing infinite;
        }

        &::before {
          animation-duration: $speed * 5.5;
        }

        &.l {
          background-position: 1px 4px;
        }

        &.r {
          background-position: -1px 4px;

          &::after,
          &::before {
            transform: rotate(145deg);
            animation: dropR $speed * 4.2 $timing infinite;
          }

          &::before {
            animation-duration: $speed * 5.5;
          }
        }
      }

      .mouth {
        border: none;
        width: 70px;
        height: 35px;
        animation: sadMouth $speed $timing infinite alternate;
      }

      .hand {
        &.l {
          animation: $speed sadHandL $timing infinite alternate;
        }

        &.r {
          animation: $speed sadHandR $timing infinite alternate;
        }
      }

      .tail {
        animation: $speed sadTail $timing infinite alternate;
      }

      .leg {
        &.l {
          animation: sadLegL $speed $timing infinite alternate;
        }

        &.r {
          animation: sadLegR $speed $timing infinite alternate;
        }
      }
    }
  }
}

// Doubt
@keyframes doubtEye {
  0% {
    background-position: -4px 3px;
  }
  100% {
    background-position: 4px 3px;
  }
}
@keyframes doubtEarR {
  0%,
  30%,
  50%,
  100% {
    transform: rotate(14deg);
  }

  35%,
  30% {
    transform: rotate(20deg);
  }
}
@keyframes doubtHandR {
  0%,
  30%,
  50%,
  100% {
    transform: rotate(120deg);
  }

  35%,
  30% {
    transform: rotate(125deg);
  }
}
@keyframes doubtHandL {
  0% {
    transform: rotate(340deg);
  }
  100% {
    transform: rotate(345deg);
  }
}

@keyframes doubtLegL {
  0%,
  50%,
  100% {
    transform: translatey(0) rotate(-45deg);
  }

  60%,
  55% {
    transform: translatey(-2px) rotate(-40deg);
  }
}

@keyframes doubtLegR {
  0%,
  50%,
  100% {
    transform: translatey(0) rotate(45deg);
  }

  60%,
  55% {
    transform: translatey(-2px) rotate(40deg);
  }
}

// Sad
@keyframes sadMove {
  0% {
    transform: translateY(6px) scaleY(1);
    transform-origin: 50% 100%;
  }
  100% {
    transform: translateY(6px) scaleY(0.98);
    transform-origin: 50% 100%;
  }
}
@keyframes sadEarL {
  0% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(25deg);
  }
}
@keyframes sadEarR {
  0% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(-25deg);
  }
}

@keyframes dropL {
  0%,
  30% {
    opacity: 0;
    transform: translate(0, 0) rotate(-15deg);
  }
  35% {
    opacity: 0.5;
    transform: translate(0, 0) rotate(-45deg);
  }
  50% {
    opacity: 1;
    transform: translate(-30px, 0) rotate(-90deg);
  }
  70% {
    opacity: 0.5;
    transform: translate(-50px, 100px) rotate(-100deg);
  }
  80%,
  100% {
    opacity: 0;
    transform: translate(-50px, 100px) rotate(-120deg);
  }
}
@keyframes dropR {
  0%,
  30% {
    opacity: 0;
    transform: translate(0, 0) rotate(90deg);
  }
  35% {
    opacity: 0.5;
    transform: translate(0, 0) rotate(145deg);
  }
  50% {
    opacity: 1;
    transform: translate(30px, 0) rotate(180deg);
  }
  70% {
    opacity: 0.5;
    transform: translate(50px, 100px) rotate(215deg);
  }
  80%,
  100% {
    opacity: 0;
    transform: translate(50px, 100px) rotate(230deg);
  }
}

@keyframes sadMostashL {
  0% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(-25deg);
  }
}

@keyframes sadMostashR {
  0% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(25deg);
  }
}
@keyframes sadMouth {
  0% {
    width: 50px;
    height: 20px;
    border-radius: 50%;
  }
  100% {
    width: 60px;
    height: 40px;
    border-radius: 50%;
  }
}

@keyframes sadHandL {
  0% {
    transform: rotate(-140deg);
  }
  100% {
    transform: rotate(-135deg);
  }
}

@keyframes sadHandR {
  0% {
    transform: rotate(140deg);
  }
  100% {
    transform: rotate(135deg);
  }
}

@keyframes sadTail {
  0% {
    bottom: -5px;
  }
  100% {
    bottom: -7px;
  }
}
@keyframes sadLegL {
  0% {
    transform: rotate(-60deg);
  }
  100% {
    transform: rotate(-65deg);
  }
}
@keyframes sadLegR {
  0% {
    transform: rotate(60deg);
  }
  100% {
    transform: rotate(65deg);
  }
}

// Happy

@keyframes happyJump {
  0% {
    transform: translateY(40px) scaleY(0.9);
  }
  100% {
    transform: translateY(-80px) scaleY(1);
  }
}

@keyframes happyJumpMat {
  0% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(-80px);
  }
}

@keyframes happyEarL {
  0% {
    transform: rotate(60deg);
  }
  100% {
    transform: rotate(35deg);
  }
}
@keyframes happyEarR {
  0% {
    transform: translateY(0px) rotate(10deg) skewX(0deg);
  }
  100% {
    transform: translateY(5px) rotate(20deg) skewX(-2deg);
  }
}
@keyframes happyMouth {
  0% {
    height: 40px;
  }
  100% {
    height: 35px;
  }
}

@keyframes happyTail {
  0% {
    bottom: -5px;
  }
  100% {
    bottom: -20px;
  }
}

@keyframes happyLegL {
  0% {
    left: 10px;
    transform: translatey(0) rotate(-50deg);
  }

  100% {
    left: 15px;
    transform: translatey(-10px) rotate(-40deg);
  }
}

@keyframes happyLegR {
  0% {
    right: 10px;
    transform: translatey(0) rotate(50deg);
  }

  100% {
    right: 15px;
    transform: translatey(-10px) rotate(40deg);
  }
}

@keyframes happyMostashL {
  0% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(8deg);
  }
}

@keyframes happyMostashR {
  0% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(-8deg);
  }
}

@keyframes happyHandL {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(125deg);
  }
}

@keyframes happyHandR {
  0% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(-125deg);
  }
}