@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}.banner{width:100%;height:100vh;position:relative;overflow:hidden}.banner.decorative{height:175px}.banner .square-col-container{flex-direction:row;justify-content:center;width:106%;display:flex;position:absolute;top:50%;left:0;overflow:visible;transform:translateY(-50%)}.banner .square-col{width:60px;height:100%;margin:-300px 10px;padding:0 5px;transform:rotate(45deg)}@media (max-width:500px){.banner .square-col{margin:-100px 10px}}@media (max-height:800px){.banner .square-col{margin:-175px 10px}}.banner .square{background-color:#1e6cff;border-radius:14px;width:50px;height:50px;margin-bottom:6px;transition:background 2.5s ease-in-out}.banner .square.dark{background-color:#181818}.banner .square.light{background-color:#3da2ff}.banner .square.white{background-color:#0000!important}.banner.hack .square{background-color:#c960ff}.banner.hack .square.dark{background-color:#262938}.banner.hack .square.light{background-color:#c137d8}.banner.ai .square{background-color:#28b2ff}.banner.ai .square.dark{background-color:#233339}.banner.ai .square.light{background-color:#35ddf3}.banner.w .square{background-color:#1bc3a9}.banner.w .square.dark{background-color:#233431}.banner.w .square.light{background-color:#56e4b1}.banner.cyber .square{background-color:#ffcb44}.banner.cyber .square.dark{background-color:#3a3327}.banner.cyber .square.light{background-color:#ffe81a}.banner.studio .square{background-color:#fb4469}.banner.studio .square.dark{background-color:#39272b}.banner.studio .square.light{background-color:#ff8c93}.banner.icpc .square{background-color:#ff8383}.banner.icpc .square.dark{background-color:#3a2b2b}.banner.icpc .square.light{background-color:#f38f70}.banner.design .square{background-color:#fe8d3c}.banner.design .square.dark{background-color:#372b25}.banner.design .square.light{background-color:#ffac30}.banner.teachla .square{background-color:#5eda12}.banner.teachla .square.dark{background-color:#2c3022}.banner.teachla .square.light{background-color:#b0ee00}.banner.cloud .square{background-color:#9f97ff}.banner.cloud .square.dark{background-color:#262938}.banner.cloud .square.light{background-color:#746fb1}.banner .title{text-align:center;opacity:0;width:100%;animation:1.2s ease-out .8s forwards fadeIn;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.banner .title h1{color:#fff;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:2.3em;font-weight:700;transition:color 2.5s ease-in-out}.banner.hack .title h1{color:#c960ff}.banner.ai .title h1{color:#28b2ff}.banner.w .title h1{color:#1bc3a9}.banner.cyber .title h1{color:#ffcb44}.banner.studio .title h1{color:#fb4469}.banner.icpc .title h1{color:#ff8383}.banner.design .title h1{color:#fe8d3c}.banner.teachla .title h1{color:#5eda12}.banner .square.logo-bg{position:relative;overflow:hidden}.banner .square.logo-bg:before{content:"";background-image:var(--logo-url);opacity:0;background-position:50%;background-size:125%;border-radius:14px;animation:4s ease-in-out infinite fadeInOut;position:absolute;inset:0;transform:scale(.95)rotate(-45deg)}@keyframes fadeInOut{0%{opacity:0;transform:scale(.95)rotate(-45deg)}25%{opacity:1;transform:scale(1)rotate(-45deg)}85%{opacity:1;transform:scale(1)rotate(-45deg)}to{opacity:0;transform:scale(.95)rotate(-45deg)}}
.login~html,.login~body{height:100%;min-height:100%;margin:0;overflow:hidden}.login{width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0;overflow:hidden}.login-tile{background-color:#262938;flex:1;width:60%;height:100%}@media (max-width:500px){.login-tile{display:none}}.login-sidebar{color:#000;background:#fff;justify-content:center;align-items:center;width:40%;min-width:400px;max-width:750px;height:100vh;font-size:12px;display:flex;position:relative}@media (max-width:500px){.login-sidebar{width:100%}}.login-sidebar .login-container{background:#fff;flex-direction:column;align-items:start;width:75%;padding:50px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex}@media (max-height:800px){.login-sidebar .login-container{margin-top:3rem}}.login-sidebar .login-container span{margin:5px 0}.login-sidebar .login-container .sign-in{text-align:center;align-self:center;width:100%}.login-sidebar .login-logo{height:4rem;margin:auto;display:block}.login-sidebar .login-title{margin-bottom:1rem;font-size:2rem;font-weight:600}.login-sidebar .login-description{color:#595959;margin-bottom:1rem;font-size:1rem;line-height:1.75}.login-sidebar .back-btn{color:#1e6cff;align-items:center;margin-top:3rem;font-size:.8rem;font-weight:500;text-decoration:none;display:flex}.login-sidebar .back-btn svg{fill:#1e6cff;width:.75rem;height:.75rem;margin-left:.25rem}.login-sidebar .banner-container{width:100%;height:30%;position:absolute;top:0;left:0}@media (min-width:500px){.login-sidebar .banner-container{display:none}}