/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 1000; transform: translateY(-200%); padding: .75rem 1rem; background: #fff; color: #012169; border: 2px solid #012169; border-radius: .4rem; font-weight: 700; }
.skip-link:focus { transform: none; }
html { scroll-padding-top: 7rem; scroll-padding-bottom: 5rem; }
#main-content { overflow-wrap: anywhere; }
.quiz-layout > * { min-width: 0; }
:where(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-top: 7rem; scroll-margin-bottom: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}