@import "https://fonts.googleapis.com/css2?family=Comic+Relief:wght@400;700&family=Galindo&display=swap";
:root{--rainy-font:"Galindo",sans-serif}@font-face{font-family:RainyElephant;src:url(../media/Rainyelephant-Regular.44cdb12b.ttf)format("truetype");font-weight:400;font-style:normal}
:root{--howard-orange:#ff7c00;--howard-orange-dark:#d3601d;--howard-orange-darker:#a04b16;--howard-yellow:#ffc900}@media (max-width:768px){.mobile-hidden{display:none}.mobile-visible{display:block}}
html,body{background:linear-gradient(135deg,#fff5e6 0%,#ffe8cc 50%,#ffd9b3 100%);width:100%;min-width:100%;min-height:100vh;margin:0;overflow-x:hidden}:root{font-family:var(--rainy-font)}.page-container{width:100%;min-height:calc(100vh - 4rem);padding-top:1rem;animation:.5s ease-in-out fadeIn}@media (max-width:768px){.page-container{min-height:calc(100vh - 3.5rem)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.card{background:linear-gradient(135deg,#fffffff2 0%,#fff8f0f2 100%);border:2px solid #ffffff80;border-radius:1.25rem;padding:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 8px 32px #ff7c0026,0 4px 16px #0000001a,inset 0 1px 2px #fffc}.card:before{content:"";background:linear-gradient(90deg,var(--howard-orange)0%,var(--howard-yellow)50%,var(--howard-orange)100%);background-size:200% 100%;height:4px;animation:3s ease-in-out infinite shimmer;position:absolute;top:0;left:0;right:0}@keyframes shimmer{0%,to{background-position:0%}50%{background-position:100%}}.btn-primary{color:var(--howard-orange);font-family:var(--rainy-font);cursor:pointer;background:linear-gradient(135deg,#fff 0%,#f8f8f8 100%);border:2px solid #ff7c004d;border-radius:.875rem;justify-content:center;align-items:center;gap:.5rem;padding:.875rem 1.75rem;font-size:1.05rem;font-weight:600;text-decoration:none;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);display:inline-flex;position:relative;overflow:hidden;box-shadow:0 4px 12px #0000001a,inset 0 1px 2px #fffc}.btn-primary:before{content:"";background:linear-gradient(90deg,#0000,#fff6,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.btn-primary:hover:before{left:100%}.btn-primary:hover{background:linear-gradient(135deg,var(--howard-orange-dark)0%,var(--howard-orange)100%);color:#fff;border-color:#fffc;transform:translateY(-3px)scale(1.02);box-shadow:0 6px 20px #ff7c004d,inset 0 1px 2px #ffffff4d}.btn-primary:active{transform:translateY(-1px)scale(.98)}
.header{background:linear-gradient(180deg,var(--howard-orange)0%,var(--howard-orange-dark)100%);color:#fff;z-index:1000;border-top:2px solid #ffffffb3;border-bottom:3px solid #fff3;justify-content:space-between;align-items:center;gap:1rem;min-height:3rem;padding:.5rem 1rem;display:flex;position:relative;box-shadow:0 4px 20px #ff7c004d,0 2px 8px #00000026}.header:before{content:"";pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,#ffffff1a 0%,#0000 50%);position:absolute;inset:0}.logo{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;background:#ffffff1a;border:2px solid #ffffff4d;border-radius:.75rem;width:2.75rem;height:2.75rem;transition:all .3s;position:relative;box-shadow:0 4px 12px #0003,inset 0 2px 4px #fff3}.logo:hover{border-color:#ffffff80;transform:scale(1.05)rotate(2deg);box-shadow:0 6px 16px #0000004d,inset 0 2px 4px #ffffff4d}.header h1{text-shadow:2px 2px 4px #0000004d,0 0 10px #fff3;letter-spacing:.3px;z-index:1;text-align:center;pointer-events:none;margin:0;font-size:1.1rem;font-weight:700;line-height:1.2;position:absolute;left:50%;transform:translate(-50%)}.header-buttons{z-index:10;align-items:center;gap:.75rem;display:flex;position:relative}.header-button{color:var(--howard-orange);cursor:pointer;font-family:var(--rainy-font);white-space:nowrap;z-index:10;pointer-events:auto;background:linear-gradient(135deg,#fff 0%,#f8f8f8 100%);border:2px solid #ffffff80;border-radius:.75rem;justify-content:center;align-items:center;height:2.25rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden;box-shadow:0 2px 8px #00000026,inset 0 1px 2px #fffc}.header-button:before{content:"";pointer-events:none;z-index:1;background:linear-gradient(90deg,#0000,#fff6,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.header-button:hover:before{left:100%}.header-button:hover{background:linear-gradient(135deg,var(--howard-orange-dark)0%,var(--howard-orange)100%);color:#fff;border-color:#fffc;transform:translateY(-2px);box-shadow:0 4px 12px #00000040,inset 0 1px 2px #ffffff4d}.header-button:active{transform:translateY(0);box-shadow:0 2px 6px #0003}.header-button svg{vertical-align:middle;font-size:1.25rem;transition:transform .3s cubic-bezier(.68,-.55,.265,1.55)}.menu-toggle-active svg{transform:rotate(90deg)scale(1.1)}.menu-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#00000080;transition:opacity .3s,visibility .3s;position:fixed;inset:0}.backdrop-open{opacity:1;visibility:visible}.backdrop-closed{opacity:0;visibility:hidden;pointer-events:none}.menu{background:linear-gradient(180deg,var(--howard-orange)0%,var(--howard-orange-dark)100%);pointer-events:none;z-index:1001;border-left:4px solid #ffffff4d;width:22rem;height:100vh;transition:transform .4s cubic-bezier(.68,-.55,.265,1.55);position:fixed;top:0;right:0;overflow:hidden auto;transform:translate(100%)}.menu::-webkit-scrollbar{width:8px}.menu::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}.menu::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px;transition:background .3s}.menu::-webkit-scrollbar-thumb:hover{background:#ffffff80}.menu:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle at 20% 30%,#ffffff26 0%,#0000 50%),radial-gradient(circle at 80% 70%,#ffc9001a 0%,#0000 50%);position:absolute;inset:0}.menu:after{content:"";pointer-events:none;z-index:1;background:linear-gradient(#fff3 0%,#0000 100%);height:100px;position:absolute;top:0;left:0;right:0}.menu-open{pointer-events:auto;transform:translate(0)}.menu-closed{pointer-events:none;transform:translate(100%)}.menu-header{z-index:2;background:#ffffff0d;border-bottom:2px solid #fff3;align-items:center;gap:1rem;padding:2rem 1.5rem 1rem;display:flex;position:relative}.menu-close-button{color:#fff;cursor:pointer;background:#ffffff1a;border:2px solid #ffffff4d;border-radius:.75rem;flex-shrink:0;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;padding:.5rem;font-size:1.25rem;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);animation:.5s cubic-bezier(.68,-.55,.265,1.55) 50ms both slideInFromRight;display:flex;position:relative;overflow:hidden}.menu-close-button:before{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.menu-close-button:hover:before{left:100%}.menu-close-button:hover{background:#fff3;border-color:#ffffff80;transform:translate(-4px)scale(1.1);box-shadow:0 4px 12px #0003,inset 0 2px 4px #ffffff1a}.menu-close-button:active{transform:translate(-2px)scale(1.05)}.menu-close-button svg{filter:drop-shadow(0 2px 4px #0003);transition:transform .3s cubic-bezier(.68,-.55,.265,1.55)}.menu-close-button:hover svg{transform:translate(-2px)}.menu-title{font-family:var(--rainy-font);color:#fff;text-shadow:2px 2px 4px #0000004d;flex:1;margin:0;font-size:1.5rem;font-weight:700;animation:.5s cubic-bezier(.68,-.55,.265,1.55) .1s both slideInFromRight}.menu ul{z-index:2;flex-direction:column;margin:0;padding:1rem 0;list-style:none;display:flex;position:relative}.menu-item{opacity:0;animation:slideInBounce .5s cubic-bezier(.68,-.55,.265,1.55)var(--delay,0s)both;border-radius:1rem;margin:.25rem 1rem;padding-left:.5rem;overflow:visible;transform:translate(50px)scale(.9)}.menu-open .menu-item{animation:slideInBounce .5s cubic-bezier(.68,-.55,.265,1.55)var(--delay,0s)both}.menu-closed .menu-item{animation:slideOutBounce .3s ease-in var(--delay,0s)both}.menu-link{color:#fff;font-size:1.1rem;font-weight:600;font-family:var(--rainy-font);background:#ffffff0d;border:2px solid #0000;border-radius:1rem;align-items:center;gap:1rem;padding:1.25rem 1.5rem;text-decoration:none;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);display:flex;position:relative}.menu-link:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.menu-link:hover:before{left:100%}.menu-link:hover{background:#ffffff26;border-color:#fff6;transform:translate(-8px)scale(1.02);box-shadow:0 4px 12px #0003,inset 0 2px 4px #ffffff1a}.menu-link:active{transform:translate(-4px)scale(.98)}.menu-icon{filter:drop-shadow(0 2px 4px #0003);justify-content:center;align-items:center;font-size:1.5rem;transition:transform .3s cubic-bezier(.68,-.55,.265,1.55);display:inline-flex}.menu-icon svg{vertical-align:middle;display:inline-block}.menu-link:hover .menu-icon{transform:scale(1.2)rotate(5deg)}.menu-text{text-shadow:1px 1px 2px #0003;flex:1}.menu-item-special .menu-link{background:linear-gradient(135deg,#ffc90033 0%,#ff7c0033 100%);border-color:#ffc90066;margin-top:.5rem}.menu-item-special .menu-link:hover{background:linear-gradient(135deg,#ffc9004d 0%,#ff7c004d 100%);border-color:#ffc90099;box-shadow:0 4px 16px #ffc9004d,inset 0 2px 4px #fff3}.menu-item-special .menu-link.login-disabled{opacity:.5;filter:grayscale(.5);cursor:not-allowed!important;pointer-events:none!important}.menu-item-special .menu-link.login-disabled:hover{box-shadow:none!important;background:linear-gradient(135deg,#ffc90033 0%,#ff7c0033 100%)!important;border-color:#ffc90066!important;transform:none!important}.menu-item-special .menu-link.login-disabled:before{display:none!important}.menu-item-special .menu-link.login-disabled .menu-icon{transform:none!important}@keyframes slideInFromRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInBounce{0%{opacity:0;transform:translate(50px)scale(.9)rotateY(-10deg)}60%{transform:translate(-5px)scale(1.05)rotateY(2deg)}80%{transform:translate(2px)scale(.98)rotateY(-1deg)}to{opacity:1;transform:translate(0)scale(1)rotateY(0)}}@keyframes slideOutBounce{0%{opacity:1;transform:translate(0)scale(1)rotateY(0)}to{opacity:0;transform:translate(50px)scale(.9)rotateY(-10deg)}}.header .menu-link{color:inherit;text-decoration:none;display:inline-block}.header-link{color:inherit;background:0 0;border:none;margin:0;padding:0;text-decoration:none;display:inline-block}.header-link:hover,.header-link:focus,.header-link:active{box-shadow:none;background:0 0;border:none;transform:none}@media (max-width:768px){.header{border-top:none;gap:.75rem;min-height:2.75rem;padding:.5rem .75rem}.logo{width:2.5rem;height:2.5rem}.header h1{font-size:.9rem;line-height:1.1}.header-button{height:2rem;padding:.4rem .75rem;font-size:.8rem}.menu{width:85%;max-width:20rem;box-shadow:-4px 0 16px #0003}.menu-header{padding:1.5rem 1rem .75rem}.menu-close-button{width:2.25rem;height:2.25rem;font-size:1.1rem}.menu-title{font-size:1.25rem}.menu-item{margin:.25rem .75rem;padding-left:.5rem}.menu-link{padding:1rem 1.25rem;font-size:1rem}.menu-icon{font-size:1.25rem}}@media (min-width:768px){.header{border-radius:1rem;margin:.5rem;padding:.625rem 1.25rem}.header h1{font-size:1.25rem}.logo{width:3rem;height:3rem}.header-button{height:2.5rem;padding:.5rem 1.125rem;font-size:.9rem}}@media (min-width:1200px){.header{padding:.75rem 1.5rem}.header h1{font-size:1.5rem}}
