Let's start to reference some CSS utils

utils.css

/* Applying it to the html element will provide smooth scrolling to anchors
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior */
html {
  scroll-behavior: smooth;
}

/* Remove animations for folks who set their OS to reduce motion.
 1. Immediately jump any animation to the end point
 2. Remove transitions & fixed background attachment
 See: https://github.com/mozdevs/cssremedy/issues/11
*/
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
  }
}


/* Surprisingly not browsers default. */
summary {
  cursor: pointer;
}
[hidden] {
  display: none !important;
}
[disabled] {
  pointer-events:none;
  opacity: 0.3;
}


/* 
 * Utility class to hide content visually while keeping it screen reader-accessible.
 * Source: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html 
 */

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(100%); 
  height: 1px; 
  overflow: hidden; 
  position: absolute; 
  white-space: nowrap; 
  width: 1px; 
}

/* Proven method to visually hide something but
still make it available to assistive technology
https://a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE 6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

/* Another one which is described here:
https://hugogiraudel.com/2020/12/03/a11y-advent-hiding-content/
https://hugogiraudel.com/2020/12/06/a11y-advent-skip-to-content/ 
To use in conjunction with:
<a href="#main" class="sr-only sr-only--focusable">Skip to content</a>
*/
.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.sr-only.sr-only--focusable:focus,
.sr-only.sr-only--focusable:active {
 clip: auto !important;
 -webkit-clip-path: auto !important;
 clip-path: auto !important;
 height: auto !important;
 overflow: visible !important;
 width: auto !important;
 white-space: normal !important;
}