Styling a simple login form

We will now write the CSS styles for a simple login form. The HTML markup is pretty simple. It has two labels, two input fields, and two buttons, as shown in the following code:

<form method="post" id="login">
    <label>Your username</label>
    <input type="text" name="u" />
    <label>Your password</label>
    <input type="password" name="p" />
    <input type="submit" value="login" />
    <input type="button" value="forgot" />
</form>

The result that we want to achieve at the end looks like the following screenshot:

As a preprocessor, we are going to use AbsurdJS and write our styles in the JavaScript format. Let's create an empty style.js file and enter the following code:

module.exports = function(api) {
  var textColor = '#9E9E9E';
  var textColorLight = api.lighten('#9E9E9E', 50);
  var textColorDark = api.darken('#9E9E9E', 50);
  var brandColor = '#8DB7CD';
  var brandColorLight = api.lighten('#8DB7CD...