.login-page{background-image:url(../media/baground-login.43486ab5.jpg);background-position:50%;background-size:cover;justify-content:center;align-items:center;height:100vh;display:flex}.login-page .overlay{z-index:2;background-color:rgba(0,0,0,.25);width:100%;min-height:100vh;position:absolute;left:0}.login-page .login-container{z-index:2;text-align:center;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:rgba(2,2,2,.5);border:1px solid rgba(255,255,255,.1);flex-direction:column;gap:20px;width:450px;margin:10px;padding:20px;animation:.7s fadeInUp;display:flex;position:relative;box-shadow:0 8px 32px rgba(0,0,0,.37)}.login-page .login-container .login-text{flex-direction:column;align-items:center;gap:15px;display:flex}.login-page .login-container .login-text h1{letter-spacing:1px}.login-page .login-container .login-text img{width:100px}.login-page .login-container form{flex-direction:column;gap:20px;display:flex}.login-page .login-container form input{color:#fff;background-color:rgba(2,2,2,.6);border:none;border-bottom:2px solid transparent;border-radius:2px;padding:10px;font-size:15px;transition:border-bottom .3s,box-shadow .3s}.login-page .login-container form input::placeholder{color:#fff}.login-page .login-container form input:hover{border-bottom:2px solid #888}.login-page .login-container form input:focus{border-bottom:2px solid #f20114;outline:none;box-shadow:0 2px 8px rgba(242,1,20,.5)}.login-page .login-container form button{color:gray;cursor:pointer;letter-spacing:2px;background-color:rgba(2,2,2,.7);border:none;border-bottom:1px solid transparent;padding:10px;font-size:17px;transition:all .3s}.login-page .login-container form button:hover{color:#fff;border-bottom:1px solid #f20114}.login-page .login-container form button:active{transform:scale(.97)}.login-page .login-container .link-create{border-top:2px solid rgba(242,1,21,.38);flex-direction:column;gap:10px;width:100%;padding:10px 0;display:flex}.login-page .login-container .link-create a{color:gray;cursor:pointer;letter-spacing:.5px;background-color:rgba(2,2,2,.7);border:none;border-bottom:1px solid transparent;padding:10px;font-size:17px;text-decoration:none;transition:all .3s}.login-page .login-container .link-create a:hover{color:#fff;border-bottom:1px solid #f20114}.login-page .login-container .link-create a:active{transform:scale(.97)}.login-page .register-container{z-index:2;text-align:center;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:rgba(2,2,2,.5);border:1px solid rgba(255,255,255,.1);flex-direction:column;gap:20px;width:450px;margin:10px;padding:20px;animation:.7s fadeInUp;display:flex;position:relative;box-shadow:0 8px 32px rgba(0,0,0,.37)}.login-page .register-container .login-text{letter-spacing:2px;flex-direction:column;align-items:center;gap:15px;font-size:13px;display:flex}.login-page .register-container .login-text img{width:100px}.login-page .register-container form{flex-direction:column;gap:20px;display:flex}.login-page .register-container form input{color:#fff;background-color:rgba(2,2,2,.6);border:none;border-bottom:2px solid transparent;border-radius:2px;padding:10px;font-size:15px;transition:border-bottom .3s,box-shadow .3s}.login-page .register-container form input::placeholder{color:#fff}.login-page .register-container form input:hover{border-bottom:2px solid #888}.login-page .register-container form input:focus{border-bottom:2px solid #f20114;outline:none;box-shadow:0 2px 8px rgba(242,1,20,.5)}.login-page .register-container form button{color:gray;cursor:pointer;letter-spacing:1.5px;background-color:rgba(2,2,2,.7);border:none;border-bottom:1px solid transparent;padding:10px;font-size:17px;transition:all .3s}.login-page .register-container form button:hover{color:#fff;border-bottom:1px solid #f20114}.login-page .register-container form button:active{transform:scale(.97)}.login-page .register-container .link-login{border-top:2px solid rgba(242,1,21,.38);flex-direction:column;gap:10px;width:100%;padding:10px 0;display:flex}.login-page .register-container .link-login a{color:gray;cursor:pointer;letter-spacing:1.5px;background-color:rgba(2,2,2,.7);border:none;border-bottom:1px solid transparent;padding:10px;font-size:17px;text-decoration:none;transition:all .3s}.login-page .register-container .link-login a:hover{color:#fff;border-bottom:1px solid #f20114}.login-page .register-container .link-login a:active{transform:scale(.97)}.success-message{color:#fff;text-align:center;background-color:#4caf50;border-radius:10px;margin-top:15px;padding:12px 18px;font-weight:500;animation:.4s ease-in-out fadeIn;box-shadow:0 0 10px rgba(0,255,0,.3)}.success-message p{margin:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}