<main>
  <h1>Prefers Reduced Motion</h1>

  <div id="spinner" role="status">
    <span class="sr-only">Loading</span>
  </div>
  <span id="loading-text" role="status">Loading...</span>
  <p>In your system's accessibility settings, toggle the 'Prefers reduced motion' setting to trigger the CSS @media query.</p>
</main>

#loading-text {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  #loading-text {
    display: inline;
  }

  #spinner {
    display: none;
  }
}

#spinner {
  block-size: 40px;
  border: 4px solid rgba(150, 150, 150, 0.5);
  border-block-start: 4px solid #fff;
  border-radius: 50%;
  inline-size: 40px;

  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1.2s;
  -webkit-animation-name: rotate;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;

  -moz-transition-property: -moz-transform;
  -moz-animation-name: rotate;
  -moz-animation-duration: 1.2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;

  transition-property: transform;
  animation-name: rotate;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* Page Styles */
* {
  box-sizing: border-box;
}

body {
  background: rgb(3, 2, 7);
  background: linear-gradient(
    135deg,
    rgba(3, 2, 7, 1) 0%,
    rgba(18, 18, 18, 1) 36%,
    rgba(27, 36, 33, 1) 100%
  );
  block-size: 100vh;
  color: #fff;
  font-family: "Barlow", sans-serif;
  line-height: 1.5;
  text-align: center;
}

main {
  align-content: center;
  block-size: 100vh;
  display: grid;
  padding: 1rem;
  place-items: center;
}

.sr-only {
  border: 0px;
  clip: rect(0px, 0px, 0px, 0px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0px;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}