@charset "utf-8";
/* CSS Document */
/* number of columns/rows, don't forget to adjust the HTML value */
g {
  --s: 70px;
  /* size of the puzzle */
  --r: 12px;
  display: grid;
  width: fit-content;
  border: 1px solid;
  margin: auto;
  grid: auto-flow var(--s)/repeat(5, var(--s));
}

g:before {
  content: "Image originale";
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
  position: fixed;
  top: 10px;
  left: 10px;
  width: calc(5*var(--s)*0.6);
  aspect-ratio: 1;
  -webkit-mask: repeating-linear-gradient(-45deg, #000 0 10%, #000d 0 20%);
  background: var(--i) 0/100% 100%;
  display: grid;
  place-content: center;
}

z {
  display: grid;
  position: relative;
  pointer-events: none;
  outline: 1px dashed;
}

a {
  grid-area: 1/1;
  width: 0;
  transition: 0s 0.2s;
  pointer-events: initial;
}

b {
  grid-area: 1/1;
  z-index: 2;
  display: grid;
  filter: drop-shadow(0 0 2px red) drop-shadow(0 0 2px red);
  cursor: grab;
  pointer-events: initial;
  height: calc(100% + var(--r));
  width: calc(100% + var(--r));
  place-self: start end;
  --m:
  	radial-gradient(var(--r) at calc(50% - var(--r)/2) 0,#0000 98%,#000) var(--r) 0/100% var(--r) no-repeat,
  	radial-gradient(var(--r) at calc(100% - var(--r)) calc(50% - var(--r)/2),#0000 98%,#000) var(--r) 50%/100% calc(100% - 2*var(--r)) no-repeat,
  	radial-gradient(var(--r) at var(--r) calc(50% - var(--r)/2),#000 98%,#0000),
  	radial-gradient(var(--r) at calc(50% + var(--r)/2) calc(100% - var(--r)),#000 98%,#0000);
}

b:before {
  content: "";
  background: var(--i) 0/calc(5*var(--s)) calc(5*var(--s));
  -webkit-mask: var(--m);
  mask: var(--m);
}

z:first-child b {
  height: calc(100% + var(--r));
  width: 100%;
  --m:
  	radial-gradient(var(--r) at 100% calc(50% + var(--r)/2),#0000 98%,#000)
  	 0 calc(-1*var(--r)) no-repeat,
  	radial-gradient(var(--r) at 50% calc(100% - var(--r)),#000 98%,#0000) ;
}

z:nth-child(-n+4):not(:first-child) b {
  place-self: start end;
  height: calc(100% + var(--r));
  width: calc(100% + var(--r));
  --m:
  	radial-gradient(var(--r) at calc(100% - var(--r)) calc(50% + var(--r)/2),#0000 98%,#000)
  	 var(--r) calc(-1*var(--r)) no-repeat,
  	radial-gradient(var(--r) at var(--r) calc(50% - var(--r)/2),#000 98%,#0000),
  	radial-gradient(var(--r) at calc(50% + var(--r)/2) calc(100% - var(--r)),#000 98%,#0000) ;
}

z:nth-child(5) b {
  place-self: start end;
  height: calc(100% + var(--r));
  width: calc(100% + var(--r));
  --m:
  	linear-gradient(#000 0 0) var(--r) calc(-1*var(--r)) no-repeat,
  	radial-gradient(var(--r) at var(--r) calc(50% - var(--r)/2),#000 98%,#0000),
  	radial-gradient(var(--r) at calc(50% + var(--r)/2) calc(100% - var(--r)),#000 98%,#0000) ;
}

z:nth-child(5n+1):not(:first-child):not(:nth-last-child(5)) b {
  height: calc(100% + var(--r));
  width: 100%;
  --m:
  	radial-gradient(var(--r) at 100% calc(50% - var(--r)/2),#0000 98%,#000) 50%/ 100% calc(100% - 2*var(--r)) no-repeat,
  	radial-gradient(var(--r) at 50% 0,#0000 98%,#000) 0 0/ 100% var(--r) no-repeat,
  	radial-gradient(var(--r) at 50% calc(100% - var(--r)),#000 98%,#0000) ;
}

z:nth-last-child(5) b {
  height: 100%;
  width: 100%;
  --m:
  	radial-gradient(var(--r) at 100% calc(50% - var(--r)),#0000 98%,#000) 0 var(--r) no-repeat,
  	radial-gradient(var(--r) at 50% 0,#0000 98%,#000) 0 0/ 100% var(--r) no-repeat;
}

z:nth-child(5n):not(:nth-child(5)):not(:last-child) b {
  place-self: start end;
  height: calc(100% + var(--r));
  width: calc(100% + var(--r));
  --m:
  	radial-gradient(var(--r) at calc(50% - var(--r)/2) var(--r),#0000 98%,#000) var(--r) calc(-1*var(--r)) no-repeat,
  	radial-gradient(var(--r) at var(--r) calc(50% - var(--r)/2),#000 98%,#0000),
  	radial-gradient(var(--r) at calc(50% + var(--r)/2) calc(100% - var(--r)),#000 98%,#0000) ;
}

z:last-child b {
  place-self: end;
  height: 100%;
  width: calc(100% + var(--r));
  --m:
  	radial-gradient(var(--r) at calc(50% - var(--r)/2) 0,#0000 98%,#000) var(--r) 0 no-repeat,
  	radial-gradient(var(--r) at var(--r) 50%,#000 98%,#0000) ;
}

z:nth-last-child(-n+4):not(:last-child) b {
  place-self: end;
  height: 100%;
  width: calc(100% + var(--r));
  --m:
  	radial-gradient(var(--r) at calc(50% - var(--r)/2) 0,#0000 98%,#000) var(--r) 0/100% var(--r) no-repeat,
  	radial-gradient(var(--r) at calc(100% - var(--r)) calc(50% - var(--r)/2),#0000 98%,#000) var(--r) 100%/100% calc(100% - var(--r)) no-repeat,
  	radial-gradient(var(--r) at var(--r) 50%,#000 98%,#0000) ;
}

z:nth-of-type(1) b {
  transform: translate(200%, 200%) rotate(80deg) translate(469%) rotate(-72deg);
}

z:nth-of-type(1) b:before {
  background-position: 0% 0%;
}

z:nth-of-type(2) b {
  transform: translate(100%, 200%) rotate(168deg) translate(458%) rotate(-177deg);
}

z:nth-of-type(2) b:before {
  background-position: 25% 0%;
}

z:nth-of-type(3) b {
  transform: translate(0%, 200%) rotate(35deg) translate(431%) rotate(-30deg);
}

z:nth-of-type(3) b:before {
  background-position: 50% 0%;
}

z:nth-of-type(4) b {
  transform: translate(-100%, 200%) rotate(6deg) translate(453%) rotate(-15deg);
}

z:nth-of-type(4) b:before {
  background-position: 75% 0%;
}

z:nth-of-type(5) b {
  transform: translate(-200%, 200%) rotate(152deg) translate(469%) rotate(-143deg);
}

z:nth-of-type(5) b:before {
  background-position: 100% 0%;
}

z:nth-of-type(6) b {
  transform: translate(200%, 100%) rotate(78deg) translate(423%) rotate(-68deg);
}

z:nth-of-type(6) b:before {
  background-position: 0% 25%;
}

z:nth-of-type(7) b {
  transform: translate(100%, 100%) rotate(159deg) translate(416%) rotate(-160deg);
}

z:nth-of-type(7) b:before {
  background-position: 25% 25%;
}

z:nth-of-type(8) b {
  transform: translate(0%, 100%) rotate(69deg) translate(419%) rotate(-60deg);
}

z:nth-of-type(8) b:before {
  background-position: 50% 25%;
}

z:nth-of-type(9) b {
  transform: translate(-100%, 100%) rotate(56deg) translate(429%) rotate(-55deg);
}

z:nth-of-type(9) b:before {
  background-position: 75% 25%;
}

z:nth-of-type(10) b {
  transform: translate(-200%, 100%) rotate(177deg) translate(407%) rotate(-170deg);
}

z:nth-of-type(10) b:before {
  background-position: 100% 25%;
}

z:nth-of-type(11) b {
  transform: translate(200%, 0%) rotate(41deg) translate(444%) rotate(-36deg);
}

z:nth-of-type(11) b:before {
  background-position: 0% 50%;
}

z:nth-of-type(12) b {
  transform: translate(100%, 0%) rotate(50deg) translate(446%) rotate(-52deg);
}

z:nth-of-type(12) b:before {
  background-position: 25% 50%;
}

z:nth-of-type(13) b {
  transform: translate(0%, 0%) rotate(113deg) translate(410%) rotate(-107deg);
}

z:nth-of-type(13) b:before {
  background-position: 50% 50%;
}

z:nth-of-type(14) b {
  transform: translate(-100%, 0%) rotate(50deg) translate(413%) rotate(-45deg);
}

z:nth-of-type(14) b:before {
  background-position: 75% 50%;
}

z:nth-of-type(15) b {
  transform: translate(-200%, 0%) rotate(142deg) translate(458%) rotate(-149deg);
}

z:nth-of-type(15) b:before {
  background-position: 100% 50%;
}

z:nth-of-type(16) b {
  transform: translate(200%, -100%) rotate(98deg) translate(409%) rotate(-100deg);
}

z:nth-of-type(16) b:before {
  background-position: 0% 75%;
}

z:nth-of-type(17) b {
  transform: translate(100%, -100%) rotate(61deg) translate(446%) rotate(-66deg);
}

z:nth-of-type(17) b:before {
  background-position: 25% 75%;
}

z:nth-of-type(18) b {
  transform: translate(0%, -100%) rotate(159deg) translate(451%) rotate(-159deg);
}

z:nth-of-type(18) b:before {
  background-position: 50% 75%;
}

z:nth-of-type(19) b {
  transform: translate(-100%, -100%) rotate(39deg) translate(414%) rotate(-45deg);
}

z:nth-of-type(19) b:before {
  background-position: 75% 75%;
}

z:nth-of-type(20) b {
  transform: translate(-200%, -100%) rotate(34deg) translate(454%) rotate(-25deg);
}

z:nth-of-type(20) b:before {
  background-position: 100% 75%;
}

z:nth-of-type(21) b {
  transform: translate(200%, -200%) rotate(116deg) translate(453%) rotate(-110deg);
}

z:nth-of-type(21) b:before {
  background-position: 0% 100%;
}

z:nth-of-type(22) b {
  transform: translate(100%, -200%) rotate(54deg) translate(402%) rotate(-60deg);
}

z:nth-of-type(22) b:before {
  background-position: 25% 100%;
}

z:nth-of-type(23) b {
  transform: translate(0%, -200%) rotate(13deg) translate(420%) rotate(-18deg);
}

z:nth-of-type(23) b:before {
  background-position: 50% 100%;
}

z:nth-of-type(24) b {
  transform: translate(-100%, -200%) rotate(85deg) translate(401%) rotate(-94deg);
}

z:nth-of-type(24) b:before {
  background-position: 75% 100%;
}

z:nth-of-type(25) b {
  transform: translate(-200%, -200%) rotate(24deg) translate(428%) rotate(-19deg);
}

z:nth-of-type(25) b:before {
  background-position: 100% 100%;
}

z b {
  transition: 9999s 9999s;
}

z:active a {
  width: 100%;
  transition: 0s;
}

z a:hover ~ b {
  transform: translate(0);
  filter: none;
  transition: 0s;
}

body {
  background: #376482;
  color: #fff;
  font-family: system-ui, sans-serif;
}

h1 {
  font-size: 2rem;
  margin: 0;
  text-align: center;
}

p {
  font-size: 0.8rem;
  text-align: center;
}