/*
optical illusion
both sides of the ring are hte same shade of gray, but on looks darker than the other. Mouse over to remove the red straw and reveal the effect.
*/
body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, #0000 10vmin, #ccc 0 14vmin, #0000 0),
    linear-gradient(90deg, #fff 50%, #000 0);
  
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 3vmin;
    height: 36vmin;
    background: linear-gradient(90deg, #0000 50%, #0003 0), red;
    opacity:1;
    transition: opacity 1s;
  }
  
  &:hover::before {
    opacity: 0;
  }
}