@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Montserrat,sans-serif}body{background-color:#eccc74;background:linear-gradient(to right,#e2e2e2,#eccc74);display:flex;align-items:center;justify-content:center;flex-direction:column;height:100vh}.container{background-color:#fff;border-radius:30px;box-shadow:0 5px 15px #00000059;position:relative;overflow:hidden;width:768px;max-width:100%;min-height:480px}.container p{font-size:14px;line-height:20px;letter-spacing:.3px;margin:20px 0}.container span{font-size:12px}.container a{color:#333;font-size:13px;text-decoration:none;margin:15px 0 10px}.container button{background-color:#eccc74;color:#fff;font-size:12px;padding:10px 45px;border:1px solid transparent;border-radius:8px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-top:10px;cursor:pointer}.container button.hidden{background-color:transparent;border-color:#fff}.container form{background-color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0 40px;height:100%}.container input{background-color:#eee;border:none;margin:8px 0;padding:10px 15px;font-size:13px;border-radius:8px;width:100%;outline:none}.form-container{position:absolute;top:0;height:100%;transition:all .6s ease-in-out}.sign-in{left:0;width:50%;z-index:2}.container.active .sign-in{transform:translate(100%)}.sign-up{left:0;width:50%;opacity:0;z-index:1}.container.active .sign-up{transform:translate(100%);opacity:1;z-index:5;animation:move .6s}@keyframes move{0%,49.99%{opacity:0;z-index:1}50%,to{opacity:1;z-index:5}}.social-icons{margin:20px 0}.social-icons a{border:1px solid #ccc;border-radius:20%;display:inline-flex;justify-content:center;align-items:center;margin:0 3px;width:40px;height:40px}.toggle-container{position:absolute;top:0;left:50%;width:50%;height:100%;overflow:hidden;transition:all .6s ease-in-out;border-radius:150px 0 0 100px;z-index:1000}.container.active .toggle-container{transform:translate(-100%);border-radius:0 150px 100px 0}.toggle{background-color:#eccc74;background:linear-gradient(to right,#d86d6d,#eccc74);color:#fff;position:relative;left:-100%;height:100%;width:200%;transform:translate(0);transition:all .6s ease-in-out}.container.active .toggle{transform:translate(50%)}.toggle-panel{position:absolute;width:50%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0 30px;text-align:center;top:0;transform:translate(0);transition:all .6s ease-in-out}.toggle-left{transform:translate(-200%)}.container.active .toggle-left{transform:translate(0)}.toggle-right{right:0;transform:translate(0)}.container.active .toggle-right{transform:translate(200%)}@media (max-width: 767.98px){body{height:auto;min-height:100vh;padding:24px 12px}.container{width:100%;max-width:420px;min-height:auto;border-radius:20px;overflow:visible}.form-container{position:relative;top:auto;left:auto;width:100%;height:auto;transform:none!important;transition:none}.sign-in,.sign-up{width:100%;left:auto;opacity:1;z-index:auto;transform:none!important;animation:none!important}.container.active .sign-in,.container.active .sign-up{transform:none!important}.container form{padding:20px;height:auto}.container p{font-size:13px;line-height:1.5}.container span{font-size:11px}.container a{font-size:12px}.container button{width:100%;padding:12px 16px;font-size:12px}.container input{padding:12px 14px;font-size:14px}.social-icons a{width:36px;height:36px}.toggle-container{position:relative;top:auto;left:auto;width:100%;height:auto;overflow:visible;transform:none!important;border-radius:16px;margin-top:12px}.toggle{left:0;width:100%;height:auto;min-height:160px;transform:none!important;border-radius:16px}.toggle-panel{position:relative;width:100%;height:auto;padding:20px;transform:none!important;text-align:center}.toggle-left,.toggle-right,.container.active .toggle-left,.container.active .toggle-right{transform:none!important;right:auto}}@media (min-width: 768px){body{height:100vh;padding:0}.container{width:768px;min-height:480px;overflow:hidden;border-radius:30px}.form-container{position:absolute;top:0;height:100%;transition:all .6s ease-in-out}.sign-in{left:0;width:50%;z-index:2}.container.active .sign-in{transform:translate(100%)}.sign-up{left:0;width:50%;opacity:0;z-index:1}.container.active .sign-up{transform:translate(100%);opacity:1;z-index:5;animation:move .6s}.toggle-container{position:absolute;top:0;left:50%;width:50%;height:100%;overflow:hidden;transition:all .6s ease-in-out;border-radius:150px 0 0 100px;z-index:1000}.container.active .toggle-container{transform:translate(-100%);border-radius:0 150px 100px 0}.toggle{left:-100%;width:200%;height:100%;transform:translate(0);transition:all .6s ease-in-out}.container.active .toggle{transform:translate(50%)}.toggle-panel{position:absolute;width:50%;height:100%;padding:0 30px;top:0}.toggle-left{transform:translate(-200%)}.container.active .toggle-left{transform:translate(0)}.toggle-right{right:0;transform:translate(0)}.container.active .toggle-right{transform:translate(200%)}}@media (max-width: 360px){.container{max-width:340px}.container form{padding:16px}.container button{font-size:11px;padding:10px 14px}}