@property --color {
  syntax: '<color>';
  inherits: true;
  initial-value: #000;
}

:root {
  --color: #000;
  background: radial-gradient(circle, blue 1vmin, #0000 0);
  height: 100vh;
  overflow: hidden;
  transition: --color 1s;
  
  
  &::before {
    background:
      repeating-linear-gradient(
        10deg,
        #fff 0 0.7vmin,
        var(--color) 0 1vmin
      );
    border: 0.5vmin solid;
    content: "";
    height: 8vmin;
    left: 50%;
    position: absolute;
    top: calc(50% - 1vmin);
    translate: -50% -100%;
    width: 80vmin;
  }
  
  &::after {
    background: 
      repeating-linear-gradient(
        -10deg,
        #fff 0 0.7vmin,
        var(--color) 0 1vmin
      );
    border: 0.5vmin solid;
    content: "";
    height: 10vmin;
    left: 50%;
    position: absolute;
    top: calc(50% + 1vmin);
    translate: -50% 0%;
    width: 35vmin;
  }
  
  &:hover {
    --color: #fff;
  }
}