.shape {
  width: var(--shape-size);
  height: var(--shape-size);
  background: var(--shape-color, royalblue);
}

.square {
  --shape-color: royalblue;
}

.rectangle {
  --shape-color: tomato;
  width: calc(var(--shape-size) * 1.35);
  height: calc(var(--shape-size) * 0.7);
}

.circle {
  --shape-color: mediumpurple;
  border-radius: 50%;
}

.pill {
  --shape-color: navajowhite;
  width: calc(var(--shape-size) * 1.35);
  height: calc(var(--shape-size) * 0.75);
  border-radius: 999px;
}

.triangle-up {
  --shape-color: #ef4444;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.triangle-down {
  --shape-color: #22c55e;
  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
}

.triangle-left {
  --shape-color: #f59e0b;
  clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
}

.triangle-right {
  --shape-color: #22d3ee;
  clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}

.diamond {
  --shape-color: crimson;
  width: calc(var(--shape-size) * 0.82);
  height: calc(var(--shape-size) * 0.82);
  transform: rotate(45deg);
}

.trapezoid {
  --shape-color: #facc15;
  width: calc(var(--shape-size) * 1.25);
  height: calc(var(--shape-size) * 0.75);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.parallelogram {
  --shape-color: #94a3b8;
  width: calc(var(--shape-size) * 1.2);
  height: calc(var(--shape-size) * 0.75);
  clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
}

.oval {
  --shape-color: teal;
  width: calc(var(--shape-size) * 1.35);
  height: calc(var(--shape-size) * 0.75);
  border-radius: 50%;
}

.half-circle {
  --shape-color: cornflowerblue;
  height: calc(var(--shape-size) * 0.5);
  border-radius: var(--shape-size) var(--shape-size) 0 0;
}

.star {
  --shape-color: gold;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

.blob {
  --shape-color: mediumslateblue;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.heart {
  --shape-color: #ef4444;
  position: relative;
  width: calc(var(--shape-size) * 0.55);
  height: calc(var(--shape-size) * 0.55);
  transform: rotate(45deg);
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--shape-color);
  border-radius: 50%;
}

.heart::before {
  top: -50%;
  left: 0;
}

.heart::after {
  top: 0;
  left: -50%;
}

.hexagon {
  --shape-color: #fbbf24;
  width: calc(var(--shape-size) * 1.2);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.arrow {
  --shape-color: fuchsia;
  width: calc(var(--shape-size) * 1.25);
  height: calc(var(--shape-size) * 0.75);
  clip-path: polygon(
    0% 20%,
    70% 20%,
    70% 0%,
    100% 50%,
    70% 100%,
    70% 80%,
    0% 80%
  );
}

.bubble {
  --shape-color: ghostwhite;
  width: calc(var(--shape-size) * 1.1);
  height: calc(var(--shape-size) * 0.62);
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 75%,
    75% 75%,
    75% 100%,
    50% 75%,
    0% 75%
  );
}

.badge {
  --shape-color: lightsalmon;
  width: calc(var(--shape-size) * 1.1);
  height: calc(var(--shape-size) * 0.62);
  clip-path: polygon(
    10% 0%,
    90% 0%,
    100% 20%,
    100% 80%,
    90% 100%,
    10% 100%,
    0% 80%,
    0% 20%
  );
}

.rabbet {
  --shape-color: darkcyan;
  width: calc(var(--shape-size) * 1.2);
  height: calc(var(--shape-size) * 0.75);
  clip-path: polygon(
    0% 15%,
    15% 15%,
    15% 0%,
    85% 0%,
    85% 15%,
    100% 15%,
    100% 85%,
    85% 85%,
    85% 100%,
    15% 100%,
    15% 85%,
    0% 85%
  );
}