html{background:#f7f5f1}
body{animation:page-fade-in .42s cubic-bezier(.2,.8,.25,1) both}
body>header,
body>main,
body>footer,
body>.apply-view{animation:page-content-in .42s cubic-bezier(.2,.8,.25,1) both}
body.page-is-leaving{animation:page-fade-out .32s cubic-bezier(.2,.8,.25,1) both;pointer-events:none}
body.page-is-leaving>header,
body.page-is-leaving>main,
body.page-is-leaving>footer,
body.page-is-leaving>.apply-view{animation:page-content-out .32s cubic-bezier(.2,.8,.25,1) both}

@keyframes page-fade-in{
  from{opacity:0}
  to{opacity:1}
}

@keyframes page-fade-out{
  from{opacity:1}
  to{opacity:0}
}

@keyframes page-content-in{
  from{transform:translateY(22px)}
  to{transform:translateY(0)}
}

@keyframes page-content-out{
  from{transform:translateY(0)}
  to{transform:translateY(22px)}
}

@media(prefers-reduced-motion:reduce){
  body,
  body>header,
  body>main,
  body>footer,
  body>.apply-view,
  body.page-is-leaving,
  body.page-is-leaving>header,
  body.page-is-leaving>main,
  body.page-is-leaving>footer,
  body.page-is-leaving>.apply-view{animation:none!important}
}