html{font-family:var(--font-sans);font-size:6.25%}html *{box-sizing:border-box;margin:0;padding:0}body{position:relative;font-size:var(--rem-font-size);background-color:var(--color-body-bg);color:var(--color-body-fg);overflow:scroll}pre,code{font-family:var(--font-mono)}@media (max-width: 500px){html{font-size:5%}}:root{--font-sans: StrangerSans, sans-serif;--font-mono: StrangerMono, monospace}:root{--color-accent: #008674;--color-muted: #002c26;--color-dark: #11111155;--color-item-bg: #2a2a2a;--color-body-bg: #202020;--color-body-fg: #ddd;--color-card-bg: #303030;--color-body-fg-muted: #888;--color-red-fg: #cc1111;--color-red-bg: #cc111111;--color-green-fg: #05b033;--color-green-bg: #11cc1111;--color-yellow-fg: #ddaa22;--color-yellow-bg: #110f01;--color-input-hover: #444;--color-input-focus: #333;--color-logo-red: #dc2020;--color-logo-white: #eeeeee;--color-logo-black: #111111}:root{--rem-font-size: 14rem;--rem-width-800: 800rem;--rem-width-500: 500rem;--rem-width-300: 300rem;--loader-size: 50px}:root{--border-accent: 2px solid var(--color-accent);--border-muted: 2px solid var(--color-muted);--border-transparent: 2px solid transparent}:root{--text-shadow: 2px 2px 2px var(--color-dark);--box-shadow: 10px 10px 10px var(--color-dark);--box-shadow-small: 5px 5px 5px var(--color-dark);--box-shadow-dark: 5px 5px 10px var(--color-dark);--box-shadow-dark-all: 5px 5px 10px var(--color-dark), -5px 5px 10px var(--color-dark), 5px -5px 10px var(--color-dark), -5px -5px 10px var(--color-dark);--animation-duration: .1s}:root{--blur-radius: 0px;--color: white;--thickness: 1px}button,input,select,textarea{border-radius:5rem;padding:5rem 10rem;border:var(--border-muted);transition-duration:var(--animation-duration);background-color:var(--color-item-bg);color:var(--color-body-fg);font-family:inherit;font-size:14rem;border:2px solid rgba(0,0,0,.3333333333)}button:disabled,input:disabled,select:disabled,textarea:disabled{background-color:var(--color-red-bg);cursor:not-allowed;border:2px solid transparent;border-bottom:2px solid var(--color-muted)}button:disabled:hover,button:disabled:focus,input:disabled:hover,input:disabled:focus,select:disabled:hover,select:disabled:focus,textarea:disabled:hover,textarea:disabled:focus{box-shadow:none;background-color:var(--color-red-bg);border:2px solid transparent;border-bottom:2px solid var(--color-muted)}button:hover,button:focus,input:hover,input:focus,select:hover,select:focus,textarea:hover,textarea:focus,a:hover,a:focus{outline:none}button:focus,input:focus,select:focus,textarea:focus,a:focus{border:2px dashed var(--color-accent)}a{border:2px solid transparent}input:hover,select:hover,textarea:hover{background-color:var(--color-input-hover)}input:focus,select:focus,textarea:focus{background-color:var(--color-input-focus)}input:focus:hover,select:focus:hover,textarea:focus:hover{background-color:var(--color-input-hover)}button{--color-hover: var(--color-muted);min-width:100rem;cursor:pointer;border:2px solid transparent;transition-duration:.1s}button:hover{text-shadow:var(--box-shadow-dark);color:var(--color-accent)}button.button{color:var(--color-body-fg);border-bottom:2px solid var(--color-hover);text-shadow:1px 1px 1px black;background-color:#555}button.button:hover{color:var(--color-body-fg);background-color:var(--color-hover);border:2px solid var(--color-hover);box-shadow:var(--box-shadow-dark)}button[type=submit]{align-self:flex-end}button.accent{--color-hover: var(--color-accent)}button.success{--color-hover: var(--color-green-fg)}button.error{--color-hover: var(--color-red-fg)}button.warning{--color-hover: var(--color-yellow-fg)}button.icon{padding:5rem;min-width:30rem}::-webkit-scrollbar{--width: 0px;width:var(--width);height:var(--width)}::-webkit-scrollbar-track{background:var(--color-muted);overflow:hidden}::-webkit-scrollbar-thumb{background:var(--color-accent)}::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--color-accent) 80%,white 20%)}.card{--border-thickness: 2px;--color-bg: var(--color-body-bg);width:100%;position:relative;max-width:var(--rem-width-800);min-width:300rem;margin:2em auto;border-radius:10rem;transition-duration:var(--animation-duration);box-shadow:var(--box-shadow-dark);padding:10rem;padding-top:1.5em;background-color:var(--color-bg);backdrop-filter:blur(1px)}.card.title{border:var(--border-thickness) solid var(--color-muted)}.card.title:after{content:attr(data-title);position:absolute;box-sizing:border-box;top:-1em;left:1em;border:var(--border-thickness) solid var(--color-muted);border-radius:5rem;background-color:var(--color-bg);padding:5rem 10rem}.card.card-small{max-width:var(--rem-width-500)}.card.card-container{box-shadow:none}.card.card-light{--color-bg: var(--color-card-bg)}.actions{display:flex;height:100%;width:100%;justify-content:flex-end;align-items:center;gap:10rem}.width-800{max-width:var(--rem-width-800);min-width:var(--rem-width-500);margin:0 auto}.bold{font-weight:700}.ts-xxl{font-size:50rem}.ts-xl{font-size:35rem}.ts-l{font-size:20rem}.ts-s{font-size:12rem}.ts-xs{font-size:10rem}.ts-xxs{font-size:8rem}.mono{font-family:var(--font-mono)}.tc-accent{color:var(--color-accent)}.tac{text-align:center}.wrap{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}.loader{--border-thickness: 7px;position:relative;width:var(--loader-size);height:var(--loader-size);border:var(--border-thickness) solid var(--color-muted);border-top:var(--border-thickness) solid var(--color-accent);border-radius:var(--loader-size);animation:spin 1.5s linear infinite}@keyframes spin{0%{rotate:0deg}to{rotate:360deg}}.hr{background-color:#5557;display:inline-block;position:relative;height:1px;width:100%;margin:10px 0}.form{display:flex;flex-direction:column;align-items:center;flex-wrap:wrap;width:100%;text-align:left}.form.inline{flex-direction:row}.form-item{position:relative;display:flex;flex-direction:column;justify-content:flex-start;padding-bottom:1em;width:100%;margin-top:10rem}.form-item .info{display:inline;font-size:10rem;padding-left:5rem;color:var(--color-body-fg-muted)}.form-item .label{width:100%}.form-item .input{position:relative;margin-top:5rem;width:100%}.form-item .error{display:block;color:var(--color-red-fg);font-size:10rem;padding-left:5rem;position:absolute;bottom:1.5em;transition-duration:var(--animation-duration);opacity:0}.form-item.touched.valid .input{background-color:var(--color-green-bg)}.form-item.touched.invalid .input,.form-item.touched.invalid .input:invalid{background-color:var(--color-red-bg)}.form-item.touched.invalid .error{bottom:-1em;opacity:1}.notifications{position:fixed;width:300rem;height:100%;margin:0;z-index:1000;top:0;right:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:stretch;gap:10rem}.notifications .notification{position:relative;width:calc(100% - 1rem);border-radius:5rem;border:1px solid var(--color-muted);border-left:5px solid var(--color-muted);backdrop-filter:blur(5rem);margin:5rem 0;padding:5rem}.notifications .notification .title{font-weight:700;font-size:16rem;padding-bottom:5rem}.notifications .notification .body{font-size:12rem}.notifications .notification .close{position:absolute;top:5rem;right:5rem;font-weight:700;color:#fff;padding:2rem 3rem;border-radius:2rem;background-color:var(--color-muted);cursor:pointer;transition-duration:var(--animation-duration)}.notifications .notification .close:hover{background-color:var(--color-accent)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#2228;z-index:1000;backdrop-filter:blur(10px)}.modal .box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:240rem;max-width:60vw;border-radius:10rem;display:flex;flex-direction:column;align-items:flex-end;padding:0;text-align:center;box-shadow:var(--box-shadow-dark-all);background-color:#3335;backdrop-filter:blur(1px);overflow:hidden}.modal .box *{padding:5rem 10rem}.modal .box .title{font-weight:700;font-size:30rem;width:100%;background-color:var(--color-accent);text-shadow:var(--text-shadow)}.modal .box .title.error{background-color:var(--color-red-fg)}.modal .box .title.warning{background-color:var(--color-yellow-fg)}.modal .box .title.success{background-color:var(--color-green-fg)}.modal .box .title.alert,.modal .box .title.confirm{background-color:var(--color-accent)}.modal .box .body{width:100%;min-height:50rem;overflow-wrap:break-word}.modal .box.invisible{min-width:auto;max-width:auto;box-shadow:none;background-color:transparent;align-items:center;gap:20rem}.users{display:flex;flex-direction:column;width:100%;margin:20rem 0;gap:10rem}.users .user{padding:5rem 10rem;background-color:var(--color-muted);border-radius:5rem;display:flex;justify-content:space-between}.users .user .name{font-weight:700}.users .user .age{font-family:var(--font-mono)}.movies{display:flex;flex-direction:column;align-items:center}.movie{display:flex;flex-direction:column;background-color:#3335;backdrop-filter:blur(1px)}.movie .name{color:var(--color-accent);overflow-wrap:break-word}.movie .description{padding:5rem;overflow-wrap:break-word}.movie .release-date{font-weight:700;padding:5rem;align-self:flex-end}.movie .release-date:before{content:"Release Date: ";font-size:10rem}.button-box{display:flex;justify-content:center;align-items:center}.header-container{width:100%;background-color:var(--color-item-bg);box-shadow:0 5px 5px #1115;position:sticky;top:0;left:0;z-index:100}.header{--header-height: 40rem;height:var(--header-height);display:flex;padding:0 10rem;align-items:center;overflow:hidden}.header>*{display:flex;align-items:center;gap:5rem;height:100%;overflow:hidden}.header .logo{text-decoration:none;color:inherit;transition-duration:.2s;align-self:flex-start;margin-right:auto;padding-right:10rem;border-radius:var(--header-height)}.header .logo:hover{background-color:#2349}.header .logo,.header .logo .icon,.header .logo .icon .img{height:100%}.header .logo .img{display:block;content:url(/logo.png)}.header .logo .name{font-size:20rem;font-weight:700}.header .logo .name .fish{color:var(--color-logo-red)}.header .logo.black .img{content:url(/logo-black.png)}.header .logo.black .astro{color:var(--color-logo-black)}.header .logo.white .img{content:url(/logo-white.png)}.header .logo.white .astro{color:var(--color-logo-white)}.header .center{align-self:center;text-align:center;margin:auto;font-weight:700;font-size:20rem}.header .right{align-self:flex-end;text-align:right;margin-left:auto}.footer-container .footer{margin-top:50rem;width:100%;height:max-content;position:sticky;bottom:0;border-radius:5rem;display:flex;box-shadow:var(--box-shadow-small);padding:20rem 5rem;font-size:10rem;border-left:2px solid var(--color-logo-white);border-right:2px solid var(--color-logo-red)}.footer-container .footer .me{text-align:center;padding:5rem;width:200rem;border-right:2px solid var(--color-muted)}.footer-container .footer .others{padding:5rem;width:100%}.content{border-radius:5rem;display:flex;box-shadow:var(--box-shadow-small);border-left:2px solid var(--color-logo-white);border-right:2px solid var(--color-logo-red)}.content .sidebar{width:200rem;height:100%;display:flex;flex-direction:column;gap:5rem;padding:5rem}.content .sidebar>*{padding:5rem 20rem;background-color:var(--color-muted);border-radius:5rem;transition-duration:200rem;text-align:center}.content .sidebar>*:hover{background-color:var(--color-accent)}.content .main{width:100%;height:100%;padding:5rem}.astrofish{color:inherit;text-decoration:none;font-weight:700;padding:2rem 10rem;border-radius:100px}.astrofish:focus,.astrofish:hover{text-shadow:var(--text-shadow);border-color:transparent}.astrofish .fish{color:var(--color-logo-red)}