:root{box-sizing:border-box}*{box-sizing:inherit;font-family:inherit}body{background-color:oklch(50% .1 315);margin:0;font-family:Sniglet,sans-serif;font-size:1.125rem}[data-view-transition=content-background]{view-transition-name:content-background}[data-view-transition=content1]{view-transition-name:content1}[data-view-transition=content2]{view-transition-name:content2}html:active-view-transition-type(slide-down)::view-transition-old(content-background){animation:1s cubic-bezier(.4,0,.2,1) both wipeOutDown}html:active-view-transition-type(slide-down)::view-transition-new(content-background){animation:1s cubic-bezier(.4,0,.2,1) both wipeInDown}html:active-view-transition-type(slide-down)::view-transition-old(content1){animation:1s cubic-bezier(.4,0,.2,1) both fadeOutDownHalf}html:active-view-transition-type(slide-down)::view-transition-new(content1){animation:1s cubic-bezier(.4,0,.2,1) both fadeInDownHalf}html:active-view-transition-type(slide-down)::view-transition-old(content2){animation:1s cubic-bezier(.4,0,.2,1) both fadeOutDown}html:active-view-transition-type(slide-down)::view-transition-new(content2){animation:1s cubic-bezier(.4,0,.2,1) both fadeInDown}@keyframes wipeOutDown{0%{clip-path:polygon(0 -25%,100% -25%,100% 100%,0 125%)}to{clip-path:polygon(0 -25%,100% -25%,100% -25%,0 0)}}@keyframes wipeInDown{0%{clip-path:polygon(0 125%,100% 100%,100% 125%,0 125%)}to{clip-path:polygon(0 0,100% -25%,100% 125%,0 125%)}}@keyframes fadeOutDownHalf{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-25vh)}}@keyframes fadeInDownHalf{0%{opacity:0;transform:translateY(25vh)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-50vh)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(50vh)}to{opacity:1;transform:translateY(0)}}html:active-view-transition-type(slide-up)::view-transition-old(content-background){animation:1s cubic-bezier(.4,0,.2,1) both wipeOutUp}html:active-view-transition-type(slide-up)::view-transition-new(content-background){animation:1s cubic-bezier(.4,0,.2,1) both wipeInUp}html:active-view-transition-type(slide-up)::view-transition-old(content1){animation:1s cubic-bezier(.4,0,.2,1) both fadeOutUpHalf}html:active-view-transition-type(slide-up)::view-transition-new(content1){animation:1s cubic-bezier(.4,0,.2,1) both fadeInUpHalf}html:active-view-transition-type(slide-up)::view-transition-old(content2){animation:1s cubic-bezier(.4,0,.2,1) both fadeOutUp}html:active-view-transition-type(slide-up)::view-transition-new(content2){animation:1s cubic-bezier(.4,0,.2,1) both fadeInUp}@keyframes wipeOutUp{0%{clip-path:polygon(0 0,100% -25%,100% 125%,0 125%)}to{clip-path:polygon(0 125%,100% 100%,100% 125%,0 125%)}}@keyframes wipeInUp{0%{clip-path:polygon(0 -25%,100% -25%,100% -25%,0 0)}to{clip-path:polygon(0 -25%,100% -25%,100% 100%,0 125%)}}@keyframes fadeOutUpHalf{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(25vh)}}@keyframes fadeInUpHalf{0%{opacity:0;transform:translateY(-25vh)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(50vh)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(-50vh)}to{opacity:1;transform:translateY(0)}}