.diamond-wrap {
  filter: drop-shadow(0 0 20px #4EE2EC) drop-shadow(0 0 0 #4EE2EC);
  animation: diamond-shiny 1s infinite alternate;
}

@keyframes diamond-shiny {
  to {
    filter: drop-shadow(0 0 50px #4EE2EC) drop-shadow(0 0 20px #4EE2EC);
  }
}

.diamond {
  width: 400px;
  height: 350px;
  clip-path: polygon(0 100px, 70px 0, 330px 0, 400px 100px, 200px 350px);
  transform: scale(0.25);
}

.diamond-side-top {
  animation: diamond-side-top 1s linear infinite;
  display: flex;
}

@keyframes diamond-side-top {
  to {
    margin-left: -133.3333333333px;
  }
}

.diamond-top-sharp {
  width: 133.3333333333px;
  height: 100px;
  background-color: var(--color-start);
  animation: color-shine 1s linear infinite;
  flex: 0 0 auto;
}

.diamond-top-sharp + .diamond-top-sharp {
  margin-left: calc(-400px / 6);
}

.diamond-top-sharp:nth-child(even) {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.diamond-top-sharp:nth-child(1) { --color-start: #4EE2EC; }
.diamond-top-sharp:nth-child(2) { --color-start: #FFF; --color-middle: #4EE2EC; --color-end: #FFF; }
.diamond-top-sharp:nth-child(3) { --color-start: #7AEDF5; --color-middle: #FFF; --color-end: #4EE2EC; }
.diamond-top-sharp:nth-child(4) { --color-start: #1BA8B5; --color-middle: #7AEDF5; --color-end: #FFF; }
.diamond-top-sharp:nth-child(5) { --color-start: #4EE2EC; --color-middle: #1BA8B5; --color-end: #7AEDF5; }
.diamond-top-sharp:nth-child(6) { --color-start: #7AEDF5; --color-middle: #B0F0F7; --color-end: #1BA8B5; }
.diamond-top-sharp:nth-child(7) { --color-start: #B0F0F7; --color-middle: #FFF; --color-end: #7AEDF5; }
.diamond-top-sharp:nth-child(8) { --color-start: #4EE2EC; --color-middle: #B0F0F7; --color-end: #FFF; }

.diamond-side-bottom {
  display: flex;
}

.diamond-bottom-sharp {
  width: 400px;
  height: 250px;
  flex: 0 0 auto;
}

.diamond-bottom-sharp:nth-child(1) {
  clip-path: polygon(0% 0, 33.3333333333% 0, 50% 100%);
  animation: diamond-bottom-sharp-0 1s linear infinite;
}
@keyframes diamond-bottom-sharp-0 {
  to { clip-path: polygon(-33.3333333333% 0, 0% 0, 50% 100%); }
}

.diamond-bottom-sharp:nth-child(2) {
  clip-path: polygon(33.3333333333% 0, 66.6666666667% 0, 50% 100%);
  animation: diamond-bottom-sharp-1 1s linear infinite;
}
@keyframes diamond-bottom-sharp-1 {
  to { clip-path: polygon(0% 0, 33.3333333333% 0, 50% 100%); }
}

.diamond-bottom-sharp:nth-child(3) {
  clip-path: polygon(66.6666666667% 0, 100% 0, 50% 100%);
  animation: diamond-bottom-sharp-2 1s linear infinite;
}
@keyframes diamond-bottom-sharp-2 {
  to { clip-path: polygon(33.3333333333% 0, 66.6666666667% 0, 50% 100%); }
}

.diamond-bottom-sharp:nth-child(4) {
  clip-path: polygon(100% 0, 133.3333333333% 0, 50% 100%);
  animation: diamond-bottom-sharp-3 1s linear infinite;
}
@keyframes diamond-bottom-sharp-3 {
  to { clip-path: polygon(66.6666666667% 0, 100% 0, 50% 100%); }
}

.diamond-bottom-sharp + .diamond-bottom-sharp {
  margin-left: -400px;
}

.diamond-bottom-sharp-color {
  width: 100%;
  height: 100%;
  background-color: var(--color-start);
  animation: color-shine 1s linear infinite;
}

.diamond-bottom-sharp:nth-child(1) .diamond-bottom-sharp-color { --color-start: #FFF; --color-middle: #7AEDF5; --color-end: #FFF; }
.diamond-bottom-sharp:nth-child(2) .diamond-bottom-sharp-color { --color-start: #1BA8B5; --color-end: #FFF; }
.diamond-bottom-sharp:nth-child(3) .diamond-bottom-sharp-color { --color-start: #7AEDF5; --color-middle: #FFF; --color-end: #1BA8B5; }
.diamond-bottom-sharp:nth-child(4) .diamond-bottom-sharp-color { --color-start: #4EE2EC; --color-middle: #1BA8B5; --color-end: #7AEDF5; }

@keyframes color-shine {
  50% { background-color: var(--color-middle, var(--color-start)); }
  to { background-color: var(--color-end, var(--color-start)); }
}

.shine {
  margin: var(--offsetY, 0) 0 0 var(--offsetX, 0);
  transform: scale(var(--scale, 1));
  position: absolute;
}

.shine:nth-child(1) { --offsetX: 80px; --offsetY: -100px; }
.shine:nth-child(2) { --offsetX: 50px; --offsetY: 100px; --delay: 0.58721384s; }
.shine:nth-child(3) { --offsetX: -75px; --scale: 1.5; --delay: 1.5318943s; }
.shine:nth-child(4) { --offsetX: -100px; --offsetY: 50px; --delay: 1.55671289767s; }
.shine:nth-child(5) { --offsetX: -150px; --offsetY: -50px; --scale: 0.75; --delay: 2.78632786123s; }
.shine:nth-child(6) { --offsetX: 50px; --scale: 1.25; --delay: 2.584384531587s; }
.shine:nth-child(7) { --offsetX: 150px; --offsetY: 50px; --scale: 0.5; --delay: 3.12738954s; }
.shine:nth-child(8) { --offsetX: -25px; --offsetY: 25px; --delay: 3.5296732197s; }
.shine:nth-child(9) { --offsetY: -100px; --delay: 4.19782464s; }
.shine:nth-child(10) { --offsetX: -50px; --offsetY: 100px; --scale: 0.5; --delay: 4.541272397s; }

.shine-flare {
  width: 8px;
  height: 24px;
  margin: -24px 0 0 -4px;
  background-color: #FFF;
  border-radius: 4px;
  animation: shine-flare 2.4348764s ease-out infinite both;
  animation-delay: var(--delay, 0s);
  transform: rotate(var(--angle, 0deg)) translateY(0);
  transform-origin: center bottom;
  visibility: hidden;
  position: absolute;
}

.shine-flare:nth-child(1) { --angle: 0deg; }
.shine-flare:nth-child(2) { --angle: 72deg; }
.shine-flare:nth-child(3) { --angle: 144deg; }
.shine-flare:nth-child(4) { --angle: 216deg; }
.shine-flare:nth-child(5) { --angle: 288deg; }
.shine-flare:nth-child(6) { --angle: 360deg; }

@keyframes shine-flare {
  1% { visibility: visible; }
  8% { width: 8px; transform: rotate(var(--angle, 0deg)) translateY(-42px); }
  16% { width: 0; height: 0; transform: rotate(var(--angle, 0deg)) translateY(-54px); visibility: hidden; }
}