body {
  margin: 0;
  background-color: #6223D2;
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

.overlay {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 2;
  background: radial-gradient(circle, transparent 0%, rgba(98, 35, 210, 0.85) 100%);
}

.container {
  display: grid;
  grid-template-columns: repeat(10, 200px);
  grid-template-rows: repeat(6, 230px);
  transform: translate(-3%, -4%);
}

.shape {
  width: 200px;
  height: 230px;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.shape:nth-child(11) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(12) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(13) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(14) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(15) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(16) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(17) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(18) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(19) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(20) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(21) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(21) {
  transform: translate(0%, -50%);
}
.shape:nth-child(22) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(22) {
  transform: translate(0%, -50%);
}
.shape:nth-child(23) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(23) {
  transform: translate(0%, -50%);
}
.shape:nth-child(24) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(24) {
  transform: translate(0%, -50%);
}
.shape:nth-child(25) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(25) {
  transform: translate(0%, -50%);
}
.shape:nth-child(26) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(26) {
  transform: translate(0%, -50%);
}
.shape:nth-child(27) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(27) {
  transform: translate(0%, -50%);
}
.shape:nth-child(28) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(28) {
  transform: translate(0%, -50%);
}
.shape:nth-child(29) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(29) {
  transform: translate(0%, -50%);
}
.shape:nth-child(30) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(30) {
  transform: translate(0%, -50%);
}
.shape:nth-child(31) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(31) {
  transform: translate(0%, -50%);
}
.shape:nth-child(31) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(32) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(32) {
  transform: translate(0%, -50%);
}
.shape:nth-child(32) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(33) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(33) {
  transform: translate(0%, -50%);
}
.shape:nth-child(33) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(34) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(34) {
  transform: translate(0%, -50%);
}
.shape:nth-child(34) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(35) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(35) {
  transform: translate(0%, -50%);
}
.shape:nth-child(35) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(36) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(36) {
  transform: translate(0%, -50%);
}
.shape:nth-child(36) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(37) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(37) {
  transform: translate(0%, -50%);
}
.shape:nth-child(37) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(38) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(38) {
  transform: translate(0%, -50%);
}
.shape:nth-child(38) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(39) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(39) {
  transform: translate(0%, -50%);
}
.shape:nth-child(39) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(40) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(40) {
  transform: translate(0%, -50%);
}
.shape:nth-child(40) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(41) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(41) {
  transform: translate(0%, -50%);
}
.shape:nth-child(41) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(41) {
  transform: translate(0%, -100%);
}
.shape:nth-child(42) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(42) {
  transform: translate(0%, -50%);
}
.shape:nth-child(42) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(42) {
  transform: translate(0%, -100%);
}
.shape:nth-child(43) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(43) {
  transform: translate(0%, -50%);
}
.shape:nth-child(43) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(43) {
  transform: translate(0%, -100%);
}
.shape:nth-child(44) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(44) {
  transform: translate(0%, -50%);
}
.shape:nth-child(44) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(44) {
  transform: translate(0%, -100%);
}
.shape:nth-child(45) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(45) {
  transform: translate(0%, -50%);
}
.shape:nth-child(45) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(45) {
  transform: translate(0%, -100%);
}
.shape:nth-child(46) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(46) {
  transform: translate(0%, -50%);
}
.shape:nth-child(46) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(46) {
  transform: translate(0%, -100%);
}
.shape:nth-child(47) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(47) {
  transform: translate(0%, -50%);
}
.shape:nth-child(47) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(47) {
  transform: translate(0%, -100%);
}
.shape:nth-child(48) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(48) {
  transform: translate(0%, -50%);
}
.shape:nth-child(48) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(48) {
  transform: translate(0%, -100%);
}
.shape:nth-child(49) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(49) {
  transform: translate(0%, -50%);
}
.shape:nth-child(49) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(49) {
  transform: translate(0%, -100%);
}
.shape:nth-child(50) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(50) {
  transform: translate(0%, -50%);
}
.shape:nth-child(50) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(50) {
  transform: translate(0%, -100%);
}
.shape:nth-child(51) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(51) {
  transform: translate(0%, -50%);
}
.shape:nth-child(51) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(51) {
  transform: translate(0%, -100%);
}
.shape:nth-child(51) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(52) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(52) {
  transform: translate(0%, -50%);
}
.shape:nth-child(52) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(52) {
  transform: translate(0%, -100%);
}
.shape:nth-child(52) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(53) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(53) {
  transform: translate(0%, -50%);
}
.shape:nth-child(53) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(53) {
  transform: translate(0%, -100%);
}
.shape:nth-child(53) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(54) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(54) {
  transform: translate(0%, -50%);
}
.shape:nth-child(54) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(54) {
  transform: translate(0%, -100%);
}
.shape:nth-child(54) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(55) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(55) {
  transform: translate(0%, -50%);
}
.shape:nth-child(55) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(55) {
  transform: translate(0%, -100%);
}
.shape:nth-child(55) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(56) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(56) {
  transform: translate(0%, -50%);
}
.shape:nth-child(56) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(56) {
  transform: translate(0%, -100%);
}
.shape:nth-child(56) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(57) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(57) {
  transform: translate(0%, -50%);
}
.shape:nth-child(57) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(57) {
  transform: translate(0%, -100%);
}
.shape:nth-child(57) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(58) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(58) {
  transform: translate(0%, -50%);
}
.shape:nth-child(58) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(58) {
  transform: translate(0%, -100%);
}
.shape:nth-child(58) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(59) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(59) {
  transform: translate(0%, -50%);
}
.shape:nth-child(59) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(59) {
  transform: translate(0%, -100%);
}
.shape:nth-child(59) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(60) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(60) {
  transform: translate(0%, -50%);
}
.shape:nth-child(60) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(60) {
  transform: translate(0%, -100%);
}
.shape:nth-child(60) {
  transform: translate(-50%, -125%);
}