.wrapper{position:absolute;width:400px;height:500px;backdrop-filter:blur(10px);background-color:rgb(0 0 0 / .27);border-radius:20px;padding:40px;box-shadow:0 0 8px #000}.brand_logo_container{display:flex;position:absolute;height:170px;width:170px;top:-100px;border-radius:50%;background:#001845;padding:5px;text-align:center;left:30%;align-items:center;justify-content:center}.brand_logo{height:150px;width:150px;border-radius:50%;border:1px solid #fff;background-color:#fff;background:#fff}.form-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transition:1s ease-in-out}.wrapper.active .form-wrapper.sign-in{transform:translateY(-450px)}.wrapper .form-wrapper.sign-up{position:absolute;top:450px;left:0}.wrapper.active .form-wrapper.sign-up{transform:translateY(-450px)}.input-group{position:relative;margin:30px 0;border-bottom:2px solid #fff;display:flex;align-items:center}.input-group label{position:absolute;top:50%;left:5px;transform:translateY(-50%);font-size:16px;color:#00abff;pointer-events:none;transition:.5s}.input-group input{width:320px;height:40px;font-size:16px;color:#fff;padding:0 5px;background:#fff0;border:none;outline:none}.input-group input:focus~label,.input-group input:valid~label{top:-5px}.remember{margin:-5px 0 15px 5px}.remember label{color:#fff;font-size:14px}.remember label input{accent-color:#0ef}button{position:relative;width:100%;height:40px;background:#001845;box-shadow:0 0 10px #000;font-size:16px;color:#fff;font-weight:500;cursor:pointer;border-radius:30px;border:none;outline:none}.signUp-link{font-size:14px;text-align:center;margin:15px 0}.signUp-link p{color:#fff}.signUp-link p a{color:#00abff;text-decoration:none;font-weight:500}.signUp-link p a:hover{text-decoration:underline}.imagine-eye{width:20px;height:20px;cursor:pointer}.inactive{display:none}@media screen and (max-width:599px){.wrapper{width:200px;height:400px}.input-group input{width:170px}.brand_logo{width:120px;height:120px}.brand_logo_container{width:140px;height:140px;left:25%}}