:root {
    --top-light: #404040;
    --middle-light: #DC2626;
    --bottom-light: #065F46;
    --top-dark: #F5F5F5;
    --middle-dark: #DC2626;
    --bottom-dark: #FDE68A;
}

html {
    --top: var(--top-light);
    --middle: var(--middle-light);
    --bottom: var(--bottom-light);
}

html.dark {
    --top: var(--top-dark);
    --middle: var(--middle-dark);
    --bottom: var(--bottom-dark);
}

.loader {
    position: relative;
    width:  48px;
    height: 48px;
    background: var(--middle);
    transform: rotateX(65deg) rotate(45deg);
    color: var(--bottom);
    animation: layers1 1s linear infinite alternate;
  }
  .loader:after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--top);
    animation: layerTr 1s linear infinite alternate;
  }

  @keyframes layers1 {
    0% { box-shadow: 0px 0px 0 0px  }
   90% , 100% { box-shadow: 20px 20px 0 -4px  }
  }
  @keyframes layerTr {
    0% { transform:  translate(0, 0) scale(1) }
    100% {  transform: translate(-25px, -25px) scale(1) }
  }