.loginSection{justify-content:center;align-items:center;width:100dvw;padding:12rem 0 30rem;display:flex;position:relative}.loginSection .loginAnim{flex:1;justify-content:center;align-items:center;display:flex}.loginSection .loginAnim .welcomeAnim{width:80%;height:80%}.loginSection .loginContainer{perspective:1000px;width:50%;min-width:600px;transform-style:preserve-3d;transition:all var(--animDurSlow)var(--cubicBezierPrimary);flex-direction:column;justify-content:center;align-items:center;margin-right:50px;display:flex}.loginSection .loginContainer.profile{transform:rotateY(180deg)}.loginSection .loginContainer.profile .loginCard.front{pointer-events:none}.loginSection .loginContainer.profile .loginCard.back{pointer-events:all}.loginSection .loginContainer .loginCard{background-color:var(--colorBackgroundPrimary);backface-visibility:hidden;width:500px;transition:all var(--animDurSlow)var(--cubicBezierPrimary);border-radius:18px;flex-direction:column;justify-content:center;align-items:center;padding:28px;display:flex;position:absolute;overflow:hidden;box-shadow:0 20px 40px #0003,0 20px 40px #ffffff26}.loginSection .loginContainer .loginCard .logout{position:absolute;right:0}.loginSection .loginContainer .loginCard .inputContainer{--inputHeight:50px;flex-direction:column;gap:12px;width:100%;margin:30px 0;display:flex;position:relative}.loginSection .loginContainer .loginCard .inputContainer .email,.loginSection .loginContainer .loginCard .inputContainer .username,.loginSection .loginContainer .loginCard .inputContainer .password{--iconSize:var(--inputHeight);width:100%;position:relative}.loginSection .loginContainer .loginCard .inputContainer .email .label,.loginSection .loginContainer .loginCard .inputContainer .username .label,.loginSection .loginContainer .loginCard .inputContainer .password .label{margin-left:12px!important}.loginSection .loginContainer .loginCard .loginAction{justify-content:space-between;align-items:center;gap:8px;width:100%;padding-top:8px;display:flex}.loginSection .loginContainer .loginCard .loginAction .next{margin-left:auto}.loginSection .loginContainer .loginCard .loggedInAction{gap:16px;margin-top:32px;display:flex}.loginSection .loginContainer .loginCard.front .header{flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.loginSection .loginContainer .loginCard.front .header>h3,.loginSection .loginContainer .loginCard.front .header>h4{font-variation-settings:"wdth" 75,"wght" 300;text-align:left;-webkit-user-select:none;user-select:none;width:100%;margin:0;font-size:42px}.loginSection .loginContainer .loginCard.front .header>h4{margin-top:5px;font-size:16px}.loginSection .loginContainer .loginCard.back{pointer-events:none;transform:rotateY(180deg)}.loginSection .loginContainer .loginCard.back .header{align-items:center;gap:16px;width:100%;display:flex;position:relative}.loginSection .loginContainer .loginCard.back .header .details{flex-direction:column;justify-content:center;gap:2px;display:flex}.loginSection .loginContainer .loginCard.back .header .details .name{font-variation-settings:"wdth" 75,"wght" 600;margin:0;font-size:20px}.loginSection .loginContainer .loginCard.back .header .details .address{font-variation-settings:"wdth" 75,"wght" 400;margin:0;font-size:14px}.loginSection .loginContainer .loginCard.back .body{flex:1;width:100%}@media (max-width:1100px){.loginSection .loginContainer{min-width:500px}.loginSection .loginContainer .loginCard{transform:scale(.9)}}@media (max-width:830px){.loginSection{flex-direction:column}.loginSection .loginAnim{flex:1;justify-content:center;align-items:flex-start}.loginSection .loginContainer{margin:0 0 220px}}@media (max-width:600px){.loginSection .loginAnim{width:90%}.loginSection .loginAnim .welcomeAnim{width:100%;height:65%;margin:auto}.loginSection .loginContainer{min-width:100%;margin:0 0 135px}.loginSection .loginContainer .loginCard{border-radius:40px 40px 0 0;width:100%;transform:scale(1);box-shadow:0 -5px 5px #0000001a}}@media (max-width:430px){.loginSection .loginAnim .welcomeAnim{height:45%}}
.githubBanner{z-index:10;background:linear-gradient(135deg,hsl(var(--colorBrandPrimary)/.15),hsl(var(--colorBrandPrimary)/.08));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid hsl(var(--colorBrandPrimary)/.3);color:var(--colorContentPrimary);font-variation-settings:"wdth" 75,"wght" 500;letter-spacing:.5px;box-shadow:0 4px 12px hsl(var(--colorBrandPrimary)/.15),0 2px 4px #0000001a;border-radius:12px;align-items:center;gap:8px;padding:10px 18px;font-size:13px;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;bottom:30px;right:30px;overflow:hidden}.githubBanner:before{content:"";background:linear-gradient(135deg,transparent,hsl(var(--colorBrandPrimary)/.1),transparent);opacity:0;transition:opacity .3s;position:absolute;inset:0}.githubBanner .bannerContent{z-index:1;align-items:center;gap:8px;display:flex;position:relative}.githubBanner .githubIcon,.githubBanner .arrowIcon{width:16px;height:16px;transition:transform .3s cubic-bezier(.4,0,.2,1)}.githubBanner .arrowIcon{opacity:.7}.githubBanner .bannerText{white-space:nowrap}.githubBanner .shimmer{background:linear-gradient(90deg,transparent,hsl(var(--colorBrandPrimary)/.3),transparent);width:50%;height:200%;animation:3s infinite shimmer;position:absolute;top:-50%;left:-100%;transform:skew(-20deg)}@media (hover:hover){.githubBanner:hover{border-color:hsl(var(--colorBrandPrimary)/.5);box-shadow:0 8px 24px hsl(var(--colorBrandPrimary)/.25),0 4px 8px #00000026;transform:translateY(-2px)}.githubBanner:hover:before{opacity:1}.githubBanner:hover .arrowIcon{opacity:1;transform:translate(4px)}.githubBanner:active{transform:translateY(0)}}@keyframes shimmer{0%{left:-100%}50%,to{left:150%}}@media (max-width:800px){.githubBanner{padding:8px 14px;font-size:11px;bottom:20px;right:20px}.githubBanner .githubIcon,.githubBanner .arrowIcon{width:14px;height:14px}}@media (max-width:630px){.githubBanner{gap:6px;padding:6px 12px;font-size:10px;bottom:20px;right:20px}.githubBanner .githubIcon,.githubBanner .arrowIcon{width:12px;height:12px}.githubBanner .bannerText{display:none}}