@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}body{background-size:cover;background-repeat:no-repeat;background-attachment:fixed;overflow:hidden}.wrapper{display:flex;justify-content:center;align-items:center;min-height:110vh;background:#27272766;margin-top:-50px}.nav{position:fixed;top:0;display:flex;justify-content:space-around;width:100%;height:100px;line-height:100px;background:linear-gradient(rgba(39,39,39,.6),transparent);z-index:100}.nav-logo p{color:#fff;font-size:25px;font-weight:600}.nav-menu ul{display:flex}.nav-menu ul li{list-style-type:none}.nav-menu ul li .link{text-decoration:none;font-weight:500;color:#fff;padding-bottom:15px;margin:0 25px}.link:hover,.active{border-bottom:2px solid #fff}.nav-button .btn{width:130px;height:40px;font-weight:500;background:#fff6;border:none;border-radius:30px;cursor:pointer;transition:.3s ease}.btn:hover{background:#ffffff4d}#registerBtn{margin-left:15px}.btn.white-btn{background:#ffffffb3}.btn.btn.white-btn:hover{background:#ffffff80}.nav-menu-btn{display:none}.form-box{position:relative;display:flex;align-items:center;justify-content:center;width:512px;height:420px;overflow:hidden;z-index:2}.login-container{position:absolute;left:4px;width:500px;display:flex;flex-direction:column;transition:.5s ease-in-out}.register-container{position:absolute;right:-520px;width:500px;display:flex;flex-direction:column;transition:.5s ease-in-out}.top span{color:#fff;font-size:small;padding:10px 0;display:flex;justify-content:center}.top span a{font-weight:500;color:#fff;margin-left:5px}header{color:#fff;font-size:30px;text-align:center;padding:10px 0 30px}.two-forms{display:flex;gap:10px}.input-field{font-size:15px;background:#fff3;color:#fff;height:50px;width:100%;padding:0 10px 0 45px;border:none;border-radius:30px;outline:none;transition:.2s ease}.input-field:hover,.input-field:focus{background:#ffffff40}::-webkit-input-placeholder{color:#fff}.input-box i{position:relative;top:-35px;left:17px;color:#fff}.submit{font-size:15px;font-weight:500;color:#000;height:45px;width:100%;border:none;border-radius:30px;outline:none;background:#ffffffb3;cursor:pointer;transition:.3s ease-in-out}.submit:hover{background:#ffffff80;box-shadow:1px 5px 7px 1px #0003}.two-col{display:flex;justify-content:space-between;color:#fff;font-size:small;margin-top:10px}.two-col .one{display:flex;gap:5px}.two label a{text-decoration:none;color:#fff}.two label a:hover{text-decoration:underline}@media only screen and (max-width: 786px){.nav-button{display:none}.nav-menu.responsive{top:100px}.nav-menu{position:absolute;top:-800px;display:flex;justify-content:center;background:#fff3;width:100%;height:90vh;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:.3s}.nav-menu ul{flex-direction:column;text-align:center}.nav-menu-btn{display:block}.nav-menu-btn i{font-size:25px;color:#fff;padding:10px;background:#fff3;border-radius:50%;cursor:pointer;transition:.3s}.nav-menu-btn i:hover{background:#ffffff26}}@media only screen and (max-width: 540px){.wrapper{min-height:100vh}.form-box{width:100%;height:500px}.register-container,.login-container{width:100%;padding:0 20px}.register-container .two-forms{flex-direction:column;gap:0}}