@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f0faff; } .wrapper { position: relative; max-width: 470px; width: 100%; border-radius: 12px; padding: 20px 30px 120px; background: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); overflow: hidden; } .form header { font-size: 30px; text-align: center; color: #333; font-weight: 600; cursor: pointer; } .wrapper.active .form.login header { opacity: 1; } .wrapper.active .signup header { opacity: 0.6; } .wrapper form { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; } form a { color: #333; text-decoration: none; } form input { height: 60px; outline: none; border: none; padding: 0 15px; font-size: 16px; font-weight: 400; color: #333; border-radius: 8px; background: #fff; border: 1px solid #aaa; } form input[type="submit"] { margin-top: 15px; padding: none; font-size: 18px; font-weight: 500; cursor: pointer; background: #4070f4; color: #fff; }