.wdt__shape { margin: 0 auto; aspect-ratio: 1; position: relative;
  --width: 100%; --scale: 1; --opacity: 0.66; --top: 0; --left:0;
  --path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  --background: linear-gradient(#F70F0F, var(--wdtPrimaryColor), #6FF8FF, #0C7A15);
  --offset: 0deg; --speed: 8000ms;
  clip-path: var(--path); background: var(--background); scale: var(--scale); opacity: var(--opacity); 
  width: var(--width); top: var(--top); left: var(--left); rotate: var(--offset);
  mix-blend-mode: difference;
  animation: wdtTurn var(--speed) linear forwards infinite;
}

@keyframes wdtTurn {
  to { rotate: calc( var(--offset) + 1turn); }
}

.wdt__blur_container { --blur: 100px; filter: blur(var(--blur)); position: absolute;
  left: 0; top: 0; width: 100%; height: 100%; display: grid; overflow: hidden; opacity: 0.7; }

.wdt__blur_container > * { grid-area: 1/-1; }


canvas#wdt__canv { position: absolute; top: -50px; left: -50px; right: -50px; bottom: -50px;
  width: calc(100% + 100px); height: calc(100% + 100px);  pointer-events: none; opacity:.6; }

.wdt__shape:nth-child(2) { display: none;}
  
/*==== Slider ====*/

#slider { clear: both; display: block; float: left; margin: 0; padding: 0; width: 100%; }
#slider img { max-width: 100%; }

#header-wrapper:has(> #header + #slider) { margin: 0px; }
#header-wrapper.header-top-absolute #header:has(+ #slider) { position: absolute; left: 0; width: 100%; z-index: 9; }
#slider { position: relative; z-index: 1; background-color: var(--wdtSecondaryColor); overflow: hidden; }