.card {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 300px;
  height: 300px;
}

.card * {
  position: absolute;
}

/* Define each decagon with its specific size and background color */
.decagon1,
.decagon2,
.decagon3,
.decagon4,
.decagon5 {
  clip-path: polygon(
    50% 0%,
    61% 20%,
    80% 35%,
    100% 50%,
    80% 65%,
    61% 80%,
    50% 100%,
    39% 80%,
    20% 65%,
    0% 50%,
    20% 35%,
    39% 20%
  );
  transition: all 0.3s ease-in-out;
}

.decagon1 {
  width: 250px;
  height: 250px;
  background: #f8cc07;
}

.decagon2 {
  width: 220px;
  height: 220px;
  background: #b0b600;
}

.decagon3 {
  width: 190px;
  height: 190px;
  background: #00b4d8;
}

.decagon4 {
  width: 160px;
  height: 160px;
  background: rgba(56, 34, 68, 0.467);
}

.decagon5 {
  width: 130px;
  height: 130px;
  background: #f6b103;
}

/* Hover animations for each decagon */
.card:hover .decagon1 {
  transform: scale(1.3) rotate(45deg);
}

.card:hover .decagon2 {
  transform: scale(1.3) rotate(90deg) translate(-20px, 20px);
}

.card:hover .decagon3 {
  transform: scale(1.3) rotate(135deg) translate(-40px, 40px);
}

.card:hover .decagon4 {
  transform: scale(1.3) rotate(180deg) translate(-60px, 60px);
}

.card:hover .decagon5 {
  transform: scale(1.3) rotate(225deg) translate(-80px, 80px);
}