.elementor-11946 .elementor-element.elementor-element-0bdc431{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-11946 .elementor-element.elementor-element-0bdc431 .elementor-background-overlay{width:100%;height:100%;}.elementor-11946 .elementor-element.elementor-element-7260dac{--display:flex;}.elementor-11946 .elementor-element.elementor-element-7260dac .elementor-background-overlay{width:100%;height:100%;}@media(max-width:1024px){.elementor-11946 .elementor-element.elementor-element-0bdc431{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-11946 .elementor-element.elementor-element-0bdc431{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for html, class: .elementor-element-f012ff6 *//* number of columns/rows, don't forget to adjust the HTML value */
g {
  --s: 80px;
  /* 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: "Send a screenshot for a surprise only for canadian viewers";
  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: 20px;
  left: 20px;
  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(119deg) translate(467%) rotate(-111deg);
}

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

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

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

z:nth-of-type(3) b {
  transform: translate(0%, 200%) rotate(84deg) translate(470%) rotate(-93deg);
}

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

z:nth-of-type(4) b {
  transform: translate(-100%, 200%) rotate(30deg) translate(407%) rotate(-34deg);
}

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

z:nth-of-type(5) b {
  transform: translate(-200%, 200%) rotate(89deg) translate(421%) rotate(-83deg);
}

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

z:nth-of-type(6) b {
  transform: translate(200%, 100%) rotate(10deg) translate(414%) rotate(-3deg);
}

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

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

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

z:nth-of-type(8) b {
  transform: translate(0%, 100%) rotate(178deg) translate(464%) rotate(-172deg);
}

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

z:nth-of-type(9) b {
  transform: translate(-100%, 100%) rotate(118deg) translate(419%) rotate(-124deg);
}

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

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

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

z:nth-of-type(11) b {
  transform: translate(200%, 0%) rotate(4deg) translate(446%) rotate(3deg);
}

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

z:nth-of-type(12) b {
  transform: translate(100%, 0%) rotate(32deg) translate(454%) rotate(-31deg);
}

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

z:nth-of-type(13) b {
  transform: translate(0%, 0%) rotate(128deg) translate(451%) rotate(-131deg);
}

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

z:nth-of-type(14) b {
  transform: translate(-100%, 0%) rotate(39deg) translate(465%) rotate(-48deg);
}

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

z:nth-of-type(15) b {
  transform: translate(-200%, 0%) rotate(64deg) translate(464%) rotate(-60deg);
}

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

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

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

z:nth-of-type(17) b {
  transform: translate(100%, -100%) rotate(113deg) translate(441%) rotate(-104deg);
}

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

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

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

z:nth-of-type(19) b {
  transform: translate(-100%, -100%) rotate(95deg) translate(432%) rotate(-92deg);
}

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

z:nth-of-type(20) b {
  transform: translate(-200%, -100%) rotate(124deg) translate(469%) rotate(-114deg);
}

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

z:nth-of-type(21) b {
  transform: translate(200%, -200%) rotate(124deg) translate(440%) rotate(-114deg);
}

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

z:nth-of-type(22) b {
  transform: translate(100%, -200%) rotate(91deg) translate(438%) rotate(-87deg);
}

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

z:nth-of-type(23) b {
  transform: translate(0%, -200%) rotate(48deg) translate(430%) rotate(-47deg);
}

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

z:nth-of-type(24) b {
  transform: translate(-100%, -200%) rotate(162deg) translate(418%) rotate(-164deg);
}

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

z:nth-of-type(25) b {
  transform: translate(-200%, -200%) rotate(31deg) translate(414%) rotate(-32deg);
}

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: #547980;
  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;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7260dac *//* number of columns/rows, don't forget to adjust the HTML value */
g {
  --s: 300px;
  /* size of the puzzle */
  display: grid;
  max-width: var(--s);
  border: 1px solid;
  margin: auto;
  grid-template-columns: repeat(4, 1fr);
}

g:before {
  content: "Original Image";
  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(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 {
  aspect-ratio: 1;
  outline: 1px dashed;
  display: grid;
  position: relative;
  pointer-events: none;
}

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

b {
  grid-area: 1/1;
  background: var(--i) 0/var(--s) var(--s);
  box-shadow: 0 0 4px 1px red;
  z-index: 2;
  cursor: grab;
  pointer-events: initial;
}

z:nth-of-type(1) b {
  background-position: 0% 0%;
  transform: translate(150%, 150%) rotate(118deg) translate(391%) rotate(-112deg);
}

z:nth-of-type(2) b {
  background-position: 33.3333333333% 0%;
  transform: translate(50%, 150%) rotate(124deg) translate(355%) rotate(-127deg);
}

z:nth-of-type(3) b {
  background-position: 66.6666666667% 0%;
  transform: translate(-50%, 150%) rotate(172deg) translate(316%) rotate(-176deg);
}

z:nth-of-type(4) b {
  background-position: 100% 0%;
  transform: translate(-150%, 150%) rotate(150deg) translate(357%) rotate(-147deg);
}

z:nth-of-type(5) b {
  background-position: 0% 33.3333333333%;
  transform: translate(150%, 50%) rotate(79deg) translate(326%) rotate(-78deg);
}

z:nth-of-type(6) b {
  background-position: 33.3333333333% 33.3333333333%;
  transform: translate(50%, 50%) rotate(25deg) translate(324%) rotate(-21deg);
}

z:nth-of-type(7) b {
  background-position: 66.6666666667% 33.3333333333%;
  transform: translate(-50%, 50%) rotate(116deg) translate(398%) rotate(-120deg);
}

z:nth-of-type(8) b {
  background-position: 100% 33.3333333333%;
  transform: translate(-150%, 50%) rotate(106deg) translate(374%) rotate(-104deg);
}

z:nth-of-type(9) b {
  background-position: 0% 66.6666666667%;
  transform: translate(150%, -50%) rotate(161deg) translate(318%) rotate(-161deg);
}

z:nth-of-type(10) b {
  background-position: 33.3333333333% 66.6666666667%;
  transform: translate(50%, -50%) rotate(128deg) translate(381%) rotate(-120deg);
}

z:nth-of-type(11) b {
  background-position: 66.6666666667% 66.6666666667%;
  transform: translate(-50%, -50%) rotate(147deg) translate(340%) rotate(-146deg);
}

z:nth-of-type(12) b {
  background-position: 100% 66.6666666667%;
  transform: translate(-150%, -50%) rotate(69deg) translate(312%) rotate(-66deg);
}

z:nth-of-type(13) b {
  background-position: 0% 100%;
  transform: translate(150%, -150%) rotate(126deg) translate(366%) rotate(-125deg);
}

z:nth-of-type(14) b {
  background-position: 33.3333333333% 100%;
  transform: translate(50%, -150%) rotate(168deg) translate(394%) rotate(-159deg);
}

z:nth-of-type(15) b {
  background-position: 66.6666666667% 100%;
  transform: translate(-50%, -150%) rotate(168deg) translate(359%) rotate(-168deg);
}

z:nth-of-type(16) b {
  background-position: 100% 100%;
  transform: translate(-150%, -150%) rotate(23deg) translate(366%) rotate(-16deg);
}

z b {
  transition: 9999s 9999s;
}

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

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

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

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

p {
  font-size: 1.2rem;
  text-align: center;
}/* End custom CSS */