/*
optical illusion
the arch looks broken or like both sides won't meeat at the top. But if you mouse over, you'll reveal it is complete and they match.
*/
@property --color {
  syntax: '<color>';
  initial-value: #222;
  inherits: false;
}
body:hover::before {
  --color: #2220;
}
body::before {
  --color: #222;
  transition: --color 1s;
  content: "";
  width: 60vmin;
  height: 80vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background:
    linear-gradient(var(--color) 0 0) 30vmin 0 / 9vmin 100% no-repeat, 
    radial-gradient(300% 150% at calc(300% + 1vmin) 110%, #0000 calc(100% - 1vmin), #000 0 calc(100% - 1px), #0000 0) 0 0 / 50% 100% no-repeat,
    radial-gradient(300% 150% at calc(-200% - 1vmin) 110%, #0000 calc(100% - 1vmin), #000 0 calc(100% - 1px), #0000 0) 100% 0 / 50% 100% no-repeat
}