anchor.diff:  }
   --------------
   
  -If you want, you can take a look at the demo below. If you have Reduced Motion enabled, you will see a black overlay. Or else you see a gif.
  +If you want, you can take a look at the demo below. If you have *Reduced Motion* enabled, you will see a black overlay. Or else you see a gif.
   
   ++++
   <p class="codepen" data-height="1029" data-theme-id="3991" data-default-tab="result" data-user="prateekjadhwani" data-slug-hash="eajegp" style="height: 1029px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="prefers-reduced-motion">
  
positive.code: 
  
  If you are unable to view the gif above, the steps are as follows:
  1. Go to System Preferences > Accessibility > Display
  2. Click on Reduce Motion checkbox
  
  And you can disable by unchecking the same checkbox. 
  
  
negative.code: = Reduced Motion Media Query to Avoid Vestibular Disorders and Seizures
  
  :hp-tags: css3, accessibility, Reduced Motion, prefers-reduced-motion, media query,
  
  When I was doing my research in Accessibility, I came across the term Vestibular Disorder. I really didn’t know much about it at that time. It is basically a type of disability that a person viewing the screen might have. It is often grouped with seizures and symptoms may include dizziness, vertigo, nausea, etc. 
  
  In terms of browsing the web, this sort of motion sickness might be caused by weird animations, or parallax backgrounds[1], which a lot of might not like and thus causing a higher bounce rate[4].
  
  In order to provide a solution for this accessibility issue, the web specifications now include a new media query called `prefers-reduced-motion`. What it does is, it lets the browser run a specific css stated under `prefers-reduced-motion` media query[3] which can contain fixes for Reduced Motion. 
  
  
  == Enable Reduced Motion
  
  