#loading-page-pet {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}

#loading-container {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

#pet-container {
  height: 40px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: start;
}

#heart {
  --c: rgb(110, 67, 41);
  width: 40px;
  aspect-ratio: 1;
  background: radial-gradient(circle at 60% 65%, var(--c) 64%, #0000 65%) top
      left/50% 50%,
    radial-gradient(circle at 40% 65%, var(--c) 64%, #0000 65%) top right/50%
      50%,
    conic-gradient(from -45deg at 50% 85.5%, var(--c) 90deg, #0000 0)
      bottom/100% 50%;
  background-repeat: no-repeat;
  position: relative;
}

#eye-one {
  background-color: #fff;
  clip-path: ellipse(31% 40% at 50% 50%);
  height: 20px;
  width: 20px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

#eye-container {
  position: relative;
  height: 40px;
  width: 40px;
}

#eye-two {
  background-color: rgb(110, 67, 41);
  clip-path: ellipse(31% 40% at 50% 50%);
  height: 20px;
  width: 20px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

#pet-container-two {
  height: 12px;
  width: 80px;
  display: flex;
  justify-content: center;
}

#triangle {
  --r: 4px;
  height: 14px;
  aspect-ratio: 2;
  --_g: calc(var(--r) / tan(22.5deg)) top var(--r), #000 98%, #0000 101%;
  -webkit-mask: conic-gradient(
        from 157.5deg at 50%
          calc(var(--r) / (3 * sqrt(2) - 4) - 100% / tan(22.5deg)),
        #000 45deg,
        #0000 0
      )
      0 0/100% calc(100% - var(--r) / sqrt(2)) no-repeat,
    radial-gradient(
      var(--r) at 50% calc(100% - var(--r) * sqrt(2)),
      #000 98%,
      #0000 101%
    ),
    radial-gradient(var(--r) at left var(--_g)),
    radial-gradient(var(--r) at right var(--_g));
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  background: rgb(110, 67, 41);
}

#pet-container-three {
  height: 40px;
  width: 80px;
  display: flex;
  justify-content: center;
  position: relative;
}

#arc-one {
  position: absolute;
  top: -20px;
  left: 36px;
  --b: 5px;
  --a: 100deg;
  width: 28px;
  aspect-ratio: 1;
  padding: var(--b);
  border-radius: 50%;
  background: rgb(110, 67, 41);
  --_g: /var(--b) var(--b) no-repeat radial-gradient(50% 50%, #000 97%, #0000);
  mask: top var(--_g),
    calc(50% + 50% * sin(var(--a))) calc(50% - 50% * cos(var(--a))) var(--_g),
    linear-gradient(#0000 0 0) content-box intersect,
    conic-gradient(#000 var(--a), #0000 0);
  transform: rotate(130deg);
}

#arc-two {
  position: absolute;
  top: -20px;
  right: 36px;
  --b: 5px;
  --a: 100deg;
  width: 28px;
  aspect-ratio: 1;
  padding: var(--b);
  border-radius: 50%;
  background: rgb(110, 67, 41);
  --_g: /var(--b) var(--b) no-repeat radial-gradient(50% 50%, #000 97%, #0000);
  mask: top var(--_g),
    calc(50% + 50% * sin(var(--a))) calc(50% - 50% * cos(var(--a))) var(--_g),
    linear-gradient(#0000 0 0) content-box intersect,
    conic-gradient(#000 var(--a), #0000 0);
  transform: rotate(130deg);
}