*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}.shape{display:grid;place-items:center;color:#090909;font-family:Arial,sans-serif;font-size:1.45rem;font-weight:300;line-height:1}.shape-circle{border-radius:50%}.shape-x{clip-path:polygon(0 15%,15% 0,50% 35%,85% 0,100% 15%,65% 50%,100% 85%,85% 100%,50% 65%,15% 100%,0 85%,35% 50%)}.shape-triangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.shape-square{border-radius:2px}.shape-octagon{clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}.shape-pentagon{clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}.shape-hexagon{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}.shape-septagon{clip-path:polygon(50% 0,89% 19%,100% 62%,72% 100%,28% 100%,0 62%,11% 19%)}