.containerLogin{flex-direction:column;align-items:center;width:min(90%,1200px);margin-inline:auto;padding-top:5vh;display:flex}.serverMsg{min-height:clamp(5rem,10vw,10rem);color:var(--colorPalet-textOnBrandLight)}.formularContainer{gap:var(--space-xs);grid-template-areas:"loginContainer loginContainer registerContainer registerContainer""regButton regButton logButton logButton";grid-auto-columns:1fr;display:grid}.cover{color:var(--colorPalet-textOnBrandDark);background-color:var(--colorPalet-brandDark);z-index:1;border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);grid-area:1/3/3/5;justify-content:center;align-items:center;display:grid}.cover p{color:inherit;writing-mode:vertical-rl;text-orientation:upright;transform-style:preserve-3d}.loginContainer{background-color:var(--colorPalet-brandLight);border-top-left-radius:var(--radius-lg);padding:var(--space-lg);gap:var(--space-sm);grid-area:loginContainer;grid-template-columns:1fr;display:grid}.loginContainer h1{color:var(--colorPalet-textOnBrandLight)}.loginItems{justify-content:center;display:grid}.loginItems button,.registerItems button{padding:var(--space-xs);color:var(--colorPalet-textOnBrandAccent);background-color:var(--colorPalet-brandAccent);border:var(--border-xs) solid var(--colorPalet-brandAccentBorder);border-radius:var(--radius-sm);box-shadow:0 0 3px var(--colorPalet-boxshadowIn), 0 0 8px var(--colorPalet-boxshadowOut)}.loginItems button:hover,.loginItems button:focus,.registerItems button:hover,.registerItems button:focus{background-color:var(--colorPalet-brandAccentHover);border-color:var(--colorPalet-brandAccentBorderHover);outline-color:#0000}.loginContainer input,.registerContainer input{width:100%;padding:var(--space-xs);background:var(--colorPalet-background);border:var(--border-xs) solid var(--colorPalet-brandAccentBorder);border-radius:var(--radius-sm);transition:box-shadow .3s}.loginContainer input:focus{box-shadow:var(--space-xs) 0 0 0 var(--colorPalet-brandAccentActive);border-color:var(--colorPalet-brandAccentActive);outline:#0000}.registerContainer input:focus{box-shadow:calc(var(--space-xs) * -1) 0 0 0 var(--colorPalet-brandAccentActive);border-color:var(--colorPalet-brandAccentActive);outline:#0000}.regButton{background-color:var(--colorPalet-brandLight);border-bottom-left-radius:var(--radius-lg);grid-area:regButton;justify-content:center;transition:box-shadow .3s;display:flex;position:relative}.regButton button,.logButton button{background:0 0;border:none;height:7vh;padding:0}.logButton button{color:var(--colorPalet-textOnBrandDark)}.regButton button{color:var(--colorPalet-textOnBrandLight)}.regButton:hover{box-shadow:calc(var(--space-xs) * -1) 0 0 0 var(--colorPalet-brandAccentHover)}.registerContainer{background-color:var(--colorPalet-brandDark);border-top-right-radius:var(--radius-lg);padding:var(--space-lg);gap:var(--space-sm);z-index:0;grid-area:1/3/2/5;grid-template-columns:1fr;display:grid}.registerContainer h1{color:var(--colorPalet-textOnBrandDark)}.registerItems{justify-content:center;display:grid}.logButton{background-color:var(--colorPalet-brandDark);border-bottom-right-radius:var(--radius-lg);grid-area:logButton;justify-content:center;transition:box-shadow .3s;display:flex;position:relative}.logButton:hover{box-shadow:var(--space-xs) 0 0 0 var(--colorPalet-brandAccentHover)}.cover,.loginContainer,.registerContainer{box-shadow:var(--shadow-elevated)}.logButton:before,.regButton:before{content:"";border-radius:inherit;z-index:-2;box-shadow:var(--shadow-elevated);position:absolute;inset:0}@keyframes coverRegister{0%{color:var(--colorPalet-textOnBrandDark);background-color:var(--colorPalet-brandDark);border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);box-shadow:var(--shadow-elevated);transform:translate(0)}50%{color:color-mix(in srgb, var(--colorPalet-brandDark), var(--colorPalet-brandLight));box-shadow:0 -2px 3px var(--colorPalet-boxshadowIn), 0 -6px 8px var(--colorPalet-boxshadowOut);border-top-right-radius:0;border-bottom-right-radius:0}to{color:var(--colorPalet-textOnBrandLight);background-color:var(--colorPalet-brandLight);transform:translateX(calc(-100% - var(--space-xs)));border-radius:var(--radius-lg) 0 0 var(--radius-lg);box-shadow:3px -2px 3px var(--colorPalet-boxshadowIn), 3px -6px 8px var(--colorPalet-boxshadowOut)}}@keyframes rotateText{0%{opacity:1;transform:rotateY(0)}20%{opacity:.5;transform:rotateY(70deg)}40%{opacity:.25}50%{opacity:0;transform:rotateY(90deg)}60%{opacity:.25}80%{opacity:.5;transform:rotateY(70deg)}to{opacity:1;transform:rotateY(0)}}@keyframes moveShadow{0%{box-shadow:var(--shadow-elevated)}50%{box-shadow:0 -2px 3px var(--colorPalet-boxshadowIn), 0 -6px 8px var(--colorPalet-boxshadowOut)}to{box-shadow:3px -2px 3px var(--colorPalet-boxshadowIn), 3px -6px 8px var(--colorPalet-boxshadowOut)}}.goLogin{animation-name:coverRegister;animation-duration:.5s;animation-timing-function:ease;animation-fill-mode:forwards}.goRegister{animation-name:coverRegister;animation-duration:.5s;animation-timing-function:ease;animation-direction:reverse;animation-fill-mode:forwards}.rotateText{animation-name:rotateText;animation-duration:.5s;animation-timing-function:ease}.logButton.animateShadow:before,.regButton.animateShadow:before,.moveShadow{animation-name:moveShadow;animation-duration:.5s;animation-timing-function:ease;animation-fill-mode:forwards}.logButton.animateShadowReverse:before,.regButton.animateShadowReverse:before,.moveShadowReverse{animation-name:moveShadow;animation-duration:.5s;animation-timing-function:ease;animation-direction:reverse;animation-fill-mode:forwards}