@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Comic Neue', cursive; } .container { height: 100vh; width: 100%; align-items: center; display: flex; justify-content: center; background-color: rgb(153, 143, 130); } .form { border-radius: 6px; background: #fff; width: 100%; max-width: 430px; padding: 30px; } header { font-size: 28px; font-weight: 600; color: #232836; text-align: center; } .form { margin-top: 30px; } .form .field { position: relative; height: 50px; width: 100%; margin-top: 20px; border-radius: 6px; } .field input, .field button { height: 100%; width: 100%; border: none; font-size: 16px; font-weight: 400; border-radius: 6px; } .field button { background-color: rgb(16, 26, 26); color: white; transition: all 0.3s ease-in; cursor: pointer; } .field button:hover { background-color: blue; } .field input { border: 1px solid #cacaca; padding: 0 15px; outline: none; } .field input:focus { border-bottom-width: 2px; } .field.button-field button { width: 100%; height: 100%; } .form-link { text-align: center; margin-top: 10px; } .form-link span, .form-link span a { font-size: 14px; font-weight: 400; color: rgb(17, 19, 19); } .eye-font { font-size: 18px; color: rgb(47, 53, 59); position: absolute; top: 50%; right: 10px; transform: translateY(-50%); cursor: pointer; padding: 5px; } .form a { text-decoration: none; color: rgb(5, 5, 5); } .form a:hover { text-decoration: underline; } .line { position: relative; height: 1px; width: 100%; background-color: #232836; margin: 36px 0; } .line::before { content: 'Alternatively'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: aliceblue; color: black; padding: 0 15px; } .socials a { display: flex; align-items: center; background-color: blue; height: 50px; }