:root {
  --color-white: #ffffff;
  --color-gray-1: #e6eaeb;
  --color-gray-2: #c6cdd4;
  --color-gray-3: #bdbdbd;
  --color-gray-4: #9c9c9c;
  --color-gray-5: #687677;
  --color-gray-6: #4f5a5e;
  --color-gray-7: #323a3d;
  --color-blue-1: #2192fc;
  --color-blue-2: #2d7db2;
  --color-blue-3: #29648c;
  --color-yellow-1: #ffcb05;
  --color-yellow-2: #fac13c;
  --color-yellow-3: #f4a81e;
  --color-yellow-4: #f0ae1a;
  --color-yellow-5: #d29918;
  --color-yellow-6: #cb9f34;
  --color-yellow-7: #d88d02;
  --color-background-1: #eafaf6;
  --color-background-2: #d7e8e3;
  --color-background-3: #ffe0b2;
  --color-background-4: #ebcfa7;
  --color-translucent-white: #ffffff33;
  --color-translucent-yellow: #f4a81e80;
  --color-translucent-black-1: #00000080;
  --color-translucent-black-2: #0000001a;
  --color-translucent-black-3: #0000004d;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  font-size: max(calc(16 * min(100vw / 395, 100vh / 395)), 0rem);
}

body {
  height: 100%;
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: center;
  justify-content: center;
  background: var(--color-background-1);
}

body.music-on {
  animation: background-change1 2.15s infinite ease-in-out;
}

.container {
  margin-top: -1rem;
  margin-left: -2.2rem;
  position: relative;
}

.tipper {
  width: 18.375rem;
  height: 16.6875rem;
  position: relative;
}

.tipper.music-on {
  animation: bounce 0.55s infinite ease-in-out;
}

.head {
  right: 0;
  bottom: 0;
  width: 10.0625rem;
  height: 12.4375rem;
  position: absolute;
}

.head > div:nth-child(1) {
  top: 0;
  z-index: 20;
  left: -0.02rem;
  width: 8.3125rem;
  height: 4.8125rem;
  position: absolute;
  clip-path: polygon(62.41% 0, 100% 37.66%, 38.34% 100%, 0 62.33%);
  background: linear-gradient(90deg, var(--color-gray-3), var(--color-gray-3));
}

.head > div:nth-child(2) {
  left: 0;
  top: 3rem;
  z-index: 15;
  width: 4.3125rem;
  height: 9.3125rem;
  position: absolute;
  background-color: var(--color-gray-4);
  clip-path: polygon(0 0, 100% 26.17%, 100% 100%, 0 69.12%);
}

.head > div:nth-child(3) {
  z-index: 20;
  top: 2.625rem;
  width: 5.75rem;
  right: 0.625rem;
  height: 5.90625rem;
  position: absolute;
  background-color: var(--color-gray-1);
  clip-path: polygon(89.13% 0, 100% 50%, 10.86% 100%, 0 51.06%);
}

.head > div:nth-child(4) {
  z-index: 20;
  bottom: 1.25rem;
  width: 5.1875rem;
  right: 0.59375rem;
  height: 5.6875rem;
  position: absolute;
  border-top-right-radius: 0.1875rem;
  background-color: var(--color-gray-1);
  clip-path: polygon(99.25% 0, 99.5% 48.35%, 0.5% 100%, 0.5% 52.74%);
}

.head > div:nth-child(5) {
  width: 5.65rem;
  right: 0.125rem;
  height: 4.125rem;
  bottom: 0.125rem;
  position: absolute;
  background-color: var(--color-gray-1);
  clip-path: polygon(100% 0, 100% 19.69%, 0 100%, 0 78.78%);
}

.head > div:nth-child(6) {
  bottom: 1rem;
  right: 0.125rem;
  width: 6.375rem;
  height: 3.6875rem;
  position: absolute;
  background-color: var(--color-gray-2);
  clip-path: polygon(88.23% 0, 100% 11.86%, 11.76% 100%, 0 88.13%);
}

.head > div:nth-child(7) {
  z-index: 20;
  bottom: 1rem;
  right: 5.75rem;
  width: 0.75rem;
  height: 0.5rem;
  position: absolute;
  background-color: var(--color-gray-2);
  clip-path: polygon(2% 30%, 33.33% 3%, 100% 50%, 100% 100%);
}

.head > div:nth-child(8) {
  z-index: 20;
  right: 5.75rem;
  width: 0.75rem;
  bottom: 0.125rem;
  height: 1.3125rem;
  position: absolute;
  background-color: var(--color-gray-4);
  clip-path: polygon(2.5% 6%, 100% 35%, 100% 100%, 3% 69%);
}

.head > div:nth-child(9) {
  z-index: 15;
  width: 2.6rem;
  left: 0.9375rem;
  overflow: hidden;
  position: absolute;
  border-radius: 50%;
  bottom: -0.34375rem;
  height: 4.220625rem;
  transform: rotate(-27.69deg);
  background: linear-gradient(
    180deg,
    var(--color-gray-5) 0% 17.5%,
    transparent 17.5%
  );
}

.head > div:nth-child(9)::before {
  width: 2rem;
  content: "";
  top: 0.1875rem;
  height: 3.625rem;
  right: -0.6875rem;
  position: absolute;
  transform: rotate(-2.5deg);
  background-color: var(--color-gray-7);
}

.head > div:nth-child(9)::after {
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--color-background-1);
  clip-path: polygon(0 17.5%, 100% 17.5%, 100% 100%, 0% 100%);
}

.tipper.music-on .head > div:nth-child(9)::after {
  animation: background-change2 2.15s infinite ease-in-out;
}

.head > div:nth-child(10) {
  right: 1.32rem;
  top: 1.68125rem;
  width: 0.8125rem;
  height: 1.65625rem;
  border-radius: 50%;
  position: absolute;
  transform: rotate(-25deg);
  background: linear-gradient(
    173deg,
    var(--color-gray-3) 0% 40.3%,
    var(--color-gray-1) 40.3%
  );
}

.head > div:nth-child(11) {
  z-index: 30;
  top: 4.64rem;
  left: 2.776rem;
  width: 0.8125rem;
  height: 1.625rem;
  border-radius: 50%;
  position: absolute;
  transform: rotate(-28.5deg);
  background-color: var(--color-gray-4);
}

.head > div:nth-child(12) {
  z-index: 20;
  top: 3.25rem;
  width: 5.625rem;
  height: 1.07rem;
  right: 1.43125rem;
  position: absolute;
  transform-origin: center;
  transform: rotate(-30.4deg);
  background-color: var(--color-gray-1);
  background: linear-gradient(
    180deg,
    var(--color-gray-3) 0% 50%,
    var(--color-gray-1) 50%
  );
}

.head > div:nth-child(13) {
  width: 5rem;
  right: 1rem;
  z-index: 30;
  height: 5.4375rem;
  bottom: 4.1875rem;
  position: absolute;
  background-color: var(--color-blue-1);
  clip-path: polygon(87.5% 0, 100% 54.02%, 13.75% 100%, 1% 46.5%);
}

.head > div:nth-child(14) {
  z-index: 30;
  right: 0.99rem;
  bottom: 4.1875rem;
  width: 4.50625rem;
  height: 3.53125rem;
  position: absolute;
  clip-path: polygon(
    0 74.13%,
    49.31% 37.93%,
    57.53% 18.96%,
    82.19% 0,
    95.89% 5.17%,
    100% 29.31%,
    4.1% 100%
  );
  background-color: var(--color-blue-2);
}

.head > div:nth-child(15) {
  z-index: 50;
  left: 2.9375rem;
  width: 1.0625rem;
  height: 1.625rem;
  bottom: 3.6875rem;
  position: absolute;
  clip-path: polygon(
    0 23.07%,
    64.7% 0,
    64.7% 53.5%,
    100% 42.3%,
    100% 65.38%,
    0 100%
  );
  background-color: var(--color-gray-1);
}

.head > div:nth-child(16) {
  z-index: 50;
  height: 0.5rem;
  width: 0.95rem;
  left: 2.6875rem;
  bottom: 4.933rem;
  position: absolute;
  background-color: var(--color-gray-2);
  clip-path: polygon(73.33% 0, 100% 25%, 26.66% 100%, 0 75%);
}

.head > div:nth-child(17) {
  z-index: 50;
  width: 0.25rem;
  left: 2.6875rem;
  height: 1.375rem;
  bottom: 3.6875rem;
  position: absolute;
  background-color: var(--color-gray-4);
  clip-path: polygon(0 0, 100% 9.09%, 100% 100%, 0 100%);
}

.head > div:nth-child(18) {
  z-index: 50;
  left: 3.625rem;
  width: 0.375rem;
  height: 0.3125rem;
  bottom: 4.4375rem;
  position: absolute;
  background-color: var(--color-gray-2);
  clip-path: polygon(0 20%, 33.33% 0, 100% 40%, 0 100%);
}

.head > div:nth-child(19) {
  right: 0;
  width: 0.6875rem;
  height: 1.625rem;
  bottom: 7.3125rem;
  position: absolute;
  background-color: var(--color-gray-1);
  clip-path: polygon(0 23.07%, 100% 0, 100% 76.92%, 0 100%);
}

.head > div:nth-child(20) {
  right: 0;
  height: 0.5rem;
  width: 0.9375rem;
  bottom: 8.5625rem;
  position: absolute;
  background-color: var(--color-gray-2);
  clip-path: polygon(73.33% 0, 100% 27%, 26.66% 100%, 0 75%);
}

.head > div:nth-child(21) {
  width: 0.25rem;
  right: 0.6875rem;
  height: 1.375rem;
  bottom: 7.3125rem;
  position: absolute;
  background-color: var(--color-gray-4);
  clip-path: polygon(0 0, 100% 9.09%, 100% 100%, 0 90%);
}

.head > div:nth-child(22) {
  z-index: 50;
  left: 0.625rem;
  width: 0.8125rem;
  bottom: 4.625rem;
  height: 0.6875rem;
  position: absolute;
  background-color: var(--color-gray-6);
  clip-path: polygon(0 0, 100% 63.63%, 100% 100%, 0 36.36%);
}

.head > div:nth-child(23) {
  z-index: 50;
  left: 1.434rem;
  bottom: 4.625rem;
  height: 0.3125rem;
  width: 0.09375rem;
  position: absolute;
  background-color: var(--color-gray-5);
  clip-path: polygon(0% 20%, 100% 0, 100% 80%, 0 100%);
}

.head > div:nth-child(24) {
  z-index: 50;
  left: 0.625rem;
  height: 0.5rem;
  bottom: 4.875rem;
  width: 0.90625rem;
  position: absolute;
  background-color: var(--color-gray-5);
  clip-path: polygon(0 13%, 10% 0, 100% 88%, 90% 100%);
}

.head > div:nth-child(25) {
  z-index: 40;
  left: 2.8rem;
  width: 0.875rem;
  height: 2.875rem;
  bottom: 4.28125rem;
  position: absolute;
  background-color: var(--color-blue-3);
  clip-path: polygon(0 0, 42.85% 20%, 100% 100%, 0 84%);
}

.head > div:nth-child(26) {
  z-index: 40;
  left: 0.75rem;
  height: 2.5rem;
  top: 4.78125rem;
  width: 2.4375rem;
  position: absolute;
  transform: skewY(30deg);
  border-radius: 0.125rem 0.5rem 0.125rem 0.125rem;
  background: linear-gradient(
    180deg,
    var(--color-blue-3) 80%,
    var(--color-blue-2) 80%
  );
}

.head > div:nth-child(27) div {
  z-index: 30;
  display: flex;
  height: 1.2875rem;
  width: 0.873125rem;
  border-radius: 50%;
  position: absolute;
  align-items: center;
  justify-content: center;
  transform: rotate(24.57deg);
  background-color: var(--color-yellow-3);
}

.head > div:nth-child(27) div::before {
  right: 0rem;
  content: "";
  width: 0.755rem;
  height: 1.24875rem;
  position: absolute;
  border-radius: 50%;
  background-color: var(--color-yellow-1);
}

.tipper.music-on .head > div:nth-child(27) div::before {
  filter: blur(0.0625rem);
  animation: blink 1.1s ease infinite;
}

.head > div:nth-child(27) div::after {
  opacity: 0;
  top: 0.2rem;
  content: "";
  width: 5rem;
  height: 5rem;
  left: 0.2rem;
  position: absolute;
  background: linear-gradient(
    50deg,
    transparent 0%,
    var(--color-yellow-1) 100%
  );
  clip-path: polygon(0 16%, 0 0, 88% 0, 55% 51%);
}

.tipper.music-on .head > div:nth-child(27) div::after {
  animation: light 1.1s ease infinite;
}

.head > div:nth-child(27) div:first-child {
  right: 4.6025rem;
  bottom: 1.86625rem;
}

.head > div:nth-child(27) div:last-child {
  right: 0.79rem;
  bottom: 4.05375rem;
}

.head > div:nth-child(28) div {
  z-index: 30;
  width: 0.34375rem;
  height: 1.4375rem;
  overflow: hidden;
  position: absolute;
  background-color: var(--color-gray-5);
  clip-path: polygon(0 14%, 100% 0, 100% 86%, 0 100%);
}

.head > div:nth-child(28) div::before {
  content: "";
  width: 0.4375rem;
  right: 0.03125rem;
  height: 0.3525rem;
  position: absolute;
  bottom: -0.03125rem;
  transform: rotate(31.34deg);
  background-color: var(--color-gray-4);
}

.head > div:nth-child(28) div:nth-child(1) {
  bottom: 2.75rem;
  right: 3.96875rem;
}

.head > div:nth-child(28) div:nth-child(2) {
  right: 3.5rem;
  bottom: 3.0125rem;
}

.head > div:nth-child(28) div:nth-child(3) {
  right: 3.03125rem;
  bottom: 3.28125rem;
}

.head > div:nth-child(28) div:nth-child(4) {
  bottom: 3.55rem;
  right: 2.5625rem;
}

.head > div:nth-child(28) div:nth-child(5) {
  bottom: 3.825rem;
  right: 2.09375rem;
}

.head > div:nth-child(29) {
  z-index: 40;
  width: 3.4375rem;
  right: 5.6875rem;
  bottom: 0.1875rem;
  height: 3.9375rem;
  position: absolute;
}

.head > div:nth-child(29) > div {
  left: 0.27rem;
  display: flex;
  width: 2.114375rem;
  height: 3.66125rem;
  border-radius: 50%;
  position: absolute;
  align-items: center;
  bottom: -0.165625rem;
  justify-content: center;
  transform: rotate(-29.59deg);
  background-color: var(--color-gray-6);
}

.head > div:nth-child(29) > div div {
  height: 2.0675rem;
  width: 1.206875rem;
  border-radius: 50%;
  position: absolute;
  background-color: var(--color-gray-5);
}

.head > div:nth-child(29) > div div::before {
  right: 0;
  content: "";
  top: 0.0625rem;
  width: 1.14rem;
  border-radius: 50%;
  position: absolute;
  height: 1.930625rem;
  background-color: var(--color-gray-3);
}

.body {
  top: 0;
  left: 0;
  height: 14rem;
  width: 13.6875rem;
  position: absolute;
  transform-origin: bottom left;
}

.body > div:nth-child(1) {
  left: 1.75rem;
  width: 6.59375rem;
  height: 5.84375rem;
  bottom: 2.78125rem;
  position: absolute;
  background-color: var(--color-gray-5);
  clip-path: polygon(0 35.1%, 50.9% 0, 100% 29.7%, 100% 100%);
}

.body > div:nth-child(2) {
  z-index: 10;
  top: 0.1875rem;
  left: 0.625rem;
  width: 4.875rem;
  height: 3.90625rem;
  position: absolute;
  background-color: var(--color-yellow-2);
  clip-path: polygon(0 66.12%, 88.46% 1%, 92.3% 2.3%, 100% 100%);
}

.body > div:nth-child(3) {
  top: 0;
  left: 0;
  height: 5.25rem;
  width: 13.6875rem;
  position: absolute;
  background-color: var(--color-yellow-5);
  clip-path: polygon(0% 54.76%, 36.07% 0%, 100% 45.23%, 64.38% 100%);
}

.body > div:nth-child(4) {
  top: 2.18rem;
  width: 4.9375rem;
  right: 0.40625rem;
  height: 5.1875rem;
  position: absolute;
  background-color: var(--color-yellow-2);
  clip-path: polygon(0 63.85%, 100% 0, 100% 45.78%, 0 100%);
}

.body > div:nth-child(5) {
  right: 0;
  z-index: 10;
  width: 4.9rem;
  top: 1.90625rem;
  height: 3.375rem;
  position: absolute;
  background-color: var(--color-yellow-2);
  clip-path: polygon(0 83.33%, 100% 0, 100% 16.66%, 0 100%);
}

.body > div:nth-child(6) {
  right: 0;
  z-index: 10;
  top: 1.8125rem;
  width: 5.3125rem;
  height: 2.9375rem;
  position: absolute;
  background-color: var(--color-yellow-4);
  clip-path: polygon(0 95.74%, 91.76% 0, 100% 3.2%, 8.23% 100%);
}

.body > div:nth-child(7) {
  right: 0;
  z-index: 10;
  height: 0.75rem;
  top: 1.28125rem;
  width: 2.0625rem;
  position: absolute;
  background-color: var(--color-yellow-4);
  clip-path: polygon(0 16.66%, 15.15% 0, 100% 83.33%, 87.87% 100%);
}

.body > div:nth-child(8) {
  right: 0;
  height: 1rem;
  top: 1.28125rem;
  width: 2.6875rem;
  position: absolute;
  background-color: var(--color-yellow-5);
  clip-path: polygon(0 38%, 34.88% 0, 100% 62.5%, 76.74% 100%);
}

.body > div:nth-child(9) {
  z-index: 10;
  right: 4.59rem;
  top: 3.96875rem;
  width: 2.125rem;
  height: 0.8125rem;
  position: absolute;
  background-color: var(--color-yellow-4);
  clip-path: polygon(0 23.07%, 14.7% 0, 100% 74%, 85.29% 99%);
}

.body > div:nth-child(10) {
  left: 0;
  top: 2.6875rem;
  width: 6.46875rem;
  height: 1.84375rem;
  position: absolute;
  background-color: var(--color-yellow-4);
  clip-path: polygon(0 10%, 5% 0, 100% 90%, 95% 100%);
}

.body > div:nth-child(11) {
  left: 0;
  top: 0.0625rem;
  width: 5.125rem;
  height: 2.90625rem;
  position: absolute;
  background-color: var(--color-yellow-4);
  clip-path: polygon(94% 0, 100% 4.25%, 7% 100%, 0 97%);
}

.body > div:nth-child(12) {
  top: 0;
  width: 6.375rem;
  height: 1.8125rem;
  right: 2.66875rem;
  position: absolute;
  background-color: var(--color-yellow-4);
  clip-path: polygon(0 9%, 4.5% 0, 100% 91%, 95% 98%);
}

.body > div:nth-child(13) {
  left: 0;
  top: 2.84375rem;
  width: 8.7625rem;
  height: 8.1875rem;
  position: absolute;
  background-color: var(--color-yellow-5);
  clip-path: polygon(
    0 0.3%,
    100% 29%,
    95.74% 32.06%,
    95.74% 100%,
    5.67% 42.74%
  );
}

.body > div:nth-child(14) {
  z-index: 20;
  top: 5.3125rem;
  left: 0.2125rem;
  width: 2.555rem;
  height: 1.47125rem;
  position: absolute;
  border-radius: 50%;
  transform: rotate(39deg);
  background-color: var(--color-yellow-5);
}

.body > div:nth-child(15) {
  left: 0.375rem;
  height: 1.25rem;
  top: 5.6rem;
  width: 0.9375rem;
  position: absolute;
  background-color: var(--color-background-1);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 60%);
}

.tipper.music-on .body > div:nth-child(15) {
  animation: background-change1 2.15s infinite ease-in-out;
}

.body > div:nth-child(16) {
  right: 5.25rem;
  width: 0.6875rem;
  height: 0.5625rem;
  bottom: 2.9375rem;
  position: absolute;
  background-color: var(--color-gray-5);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 28%);
}

.body > div:nth-child(17) {
  right: 5.25rem;
  width: 0.875rem;
  bottom: 3.295rem;
  height: 0.625rem;
  border-radius: 50%;
  position: absolute;
  background-color: var(--color-yellow-5);
}

.body > div:nth-child(18) {
  z-index: 15;
  width: 2.6rem;
  left: 2.6875rem;
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  bottom: 0.78125rem;
  height: 4.220625rem;
  transform: rotate(-27.69deg);
  background: linear-gradient(
    180deg,
    var(--color-gray-5) 0% 16%,
    transparent 16%
  );
}

.body > div:nth-child(18)::before {
  content: "";
  top: 0.1875rem;
  width: 1.875rem;
  height: 3.625rem;
  right: -0.6875rem;
  position: absolute;
  transform: rotate(-4deg);
  background-color: var(--color-gray-7);
}

.body > div:nth-child(18)::after {
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--color-background-1);
  clip-path: polygon(0 16%, 100% 16%, 100% 100%, 0% 100%);
}

.tipper.music-on .body > div:nth-child(18)::after {
  animation: background-change2 2.15s infinite ease-in-out;
}

.body > div:nth-child(19) {
  z-index: 50;
  width: 2.25rem;
  left: 6.0625rem;
  bottom: 0.9375rem;
  height: 2.15625rem;
  position: absolute;
  transform: skewY(30deg);
  border-radius: 0.125rem 0.125rem 0 0;
  background-color: var(--color-gray-5);
}

.body > div:nth-child(19)::before {
  content: "";
  width: 100%;
  overflow: hidden;
  bottom: -0.375rem;
  left: -0.21875rem;
  height: 2.28125rem;
  position: absolute;
  border-radius: 0.125rem;
  background-color: var(--color-gray-6);
}

.body > div:nth-child(20) {
  z-index: 20;
  left: 5.3rem;
  bottom: 1.63rem;
  width: 0.40625rem;
  height: 0.40625rem;
  position: absolute;
  background-color: var(--color-gray-7);
  clip-path: polygon(20% 0, 0 100%, 100% 47%);
}

.body > div:nth-child(21) {
  z-index: 20;
  left: 5.5rem;
  width: 0.25rem;
  bottom: 1.905rem;
  height: 0.3125rem;
  border-radius: 50%;
  position: absolute;
  background-color: var(--color-gray-4);
  box-shadow: -0.1875rem 0.125rem 0 var(--color-gray-7);
}

.body > div:nth-child(22) {
  bottom: 0.1rem;
  width: 0.4375rem;
  left: 8.03125rem;
  height: 0.40625rem;
  position: absolute;
  background-color: var(--color-gray-5);
  clip-path: polygon(5% 0, 2% 100%, 100% 68%);
}

.body > div:nth-child(23) {
  z-index: 20;
  left: 5.88rem;
  width: 0.375rem;
  bottom: 3.355rem;
  height: 0.375rem;
  position: absolute;
  background-color: var(--color-gray-5);
  clip-path: polygon(0 50%, 100% 100%, 65% 10%);
}

.body > div:nth-child(24) {
  z-index: 50;
  left: 5.95rem;
  overflow: hidden;
  width: 0.4225rem;
  bottom: 2.7275rem;
  height: 0.55125rem;
  position: absolute;
  border-radius: 50%;
  transform: rotate(-19.25deg);
  background-color: var(--color-gray-4);
}

.body > div:nth-child(24)::before {
  top: 0rem;
  content: "";
  width: 0.4375rem;
  height: 0.5625rem;
  left: -0.09375rem;
  position: absolute;
  border-radius: 50%;
  background-color: var(--color-gray-5);
}

.body > div:nth-child(25) {
  z-index: 10;
  left: 1.75rem;
  overflow: hidden;
  bottom: 0.3125rem;
  width: 6.59375rem;
  height: 6.28125rem;
  position: absolute;
  background-color: var(--color-gray-4);
  clip-path: polygon(0 0.3%, 100% 60%, 100% 100%, 0% 39%);
}

.body > div:nth-child(25) > div {
  left: 0rem;
  top: -0rem;
  height: 3rem;
  width: 2.4375rem;
  border-radius: 50%;
  position: absolute;
  transform: skewY(0.001deg);
  background-color: var(--color-gray-4);
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
  box-shadow: -0.3125rem 0.3125rem 0 var(--color-background-1);
}

.tipper.music-on .body > div:nth-child(25) > div {
  animation: shadow-change 2.15s infinite ease-in-out;
}

.body > div:nth-child(26) {
  left: 1rem;
  z-index: 20;
  gap: 0.75rem;
  display: flex;
  bottom: 4.125rem;
  width: 6.6875rem;
  height: 6.1875rem;
  position: absolute;
}

.body > div:nth-child(26) div {
  width: 0.5rem;
  border-radius: 0.09375rem;
  clip-path: inset(0 0 0 0);
  transform: translateZ(0) skewY(30deg);
  background-color: var(--color-yellow-2);
}

.body > div:nth-child(26) div::before {
  content: "";
  width: 100%;
  height: 100%;
  left: 0.15625rem;
  position: absolute;
  border-radius: 0.09375rem;
  background-color: var(--color-yellow-6);
}

.body > div:nth-child(26) div:nth-child(1) {
  height: 2.625rem;
  margin-top: 0rem;
}

.body > div:nth-child(26) div:nth-child(2) {
  height: 3.0625rem;
  margin-top: 0.3125rem;
}

.body > div:nth-child(26) div:nth-child(3) {
  height: 3.4375rem;
  margin-top: 0.6875rem;
}

.body > div:nth-child(26) div:nth-child(4) {
  height: 3.875rem;
  margin-top: 1rem;
}

.body > div:nth-child(26) div:nth-child(5) {
  height: 4.3125rem;
  margin-top: 1.3125rem;
}

.body > div:nth-child(26) div:nth-child(6) {
  height: 4.25rem;
  margin-top: 2.0625rem;
}

.body > div:nth-child(27) {
  z-index: 40;
  left: 2.6875rem;
  width: 3.4375rem;
  height: 3.9375rem;
  bottom: 1.28125rem;
  position: absolute;
}

.body > div:nth-child(27) > div {
  left: 0.27rem;
  display: flex;
  width: 2.114375rem;
  height: 3.66125rem;
  border-radius: 50%;
  position: absolute;
  align-items: center;
  bottom: -0.165625rem;
  justify-content: center;
  transform: rotate(-29.59deg);
  background-color: var(--color-gray-6);
}

.body > div:nth-child(27) > div div {
  height: 2.0675rem;
  border-radius: 50%;
  width: 1.206875rem;
  position: absolute;
  background-color: var(--color-gray-5);
}

.body > div:nth-child(27) > div div::before {
  right: 0;
  content: "";
  width: 1.14rem;
  top: 0.0625rem;
  border-radius: 50%;
  position: absolute;
  height: 1.930625rem;
  background-color: var(--color-gray-3);
}

.shadow {
  left: 50%;
  opacity: 0;
  z-index: -1;
  width: 20rem;
  height: 10rem;
  bottom: -1.5rem;
  margin-left: 1rem;
  border-radius: 50%;
  position: absolute;
  filter: blur(0.3125rem);
  transform-origin: center;
  transform: translateX(-50%);
  transition: opacity 0.5s ease;
  background-color: var(--color-gray-7);
}

.shadow.music-on {
  opacity: 0.1;
  animation: expand 0.55s infinite ease-in-out;
}

.music-notes {
  z-index: 50;
  top: 4.5rem;
  right: 4rem;
  position: absolute;
}

.music-notes div {
  opacity: 0;
  font-size: 0.8rem;
  position: absolute;
}

.music-notes.music-on div {
  animation: float 3s ease-out infinite;
}

.music-notes div:nth-child(1) {
  left: 0;
  animation-delay: 0s;
}

.music-notes div:nth-child(2) {
  left: 0.8rem;
  bottom: -1.5rem;
  animation-delay: 1s;
}

.music-notes div:nth-child(3) {
  left: 1.4rem;
  bottom: -2rem;
  animation-delay: 2s;
}

.music-modal-wrapper {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  padding: 20px;
  display: flex;
  position: fixed;
  visibility: hidden;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fade-in 1s ease 1s forwards;
  background-color: var(--color-translucent-black-1);
}

.music-modal {
  gap: 25px;
  display: flex;
  position: relative;
  align-items: center;
  border-radius: 10px;
  flex-direction: column;
  padding: 35px 40px 40px;
  justify-content: center;
  font-family: "system-ui", "Trebuchet MS", "Helvetica";
}

.music-modal h3 {
  font-size: 24px;
  color: var(--color-white);
}

.music-modal div {
  gap: 15px;
  display: flex;
}

.music-modal button {
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: 5px;
  font-family: inherit;
  transition: 0.1s ease;
  color: var(--color-white);
  background-color: transparent;
}

#no-button {
  color: var(--color-white);
  border: 2px solid var(--color-yellow-3);
  background-color: var(--color-translucent-yellow);
}

#yes-button,
#no-button:hover {
  background-color: var(--color-yellow-3);
}

#yes-button:hover {
  background-color: var(--color-yellow-7);
}

.fade-out-animation {
  animation: fade-out 1s ease forwards;
}

.music-card {
  gap: 2px;
  top: 10px;
  opacity: 0;
  right: 10px;
  padding: 5px;
  height: 50px;
  display: flex;
  position: fixed;
  border-radius: 5px;
  align-items: center;
  backdrop-filter: blur(5px);
  transition: opacity 0.5s ease;
  -webkit-backdrop-filter: blur(5px);
  background-color: var(--color-translucent-white);
  box-shadow: 0 0 10px var(--color-translucent-black-2);
}

.music-card.music-on {
  opacity: 1;
}

.music-card > div:first-child {
  gap: 3px;
  width: 40px;
  height: 40px;
  padding: 2px;
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: center;
  border-radius: 3.5px;
  background-size: cover;
  justify-content: center;
  background-color: black;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("./music-cover-photo.png");
}

.music-card > div:first-child::before {
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--color-translucent-black-3);
}

.music-card > div:first-child > div {
  width: 3px;
  height: 7px;
  z-index: 10;
  border-radius: 10px;
  transition: 0.1s ease;
  background-color: var(--color-white);
}

.music-card.music-on > div:first-child > div {
  animation: dance 1.1s infinite ease-out;
}

.music-card > div:first-child > div:nth-child(2) {
  animation-delay: 0.55s;
}

.music-card > div:last-child {
  gap: 3px;
  margin: 0 6px;
  display: flex;
  flex-direction: column;
  font-family: "system-ui", "Trebuchet MS", "Helvetica";
}

.music-card > div:last-child > p:first-child {
  font-size: 12px;
  font-weight: bold;
}

.music-card > div:last-child > p:last-child {
  font-size: 11px;
  color: var(--color-gray-6);
}

@keyframes dance {
  0%,
  100% {
    height: 7px;
  }
  50% {
    height: 14px;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

@keyframes light {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}

@keyframes expand {
  from {
    width: 20.3rem;
  }
  to {
    width: 20rem;
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.1rem);
  }
}

@keyframes float {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-2.5rem) scale(1.2);
    opacity: 0;
  }
}

@keyframes background-change1 {
  0% {
    background-color: var(--color-background-1);
  }
  50% {
    background-color: var(--color-background-3);
  }
  100% {
    background-color: var(--color-background-1);
  }
}

@keyframes background-change2 {
  0% {
    background-color: var(--color-background-2);
  }
  50% {
    background-color: var(--color-background-4);
  }
  100% {
    background-color: var(--color-background-2);
  }
}

@keyframes shadow-change {
  0% {
    box-shadow: -0.3125rem 0.3125rem 0 var(--color-background-1);
  }
  50% {
    box-shadow: -0.3125rem 0.3125rem 0 var(--color-background-3);
  }
  100% {
    box-shadow: -0.3125rem 0.3125rem 0 var(--color-background-1);
  }
}