body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  max-height: 100vh;
  width: 100vw;
  flex-direction: column;
}

h1 {
  font-weight: normal;
}

.party {
  position: relative;
  width: calc(48px * 4);
  height: calc(48px * 4);
}

.party * {
  animation-duration: 500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.party::before {
  content: "";
  border-right: calc(24px * 4) solid transparent;
  border-bottom: calc(24px * 4) solid #b4b4f3;
  border-left: calc(24px * 4) solid transparent;
  height: calc(48px * 4);
  width: calc(48px * 4);
  animation: party-body 500ms linear infinite;
}

ul {
  list-style: none;
  padding: 0;
  width: calc(32px * 4);
  height: calc(32px * 4);
  border-radius: 50%;
  background: #7272e9;
  position: absolute;
  top: calc(-4px * 12);
  left: calc(8px * 4);
  animation-name: party-head;
  margin: 0;
}

ul li:nth-child(1) {
  background: #2e2f30;
  border-radius: 50%;
  width: calc(6px * 4);
  height: calc(6px * 4);
  position: absolute;
  top: calc(8px * 4);
  right: calc(4px * 4);
}

ul li:nth-child(2) {
  background: #2e2f30;
  border-radius: 50%;
  width: calc(6px * 4);
  height: calc(6px * 4);
  position: absolute;
  top: calc(8px * 4);
  left: calc(8px * 4);
}

ul li:nth-child(3) {
  border-left: calc(4px * 4) solid transparent;
  border-top: calc(16px * 4) solid #f5d875;
  border-right: calc(4px * 4) solid transparent;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
}

ul li:nth-child(4) {
  border-top: calc(6px * 4) solid transparent;
  border-left: calc(6px * 4) solid #3df2c2;
  border-bottom: calc(6px * 4) solid transparent;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateY(-50%);
  animation-name: party-plume;
}

@keyframes party-plume {
  0%,
  100% {
    border-left-color: #3df2c2;
  }
  25% {
    border-left-color: #7272e9;
  }
  50% {
    border-left-color: #ff479e;
  }
  75% {
    border-left-color: #ff8c62;
  }
}

@keyframes party-head {
  0%,
  100% {
    transform: translate(0%, 0%) rotate(0deg);
    background: #7272e9;
  }
  25% {
    transform: translate(-37.5%, 12.5%) rotate(22.5deg);
    background: #51cfdb;
  }
  50% {
    transform: translate(0%, 25%);
    background: #3ad4ac;
  }
  75% {
    transform: translate(25%, 12.5%) rotate(-11.25deg);
    background: #e04351;
  }
}

@keyframes party-body {
  0%,
  100% {
    border-right-width: calc(24px * 4);
    border-left-width: calc(24px * 4);
    border-bottom-color: #b4b4f3;
  }
  25% {
    border-right-width: calc(44px * 4);
    border-left-width: calc(4px * 4);
    border-bottom-color: #70eefa;
  }
  50% {
    border-right-width: calc(24px * 4);
    border-left-width: calc(24px * 4);
    border-bottom-color: #a7f9e3;
  }
  75% {
    border-right-width: calc(12px * 4);
    border-left-width: calc(36px * 4);
    border-bottom-color: #ff6270;
  }
}