* {
  margin: 0;
}

:root {
  --size: 80px;
  --color: #F50C0C;
}

body {
  /* height: 100vh; */
  display: flex;
  padding: 30px 0;
  /* align-items: center; */
}

li {
  list-style: none;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-column {
  flex-direction: column;
}
.text {
  font-size: 14px;
  color: #333;
  margin-top: 4px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 160px);
  grid-template-rows: repeat(4, 160px);
  margin-left: 6%;
}

.shape {
  width: var(--size);
  height: var(--size);
  background-color: var(--color);
  cursor: pointer;
}

.side {
  margin-left: 12px;
}

pre {
  width: 320px;
  background-color: #bcbcbc;
  padding: 12px;
  border-radius: 8px;
}
code {
  white-space: break-spaces;
}
.color-panel {
  display: flex;
  margin: 12px 0;
}
.color-panel li {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--color);
  margin-right: 4px;
  cursor: pointer;
}

input[type=range] {
  width: 280px;
}

/* shape css */
.circle {
  clip-path: circle(50% at 50% 50%);
}

.sector {
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 0, 50% 50%);
}

.ellipse {
  clip-path: ellipse(50% 33% at 50% 50%);
}
.pac-man {
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%);
}
.triangle {
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.ri-triangle {
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.ladder {
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

.ri-ladder {
  clip-path: polygon(0 0, 35% 0, 100% 100%, 0 100%);
}
.parallelogram {
  clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
}

.rhombus {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.diamond {
  clip-path: polygon(80% 0, 100% 30%, 50% 100%, 0 30%, 20% 0);
}
.star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);;
}

.half-star {
  position: relative;
  background-color: #f7f7f7;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);;
}
.half-star::after {
  content: '';
  width: 50%;
  height: 100%;
  background: var(--color);
  position: absolute;
}
.bevel {
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
.rabbet {
  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%);
}
.hexagon {
  clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
}
.cross {
  clip-path:polygon(0 35%, 35% 35%, 35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%);
}
.close {
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
.arrow-left {
  clip-path: polygon(50% 0%, 50% 30%, 100% 30%, 100% 70%, 50% 70%, 50% 100%, 0% 50%);
}
.tag {
  clip-path: polygon(30% 15%, 100% 15%, 100% 85%, 30% 85%, 0% 50%);
}