.login-page{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#39394f,#1f1f2e);width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden;font-family:sriracha,cursive;font-size:20px}.background-image{position:absolute;width:50%;height:50%;z-index:-1;opacity:.5;bottom:0;right:0;transform:translate(30%,30%)}.login-container{display:grid;grid-template-columns:4fr 5fr;background:#ffffff;width:800px;height:600px;overflow:hidden;border-radius:30px;box-shadow:0 4px 15px rgba(0,0,0,.2);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1)}.section-logo{background:linear-gradient(45deg,#26eb72,#1db45a);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}.section-logo img{width:150px;height:150px;margin-bottom:20px}.h1-name{font-size:50px;color:#ffffff;font-family:Bungee,sans-serif;margin:0}.section-form{display:flex;justify-content:center;background:#ffffff;padding:20px;position:relative;top:0}.login-bg{width:100%;transition:all .6s cubic-bezier(.4,0,.2,1);transform-origin:center;position:relative;overflow:hidden}.login-bg.transitioning{opacity:0;transform:scale(.95) translateY(20px)}.login-bg.transitioning .button-all,.login-bg.transitioning .forgot-password,.login-bg.transitioning .register-section,.login-bg.transitioning .social-login{opacity:0;transform:translateY(20px)}.form-content{transition:all .4s ease-in-out;transform:translateX(0);opacity:1}.login-bg.transitioning .form-content{opacity:0;transform:translateX(-30px)}.h2-login{margin-top:60px}.h2-login,.h2-register{font-size:40px;color:#333333;font-family:Sriracha,cursive;text-align:center;margin-bottom:0}.h2-register{margin-top:0}.input-field{position:relative;margin-bottom:20px;opacity:1;transform:translateY(0);transition:all .3s ease}.login-bg.transitioning .input-field{opacity:0;transform:translateY(20px)}.input-field:first-child{transition-delay:.1s}.input-field:nth-child(2){transition-delay:.2s}.input-field:nth-child(3){transition-delay:.3s}.input-field:nth-child(4){transition-delay:.4s}.input-field label{display:block;margin-bottom:5px;font-size:16px;color:#555555}.input-field input{width:100%;padding:10px;border:1px solid #cccccc;border-radius:5px;font-size:16px;box-sizing:border-box;background:rgba(255,255,255,.95);transition:all .3s ease}.input-field input:focus{outline:none;border-color:#007BFF;box-shadow:0 0 5px rgba(0,123,255,.5)}.forgot-password{text-align:right;margin-top:5px}.forgot-password-link{background:none;border:none;color:#007BFF;font-size:14px;cursor:pointer;text-decoration:underline;transition:color .3s ease}.forgot-password-link:hover{color:#0056b3}.button-all{display:flex;justify-content:center;margin-top:5px}.login-button,.register-button{background:#26c42e;color:#ffffff;border:none;border-radius:5px;padding:10px 20px;font-size:18px;cursor:pointer;transition:all .3s ease-in-out}.login-button:hover{background:#0d7e0f;transform:scale(1.05)}.social-login{margin-top:20px;display:flex;justify-content:center;gap:5px}.google-login{display:flex;align-items:center;background-color:#fafafa;color:#ffffff;border:none;border-radius:5px;padding:10px;cursor:pointer;transition:all .3s ease-in-out}.google-login:hover{background-color:#eabcb6;transform:scale(1)}.google-logo{width:20px;height:20px;margin-right:5px}.facebook-login{display:flex;align-items:center;color:#ffffff;border:none;border-radius:5px;padding:10px;cursor:pointer;transition:all .3s ease-in-out;filter:drop-shadow(0 5px 15px rgba(0,0,0,.2))}.facebook-login:hover{background-color:#eabcb6;transform:scale(1)}.facebook-logo{width:25px;height:25px;margin-right:2px}.register-section{margin-top:15px;text-align:center;color:#333;border-radius:5px;font-size:16px}.register-button{background:none;color:#2ac967;border:none;border-radius:5px;padding:0 5px;font-size:16px;cursor:pointer;transition:all .3s ease;text-decoration:underline}.home-login{align-content:center}.reset-password{background:none;color:#ffffff;border:none;border-radius:5px;padding:10px 20px;font-size:18px;background-color:#26c42e}.reset-password:hover{color:#ffffff;background-color:#0d7e0f;transform:translateY(-2px);transform:scale(1)}.register-button-regis{background:none;color:#ffffff;border:none;border-radius:5px;padding:10px 20px;font-size:18px;background-color:#26c42e}.register-button-regis:hover{background:#0d7e0f;transform:scale(1.05)}.register-button:hover{color:#1db45a;text-decoration:none;transform:translateY(-2px)}@media (max-width:768px){.login-page{padding:20px;font-size:16px}.login-container{grid-template-columns:1fr;width:95%;max-width:500px;height:auto;min-height:500px;margin:20px;padding:15px}.section-form{padding:15px;width:100%;height:100%;align-content:center}.login-bg{width:100%;height:100%;display:flex;flex-direction:column}.input-field{margin-bottom:12px;width:100%}.input-field input{width:100%;padding:12px;font-size:16px}.social-login{margin-top:15px;gap:20px}.button-all{margin-top:15px;width:100%}.button-all button{width:100%;padding:12px}}@media (max-width:480px){.login-container{width:95%;margin:10px;padding:10px;min-height:450px}.section-form{padding:10px}.input-field{margin-bottom:10px}.input-field input{padding:10px;font-size:15px}.social-login{gap:15px}.button-all,.social-login{margin-top:12px}.button-all button{padding:10px;font-size:15px}.register-section{margin-top:12px;font-size:14px}}.password-input{position:relative;display:flex;align-items:center}.password-input input{width:100%}.password-toggle{position:absolute;right:10px;background:none;border:none;cursor:pointer;color:#555555;padding:0;display:flex;align-items:center}.password-toggle:hover{color:#333333}.message{color:#26eb72;text-align:center;margin-top:15px;font-weight:500}@media (max-width:768px){.login-container{width:90%;padding:20px;margin:20px}.section-logo{padding:20px}.section-logo img{width:80px;height:80px}.h1-name{font-size:28px}.h2-login{font-size:24px}}@media (max-width:480px){.login-container{width:95%;padding:15px;margin:10px}.section-logo{padding:15px}.section-logo img{width:60px;height:60px}.h1-name{font-size:24px}.h2-login{font-size:20px}.back-to-login{background:none;border:none;cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease;color:#666;margin-bottom:20px;position:absolute;top:20px;left:20px;z-index:10}.back-to-login:hover{background-color:rgba(0,0,0,.1);color:#333;transform:translateX(-3px)}}