/* Page background and view transitions. Linked first from fragments/head-styles.html
   (in <head>) so the first frame is painted with the right background before
   root.css or any page sheet has loaded. */
html {
    background: #4038c2;
    background: linear-gradient(180deg, #4038c2 0%, #3a31b5 45%, #372ea8 100%);
    background-attachment: fixed;
}

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.22s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}


@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}