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

:root {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10vmin;
  transition: --c 1s; 
  
  &:hover {
    --c: #0000;
  }
  
  &::before, &::after {
    --x1: 0; --y1: 0;
    --x2: 0; --y2: 100%;
    --x3: 100%; --y3: 100%;
    --x4: 100%; --y4: 0;
    --l: #0000 47.5%, var(--c) 0 52.5%, #0000 0;
    content: "";
    width: 80vmin;
    aspect-ratio: 3;
    background:
      /* all lines have the same size, only position changes! */
      linear-gradient(#000 0 0) 50% 50% / 60% 5%,
      linear-gradient(to bottom left,  var(--l)) var(--x1) var(--y1) / 20% 50%,
      linear-gradient(to bottom right, var(--l)) var(--x2) var(--y2) / 20% 50%,
      linear-gradient(to bottom left,  var(--l)) var(--x3) var(--y3) / 20% 50%,
      linear-gradient(to bottom right, var(--l)) var(--x4) var(--y4) / 20% 50%
      ;
    background-repeat: no-repeat;
  }
  
  &::after {
    --x1: 16vmin; --y1: 100%;
    --x2: 16vmin; --y2: 0%;
    --x3: calc(100% - 16vmin); --y3: 0%;
    --x4: calc(100% - 16vmin); --y4: 100%;
  }
}