.app-header{display:flex;justify-content:space-between;align-items:center;padding-inline:1.5rem}.app-header a{text-decoration:none;margin:1.35rem 1rem}.app-header button{margin-left:.5rem}.app-nav-list{margin:0;padding:.5rem 1rem;background-color:#fff;color:var(--primary-color);border-bottom:1px solid currentColor;list-style:none;display:flex;align-items:center}.app-nav-list>li{margin:.5rem;height:min-content;flex:1;text-align:center}.app-nav-list>li:has(a.active){margin-block:0}.app-nav-list a{color:inherit;text-decoration:none}.app-nav-list a:hover{text-decoration:underline}.app-nav-select{display:flex;flex-direction:column;position:relative}.app-nav-select button{padding:.5rem;border:none;color:var(--primary-color);border-bottom:1px solid currentColor;background:white;cursor:pointer;margin:0 5px;font-size:1.2rem}.app-nav-select .options{position:absolute;top:100%;width:100%;z-index:10;display:flex;flex-direction:column;animation:slide-in .1s ease-in-out forwards}@keyframes slide-in{0%{transform:translateY(-1rem);opacity:0}to{transform:translateY(0);opacity:1}}.app-nav-select .active{position:relative}.app-nav-select .active .text{flex:1}.app-nav-select .selected .icon{position:absolute;top:0;height:2.3rem;right:.5rem;width:2.5rem;fill:currentColor;transition:transform .2s ease-in-out}.app-nav-select .selected .icon.flipped{transform:translateY(.1rem) scaleY(-1)}.app-nav-select .options button{border-bottom:1px solid gray}@media (max-width: 35rem){.app-nav-list{display:none}}@media (min-width: 35rem){.app-nav-select{display:none}}.layout{display:flex;flex-direction:column;flex:1}.app-main{flex:1;padding:3rem .5rem}@media (max-width: 25rem){.app-main{padding-inline:0}}.app-header,.app-footer{background-color:var(--primary-color);color:#fff}.app-footer{padding:.5rem 1rem;font-size:1rem;margin-bottom:0;text-align:center;display:flex;justify-content:space-between;align-items:center}.app-footer a{cursor:pointer;color:#fff;text-decoration:underline;display:inline-flex;align-items:center}.app-footer a:hover{opacity:.7}.app-footer .links-and-copyright a{padding:.2rem}.app-footer .links-and-copyright svg{height:auto;width:1.5rem}.app-footer .links-and-copyright .gh-link svg{width:1.2rem}.app-footer .external-link svg{fill:#fff;height:1rem;width:1rem;margin-left:.2ch}.links-and-copyright{display:flex}.links-and-copyright{display:flex;min-width:max-content;align-items:center;justify-content:center;margin-left:.5rem}@media (max-width: 52rem){.app-footer .links-and-copyright{flex-direction:column;gap:.1rem}.app-footer .links-and-copyright a.cloudflare-link{margin-right:0}}@media (max-width: 25rem){.app-footer{flex-direction:column;gap:1rem}}.link-icons{display:flex;justify-content:center;gap:1rem}.app-header .btn{color:#fff;background-color:var(--secondary-color);cursor:pointer;border:none;padding:.5rem 1rem}.app-header .user-section{display:flex;align-items:center}.app-header .user-info{display:flex;justify-content:center;align-items:center;border:1px solid #ffffff3d;border-radius:5px;padding:0 .5rem 0 .25rem;gap:.5rem;margin-right:1rem}.app-header .account-icon{display:inline-grid;place-items:center}.app-header .account-icon svg{display:inline;fill:#ffffff3d;height:1.8rem;width:1.8rem}.app-header .btn:hover{background-color:var(--secondary-color-lighter)}.app-nav .active,.app-nav .selected{font-weight:700;transition:font-weight .1s}h1,h2,h3,h4,h5,h6{font-weight:200}.app-title{color:#fff;font-size:2rem;margin:0}.app-page-heading{margin-bottom:1rem}@media (max-width: 35rem){.app-header{flex-direction:column;gap:.5rem}.app-header .user-section{margin-bottom:1.7rem}}.todo-lists-page{padding:1rem}.todo-lists-page piercing-fragment-outlet{display:block;margin-bottom:3rem}.todos{animation:todos-enter-animation .25s cubic-bezier(.55,.51,.47,.99) forwards}.todos-next{--animation-translate: 4rem}.todos-previous{--animation-translate: -4rem}@keyframes todos-enter-animation{0%{opacity:0;transform:translate(var(--animation-translate))}to{opacity:1;transform:translate(0)}}.unimplemented-demo-page{display:grid;justify-items:center;color:gray;flex:1;margin:1rem;text-align:center;grid-template-rows:min-content}.unimplemented-demo-page figure{margin:0;margin-top:5rem;opacity:.5}.unimplemented-demo-page figure>svg{height:8rem;animation:swing .5s cubic-bezier(0,.4,1,.6) .1s}@keyframes swing{20%{transform:rotate(10deg)}40%{transform:rotate(-5deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0)}}.unimplemented-demo-page .text-wrapper{margin-block:2rem 5rem}.unimplemented-demo-page p{max-width:70ch;align-self:center}.unimplemented-demo-page button{color:#fff;background-color:var(--secondary-color);cursor:pointer;border:none;padding:.25rem .5rem}.unimplemented-demo-page button:hover{background-color:var(--secondary-color-lighter)}.page-not-found-page{display:grid;justify-items:center;color:gray;flex:1;margin:1rem;text-align:center;grid-template-rows:min-content}.page-not-found-page figure{margin:0;margin-block:5rem 2rem;opacity:.5}.page-not-found-page figure>svg{height:8rem;transform-origin:1rem 7rem;animation:falling-animation 10s ease-in-out 1s infinite;fill:#bf0000}@keyframes falling-animation{0%{transform:rotate3d(0,0,0,0);animation-timing-function:cubic-bezier(.76,.13,.04,1.01)}2.5%,15%{transform:rotate3d(0,0,1,80deg);animation-timing-function:ease-in-out}5%,17.5%{transform:rotate3d(0,0,1,60deg);animation-timing-function:ease-in-out}45%{transform:rotate3d(0,0,0,0)}}.page-not-found-page .text-wrapper{margin-block:2rem 5rem}.page-not-found-page p{max-width:70ch;align-self:center}