*{ font-family: 'Times New Roman', Times, serif; margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; /* background: url('https://wallpaperaccess.com/full/4893666.jpg') no-repeat; */ background-color: rgb(8, 8, 40); background-size: cover; background-position: center; } .container{ width: 420px; background: transparent; border: 2px solid rgba(255,255,255,.2); backdrop-filter: blur()20px; box-shadow: 0 0 10px rgba(0 ,0 , 0, .2); color: #fff; border-radius: 10px; padding: 30px 40px; } .container h1{ font-size: 36px; text-align: center; } .container .input-box{ width: 100%; height: 50px; margin: 30px 0; } .input-box input{ width: 100%; height: 100%; background: transparent; border: none; outline: none; border: 2px solid rgba(255,255,255,2); border-radius: 40px; font-size: 16px; color: #fff; padding: 20px 45px 20px 20px; } .input-box input::placeholder{ color: #fff; } .container .remember-forget{ display: flex; justify-content: space-between; font-size: 14.5px; margin: -15px 0 15px; } .remember-forget label input{ accent-color: #fff; margin-right: 3px; } .remember-forget a{ color: #fff; text-decoration: none; } .remember-forget a:hover{ text-decoration: underline; } .container .btn{ width: 100%; height: 45px; background:#fff; border: none; outline: none; border-radius: 40px; box-shadow: 0 0 10px rgba(0 ,0 , 0, .1); cursor: pointer; font-size: 16px; color: #333; font-weight: 600; } .container .register-link{ font-size: 14.5px; text-align: center; margin: 20px 0 15px; } .register-link p a{ color: #fff; text-decoration: none; font-weight: 600; } .register-link p a:hover{ text-decoration: underline; }