@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap";body{font-family:Poppins,sans-serif;background:linear-gradient(135deg,#03045e,#0077b6,#00b4d8);height:100vh;margin:0;display:flex;justify-content:center;align-items:center}.container{background:#fff;border-radius:1rem;box-shadow:0 14px 28px #00000040,0 10px 10px #00000038;position:relative;overflow:hidden;width:900px;max-width:100%;min-height:550px;display:flex}.form-container{position:absolute;top:0;height:100%;transition:all .6s ease-in-out;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:0 50px;text-align:center;width:50%}.sign-in-container{left:0;z-index:2}.sign-up-container{left:0;opacity:0;z-index:1}.container.right-panel-active .sign-in-container{transform:translate(100%)}.container.right-panel-active .sign-up-container{transform:translate(100%);opacity:1;z-index:5}form{background:#fff;display:flex;flex-direction:column;padding:0 20px;width:100%}input{background-color:#f0f0f0;border:none;padding:12px 15px;margin:8px 0;width:100%;border-radius:8px;outline:none}button{border-radius:20px;border:none;background-color:#0077b6;color:#fff;font-size:14px;font-weight:600;padding:12px 45px;letter-spacing:1px;text-transform:uppercase;transition:transform 80ms ease-in;margin-top:15px}button:hover{background-color:#03045e}button:active{transform:scale(.95)}button.ghost{background-color:transparent;border:2px solid #ffffff}.overlay-container{position:absolute;top:0;left:50%;width:50%;height:100%;overflow:hidden;transition:transform .6s ease-in-out;z-index:100}.container.right-panel-active .overlay-container{transform:translate(-100%)}.overlay{background:linear-gradient(135deg,#03045e,#0077b6,#00b4d8);background-repeat:no-repeat;background-size:cover;background-position:center;color:#fff;position:relative;left:-100%;height:100%;width:200%;transform:translate(0);transition:transform .6s ease-in-out}.container.right-panel-active .overlay{transform:translate(50%)}.overlay-panel{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 40px;text-align:center;top:0;height:100%;width:50%;transform:translate(0);transition:transform .6s ease-in-out}.overlay-left{transform:translate(-20%);left:0}.container.right-panel-active .overlay-left{transform:translate(0)}.overlay-right{right:0;transform:translate(0)}.container.right-panel-active .overlay-right{transform:translate(20%)}