html,
body {
  font-size: 24px;
  margin-inline: -50vw;
  color: #666;
}
svg {border-radius:12px;background:white; /* need this because the shadow script doesn't recognize SVG elements as yet, and only gives box shadows to things with backgrounds. */}
.octagon-center {
  width: 160px;
  height: 160px; 

  position: fixed;
  left: 75vw;
  top: 10vh;

  z-index: 999999;
 
}
.sundiv { transform: scale(20%) translate(-50%, -50%); /* you have to have them in this order, scale translate, or getClientBoundingRect and getComputerStyle().top return different values.*/
 transform-origin: 40% 40%;}
disabled.octagon-center {
  /* duplicate selector so you can enable or disable the sky separately - enable this if you enable the sky */
  border: 10px solid green;
  background: #99f;
  box-shadow: inset 0 0 125px #00006666;
}

.add-darkness::after {
  content: "";
  position: absolute;
  inset: -900vw;
 
  box-shadow: inset 10px 10px 200vw black;
  background: radial-gradient(
    circle,
    rgba(255, 255, 240, 0.5) 0%,
    rgba(241, 230, 190, 0) 25%,
    rgba(6, 0, 6, 0.45) 60%
  );
  z-index: 999999;
  /* border: 2px solid red; */
  /* display: block; */
  /* opacity: 1; */
}

.center-circle {
  position: absolute;
  top: var(--center-y);
  left: var(--center-x);
  width: 100px;
  height: 100px;
  /* background: radial-gradient(circle, #ffc, #ccc); */
  background: radial-gradient(circle, #fec, #ff9);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  //margin: -150px -25px;
  z-index: 10;
  box-shadow: 0 0 10px yellow, 0 0 190px yellow, 0 0 300px yellow;
}
.octagon-center::before {
  /* you probably want to disable this if you enable the sky and cloud */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  backdrop-filter: brightness(200%);
  border-radius: 100%;
  mask-image: radial-gradient(black 10% /* 50% */, transparent 65%);
}

.octagon-container {
  position: absolute;
  width: 800px;
  height: 800px;
  left: 0;
  top: 0;
  transform: scale(var(--octagon-scale))
    rotate(calc(var(--octagon-scale) * 360deg));
  pointer-events: none;
}
.shape {
  position: absolute;
  width: 200px;
  height: 600px;
  transform-origin: 100px 400px;
  pointer-events: none;
  filter: drop-shadow(0 0 25px #ffff0099);
}

.shape:before {
  content: "";
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, yellow, #f60);
  clip-path: path("M 0,400 Q 100,300 100,0 Q 100,300 200,400 Z");
}
:root {
  --oct-radius: 200px;
}
.shape:nth-child(1) {
  left: calc(400px + var(--oct-radius) * cos(22.5deg) - 100px);
  top: calc(400px + var(--oct-radius) * sin(22.5deg) - 400px);
  animation: stretch1 1s infinite ease-in-out;
  transform: rotate(112.5deg) scaleY(1);
}
.shape:nth-child(2) {
  left: calc(400px + var(--oct-radius) * cos(67.5deg) - 100px);
  top: calc(400px + var(--oct-radius) * sin(67.5deg) - 400px);
  animation: stretch2 1.1s infinite ease-in-out;
  transform: rotate(157.5deg) scaleY(1);
}
.shape:nth-child(3) {
  left: calc(400px + var(--oct-radius) * cos(112.5deg) - 100px);
  top: calc(400px + var(--oct-radius) * sin(112.5deg) - 400px);
  animation: stretch3 1.2s infinite ease-in-out;
  transform: rotate(202.5deg) scaleY(1);
}
.shape:nth-child(4) {
  left: calc(400px + var(--oct-radius) * cos(157.5deg) - 100px);
  top: calc(400px + var(--oct-radius) * sin(157.5deg) - 400px);
  animation: stretch4 1.3s infinite ease-in-out;
  transform: rotate(247.5deg) scaleY(1);
}
.shape:nth-child(5) {
  left: calc(400px + var(--oct-radius) * cos(202.5deg) - 100px);
  top: calc(400px + var(--oct-radius) * sin(202.5deg) - 400px);
  animation: stretch5 1.4s infinite ease-in-out;
  transform: rotate(292.5deg) scaleY(1);
}
.shape:nth-child(6) {
  left: calc(400px + var(--oct-radius) * cos(247.5deg) - 100px);
  top: calc(400px + var(--oct-radius) * sin(247.5deg) - 400px);
  animation: stretch6 1.5s infinite ease-in-out;
  transform: rotate(337.5deg) scaleY(1);
}
.shape:nth-child(7) {
  left: calc(400px + var(--oct-radius) * cos(292.5deg) - 100px);
  top: calc(400px + var(--oct-radius) * sin(292.5deg) - 400px);
  animation: stretch7 0.9s infinite ease-in-out;
  transform: rotate(22.5deg) scaleY(1);
}
.shape:nth-child(8) {
  left: calc(400px + var(--oct-radius) * cos(337.5deg) - 100px);
  top: calc(400px + var(--oct-radius) * sin(337.5deg) - 400px);
  animation: stretch8 0.8s infinite ease-in-out;
  transform: rotate(67.5deg) scaleY(1);
}
/* Keyframes as before ... */
@keyframes stretch1 {
  0%,
  100% {
    transform: rotate(112.5deg) scaleY(0.9);
  }
  50% {
    transform: rotate(112.5deg) scaleY(1.5);
  }
} /* 1.25 */
@keyframes stretch2 {
  0%,
  100% {
    transform: rotate(157.5deg) scaleY(1);
  }
  50% {
    transform: rotate(157.5deg) scaleY(calc(0.9 * var(--octagon-scale)));
  }
} /* 1.2 */
@keyframes stretch3 {
  0%,
  100% {
    transform: rotate(202.5deg) scaleY(1);
  }
  50% {
    transform: rotate(202.5deg) scaleY(1.5);
  }
} /* 1.3 */
@keyframes stretch4 {
  0%,
  100% {
    transform: rotate(247.5deg) scaleY(1);
  }
  50% {
    transform: rotate(247.5deg) scaleY(calc(1.05 * var(--octagon-scale)));
  }
} /* 1.15 */
@keyframes stretch5 {
  0%,
  100% {
    transform: rotate(292.5deg) scaleY(1);
  }
  50% {
    transform: rotate(292.5deg) scaleY(calc(2.75 * var(--octagon-scale)));
  }
} /* 1.35 */
@keyframes stretch6 {
  0%,
  100% {
    transform: rotate(337.5deg) scaleY(1);
  }
  50% {
    transform: rotate(337.5deg) scaleY(1.18);
  }
} /*1.18*/
@keyframes stretch7 {
  0%,
  100% {
    transform: rotate(22.5deg) scaleY(1);
  }
  50% {
    transform: rotate(22.5deg) scaleY(1.5);
  }
} /* 1.28 */
@keyframes stretch8 {
  0%,
  100% {
    transform: rotate(67.5deg) scaleY(1);
  }
  50% {
    transform: rotate(67.5deg) scaleY(calc(1.12 * var(--octagon-scale)));
  }
} /*1.22*/
.cloud {
  top: 50px;
  margin-top: 70px;
  width: 350px;
  height: 120px;
  background: #eceff1;
  box-shadow: inset 20px 20px 15px #99f, inset -15px 10px 15px #fd9;
  border-radius: 100%;
  filter: blur(15px);
  opacity: 0.45;
  animation: cloud1 120s infinite linear;
  z-index: 999999;
}
.cloud::after,
.cloud::before {
  content: "";
  position: relative;
  display: inline-block;
  background: inherit;
  border-radius: inherit;
  box-shadow: inset 15px 10px 15px #66f, inset -15px 10px 15px #fd6;
}
.cloud::after {
  width: 100px;
  height: 90px;
  top: -110px;
  left: 30px;
}
.cloud::before {
  width: 180px;
  height: 170px;
  top: -60px;
  left: 50px;
}

@keyframes cloud1 {
  0% {
    transform: translateX(-400px);
  }
  100% {
    transform: translateX(800px);
  }
}

.cloudcontainer {
  overflow: hidden;
  position: relative;
  padding: 30px 0;
  width: 800px;
  top: 15px;
}

/* no longer needed .is-dragging::before, */
*[data-draggable="true"] .ktwp-de-effectsDiv::before {
  z-index: 999999;
  opacity: 0;
  transition: opacity 0.1s ease-in;

  transition-delay: 0s;
  content: "";
  position: absolute;
  top: -40%;
  left: -40%;
  right: -40%;
  bottom: -40%;
  /* background-color: rgba(255, 255, 255, 0.1); */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: clamp(
    60px,
    50%,
    160px
  ); /* was "contain", but wanted it not to overwhelm big panels */
  pointer-events: none;

  overflow: visible;
  background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path stroke="rgba(190,190,190,1)" stroke-width=".7"  fill="rgba(0,0,0,0.3)" d="M8.326 5.327 12.03 1l3.705 4.327h-1.853v4.349h-3.705V5.326zM15.736 18.734 12.03 23.06l-3.706-4.327h1.853v-4.348h3.705v4.348zM18.734 8.325l4.327 3.706-4.327 3.705v-1.853h-4.348v-3.705h4.348zM5.327 15.736 1 12.03l4.327-3.706v1.853h4.349v3.705H5.326z"/></svg>');
}

.is-dragging .ktwp-de-effectsDiv::before {
  opacity: 0.5;
  /* transition-delay: 0s; */
  /* transition-duration: 0s; */
}
*[data-draggable="true"]:hover:not(.is-dragging):not(.ktwp-de-disablehover)
  .ktwp-de-effectsDiv::before {
  /* not(.ktwp-de-disablehover) so don't flash the arrows while dragging */
  animation: animateArrows 2s linear;
  animation-delay: 1.5s;
}

/* takign advantage of inheritance rules here */
*[data-draggable="true"].ktwp-de-cdrag .ktwp-de-effectsDiv::before {
  background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="rgba(0,0,0,0.3)" stroke="rgba(190,190,190,1)" stroke-width=".7" ><path  d="m5.56 15.5-2.74 3.201-2.74-3.2h1.37v-3.217h2.74V15.5zM18.5 8.828l2.741-3.2 2.74 3.2h-1.37v3.216h-2.74V8.828zM.08 9.056l2.74-3.201 2.74 3.2H4.19v3.217H1.45V9.056zM23.981 15.273l-2.74 3.201-2.74-3.2h1.37v-3.217h2.74v3.216z"/><circle cx="2.77" cy="3.163" r="1.993"/><circle cx="2.77" cy="21.389" r="1.993"/><circle cx="21.189" cy="3.163" r="1.993"/><circle cx="21.189" cy="21.389" r="1.993"/><circle cx="50.136" cy="20.534" r="0"/><path d="m8.688 5.694-3.2-2.74 3.2-2.74v1.37h3.216v2.74H8.688zM15.133.214l3.2 2.74-3.2 2.74v-1.37h-3.216v-2.74h3.216zM15.133 18.634l3.2 2.74-3.2 2.741v-1.37h-3.216v-2.74h3.216zM8.688 24.115l-3.2-2.74 3.2-2.74v1.37h3.216v2.74H8.688z"/></g></svg>');
}
*[data-draggable="true"].ktwp-de-hdrag > .ktwp-de-effectsDiv::before {
  background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path stroke="rgba(190,190,190,1)" stroke-width=".7"  fill="rgba(0,0,0,0.3)" d="m18.734 8.325 4.327 3.706-4.327 3.705v-1.853h-4.348v-3.705h4.348zM5.327 15.736 1 12.03l4.327-3.706v1.853h4.349v3.705H5.326z"/></svg>');
}
*[data-draggable="true"].ktwp-de-vdrag > .ktwp-de-effectsDiv::before {
  background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path stroke="rgba(190,190,190,1)" stroke-width=".7"  fill="rgba(0,0,0,0.3)" d="M8.326 5.327 12.03 1l3.705 4.327h-1.853v4.349h-3.705V5.326zM15.736 18.734 12.03 23.06l-3.706-4.327h1.853v-4.348h3.705v4.348z"/></svg>');
}

/* DON'T NEED ANYMORE  .is-dragging::after, */
*[data-draggable="true"] x.ktwp-de-effectsDiv::after {
  opacity: 0;
  transition: opacity 0.1s ease-in;
  transition-delay: 0s;
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  /*   border: 2px dashed red; */
  border-radius: inherit;
  position: absolute;

  /*  transform: scale(0.9) translateZ(0); */
  filter: blur(5px);
  /*was 20, with opacity .75 */

  background: linear-gradient(
    to left,
    red,
    orange,
    yellow,
    green,
    blue,
    #8800ff,
    #ff0088
  );
  animation-delay: 3s;
  background-size: 200% 200%;
  animation: animateGlow 1.25s linear infinite;
  clip-path: polygon(
    -100% -100%,
    -100% 200%,
    -1% 200%,
    -1% -1%,
    101% -1%,
    101% 101%,
    -1% 101%,
    -1% 200%,
    200% 200%,
    200% -100%
  );
  /* mask-image: radial-gradient(transparent 15% , #0009 100%); */ /*alternative effect */
}

*[data-draggable="true"]:not(.is-dragging):not(.ktwp-de-disablehover):hover
  .ktwp-de-effectsDiv::after {
  opacity: 0.8;
  transition-delay: 2.5s;
  transition-duration: 0.5s;
}

.is-dragging .ktwp-de-effectsDiv::after {
  opacity: 0.8;
  transition-delay: 0s;
  transition-duration: 0s;
}

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

@keyframes animateArrows {
  0%,
  25%,
  50%,
  75%,
  100% {
    opacity: 0;
  }
  12%,
  37%,
  62%,
  83% {
    opacity: 0.98;
  }
}

.is-dragging > .ktwp-de-effectsDiv {
  cursor: grabbing !important;
  border-width: 2px; /*nah, causes content shifts on things without borders. We'll only do this if things already have a border. . */
  border: inherit dashed #777 !important;
  border-color: rgba(
    0,
    0,
    0,
    0
  ) !important; /* hide borders, ::after element will draw them. this way drawing a border won't move the contents, whether or not there's already a border */
}
.note {
	position: absolute;
	top: 15vh;
	left: 25px;
	width: 225px;
	background: #666;
	border: 1px solid black;
	padding: 12px;
	font-size: 9pt;
	color: white;
}