body {
    margin: 0;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

#shape {
    width: 300px;
    height: 300px;
    transition: background-color 1s ease-in-out, clip-path 1s cubic-bezier(0, 0, 0.2, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

/* Common shape styles */
.shape {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: background-color 1s ease-in-out, clip-path 1s cubic-bezier(0, 0, 0.2, 1);
}

.shape::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: inherit;
    clip-path: inherit;
    filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.3));
    z-index: -1;
}

.circle {
    border-radius: 50%;
    transition: background-color 1s ease-in-out, border-radius 1s ease-in-out !important;
}


.oval {
    width: calc(10%) !important;
    border-radius: 50%;
    transition: background-color 1s ease-in-out, width 1s ease-in-out, border-radius 1s ease-in-out !important;
}


/* Line: a thin horizontal bar using clip-path */
.line {
    clip-path: polygon(0% 100%, 10% 100%, 20% 100%, 40% 100%, 80% 100%, 100% 100%, 100% 97%, 50% 97%, 0% 97%, 0% 100%);
}

/* Angle: an L-shape using clip-path */
.angle {
    clip-path: polygon(0% 100%, 10% 100%, 20% 100%, 40% 100%, 80% 100%, 100% 100%, 100% 95%, 8% 95%, 55% 0%, 50% 0%);
}

/* 3 to 10 sides - Polygons using clip-path */
.triangle {
    clip-path: polygon(0% 100%, 5% 100%, 10% 100%, 30% 100%, 50% 100%, 70% 100%, 90% 100%, 100% 100%, 50% 0%, 0% 100%);
}

.square {
    clip-path: polygon(0% 100%, 30% 100%, 50% 100%, 70% 100%, 100% 100%, 100% 50%, 100% 0%, 50% 0%, 0% 0%, 0% 100%);
}

.rectangle {
    clip-path: polygon(25% 100%, 50% 100%, 75% 100%, 75% 50%, 75% 0%, 50% 0%, 25% 0%, 25% 50%, 25% 75%, 25% 100%);
}

.rhombus {
    clip-path: polygon(50% 100%, 65% 75%, 80% 50%, 65% 25%, 50% 0%, 35% 25%, 20% 50%, 35% 75%, 50% 100%, 50% 100%);
}

.pentagon {
    clip-path: polygon(23% 90%, 50% 90%, 77% 90%, 86% 62.5%, 95% 35%, 72.5% 17.5%, 50% 0%, 27.5% 17.5%, 5% 35%, 23% 90%);
}

.hexagon {
    clip-path: polygon(25% 100%, 50% 100%, 75% 100%, 87.5% 75%, 100% 50%, 75% 0%, 50% 0%, 25% 0%, 0 50%, 25% 100%);
}

.heptagon {
    clip-path: polygon(25% 100%, 75% 100%, 100% 60%, 90% 20%, 70% 10%, 50% 0%, 30% 10%, 10% 20%, 0% 60%, 25% 100%);
}

.octagon {
    clip-path: polygon(30% 100%, 70% 100%, 100% 70%, 100% 30%, 70% 0%, 50% 0%, 30% 0%, 0% 30%, 0% 70%, 30% 100%);
}

.nonagon {
    clip-path: polygon(30% 100%, 70% 100%, 95% 75%, 100% 40%, 80% 10%, 50% 0%, 50% 0%, 20% 10%, 0% 40%, 5% 75%);
}

.decagon {
    clip-path: polygon(20% 95%, 50% 100%, 80% 95%, 100% 70%, 100% 30%, 80% 5%, 50% 0%, 20% 5%, 0% 30%, 0% 70%);
}

.star {
    clip-path: polygon(19% 100%, 50% 70%, 83% 100%, 68% 57%, 98% 35%, 61% 35%, 50% 0%, 39% 35%, 2% 35%, 32% 57%);
}

/* Styles for mobile devices */
@media (max-width: 767px) {
    #shape {
        width: 250px;
        height: 250px;
    }
}