* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-size: 0;
}

body {
  min-height: 100vh;
  background-color: hsl(0, 100%, 50%);
  background-image: radial-gradient(at 40% 20%, hsl(28, 100%, 74%) 0px, transparent 50%), radial-gradient(at 80% 0%, hsl(189, 100%, 56%) 0px, transparent 50%), radial-gradient(at 0% 50%, hsl(355, 100%, 93%) 0px, transparent 50%), radial-gradient(at 80% 50%, hsl(340, 100%, 76%) 0px, transparent 50%), radial-gradient(at 0% 100%, hsl(22, 100%, 77%) 0px, transparent 50%), radial-gradient(at 80% 100%, hsl(242, 100%, 70%) 0px, transparent 50%), radial-gradient(at 0% 0%, hsl(343, 100%, 76%) 0px, transparent 50%);
  background-size: 300%;
  background-position: 50% 0%;
  animation-name: bg;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
body .container {
  margin: 50px;
  display: flex;
  flex-flow: row wrap;
  gap: 50px;
  justify-content: center;
}
body .container .example {
  flex: 0 1 750px;
}
body .container .example img {
  width: 100%;
  opacity: 0.9;
  transition: transform 1s ease, opacity 1s ease;
}
body .container .example img:hover {
  transform: scale(1.2);
  opacity: 1;
}
body .container .example:nth-child(odd) {
  clip-path: polygon(1% 9%, 2% 4%, 4% 1%, 9% 2%, 13% 1%, 16% 2%, 19% 1%, 23% 2%, 26% 1%, 31% 2%, 36% 0%, 42% 1%, 47% 2%, 52% 3%, 54% 1%, 58% 0%, 62% 2%, 66% 2%, 70% 1%, 73% 1%, 75% 2%, 79% 4%, 81% 2%, 85% 4%, 87% 2%, 90% 2%, 93% 3%, 95% 3%, 97% 4%, 98% 8%, 98% 11%, 99% 14%, 99% 19%, 99% 26%, 99% 30%, 98% 34%, 100% 36%, 99% 41%, 99% 44%, 99% 49%, 99% 53%, 100% 63%, 99% 65%, 99% 71%, 99% 73%, 98% 77%, 98% 80%, 99% 85%, 99% 89%, 99% 93%, 99% 96%, 98% 99%, 94% 99%, 87% 99%, 84% 99%, 78% 100%, 70% 99%, 65% 98%, 62% 100%, 58% 100%, 55% 99%, 52% 100%, 47% 98%, 42% 99%, 38% 98%, 35% 99%, 32% 99%, 29% 99%, 27% 99%, 24% 98%, 21% 99%, 19% 99%, 17% 99%, 13% 99%, 9% 98%, 4% 100%, 3% 98%, 1% 97%, 1% 93%, 1% 87%, 0% 79%, 0% 33%, 1% 13%);
}
body .container .example:nth-child(even) {
  clip-path: polygon(0% 1%, 2% 0%, 3% 0%, 5% 0%, 8% 2%, 10% 0%, 12% 1%, 14% 1%, 16% 2%, 18% 1%, 19% 1%, 21% 1%, 23% 1%, 25% 1%, 27% 0%, 29% 1%, 31% 1%, 34% 1%, 37% 0%, 42% 1%, 45% 0%, 47% 1%, 50% 0%, 52% 2%, 54% 1%, 56% 0%, 60% 0%, 62% 1%, 63% 1%, 65% 1%, 67% 1%, 69% 1%, 72% 1%, 73% 1%, 75% 1%, 77% 1%, 78% 0%, 80% 1%, 82% 0%, 84% 1%, 86% 1%, 88% 1%, 89% 1%, 91% 1%, 92% 1%, 95% 1%, 96% 2%, 97% 1%, 99% 2%, 99% 3%, 100% 5%, 99% 7%, 99% 10%, 99% 12%, 100% 14%, 100% 17%, 99% 20%, 99% 22%, 99% 25%, 99% 27%, 99% 29%, 99% 32%, 99% 35%, 100% 37%, 99% 40%, 99% 43%, 99% 46%, 99% 49%, 100% 52%, 99% 58%, 100% 61%, 100% 64%, 99% 67%, 100% 70%, 99% 74%, 100% 77%, 99% 79%, 99% 84%, 100% 87%, 100% 90%, 99% 94%, 100% 96%, 99% 99%, 96% 99%, 94% 99%, 87% 99%, 78% 99%, 73% 98%, 70% 99%, 66% 97%, 62% 99%, 57% 99%, 52% 98%, 47% 99%, 43% 99%, 39% 99%, 36% 99%, 31% 98%, 27% 99%, 22% 99%, 18% 100%, 14% 99%, 9% 99%, 5% 98%, 3% 99%, 1% 99%, 0% 88%, 1% 79%, 0% 69%, 1% 67%, 0% 64%, 1% 59%, 1% 50%, 2% 44%, 1% 41%, 1% 35%, 1% 30%, 1% 25%, 1% 20%, 1% 14%, 0% 12%, 0% 8%, 1% 5%);
}

@keyframes bg {
  0% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 50% 0%;
  }
}

/*# sourceMappingURL=style.css.map */