<h1 class="form-heading">Application Form</h1>
    <form class="application-form">
        <p class="helper-text">* denotes a required field</p>
        
        <div class="field-row">
            <label class="form-label" for="firstName">First name</label>
            <input type="text" id="firstName" class="field text-field first-name-field" required>
            <span class="message"></span>
        </div>
        
        <div class="field-row">
            <label class="form-label" for="initials">Initials</label>
            <input type="text" id="initials" class="field field-short text-field initials-field">
        </div>
        
        <div class="field-row">
            <label class="form-label cf" for="lastName">Last name</label>
            <input type="text" id="lastName" class="field text-field last-name-field" required>
            <span class="message"></span>
        </div>
        
        <div class="field-row">
            <label class="form-label" for="dateOfBirth">Date of birth</label>
            <input type="date" id="dateOfBirth" class="field date-field dob-field" min="1900-01-01" max="2015-09-18"  required>
            <span class="message"></span>
        </div>
        
        <div class="field-row">
            <label class="form-label" for="tel">Tel</label>
            <input type="tel" id="tel" class="field text-field tel-field" required>
            <span class="message"></span>
        </div>
        
        <div class="field-row">
            <label class="form-label" for="email">Email</label>
            <input type="email" id="email" class="field text-field email-field" required>
            <span class="message"></span>
        </div>
        
        <div class="field-row">
            <label class="form-label" for="website">Website</label>
            <input type="url" id="website" class="field text-field url-field website-field">
            <span class="message"></span>
        </div>
        
        <div class="field-row">
            <label class="form-label"></label>
            <button class="form-button">Apply now</button>
        </div>
    </form> 

$color-invalid: orange;
$color-valid: green;


@mixin field-outline($color) {
    outline: $color solid 2px;
}

@mixin message-invalid($message) {
    color: $color-invalid;
    content: $message;
}

* {
    outline: none;
}

body {
  counter-reset: capitulo;
}

.form-heading {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 36px;
    font-weight: bold;
    margin: 5px;
}

.application-form {
    border: 1px solid black;
    box-sizing: border-box;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 15px auto;
    padding: 15px;
    width: 600px;
}

.helper-text {
    font-size: 12px;
    margin-botom: 10px;
    text-align: right;
}

.field-row {
    position: relative;
    width: 100%;
}

.form-label {
    display: inline-block;
    font-size: 16px;
    margin: 0 5px 5px 0;
    text-align: right;
    width: 100px;
}

.field {
    border: 1px solid #ccc;
    box-sizing: border-box;
    display: inline-block;
    font-size: 16px;
    padding: 10px;
    margin-bottom: 15px;
    width: 240px;
    
    &.field-short {
        width: 70px;
    }
}

.message {
    display: inline-block;
}

.form-button {
    background: linear-gradient(180deg, #808080, #2a2a2a);
    border: none;
    border-radius: 0;
    color: white;
    display: inline-block;
    padding: 10px;
    font-size: 16px;
}

:required + .message::before {
    content: "* ";
}

.text-field {
    &:focus:required:valid {
        @include field-outline($color-valid);
    }
    
    &:focus:required:invalid {
        @include field-outline($color-invalid);
    }
}

.date-field {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    
    &:focus:in-range {
        @include field-outline($color-valid);
    }
    
    &:focus:out-of-range {
        @include field-outline($color-invalid);
    }
}

.website-field {
    &:focus:valid {
        @include field-outline($color-valid);
    }
    
    &:focus:invalid {
        @include field-outline($color-invalid);
    }
}

.first-name-field:focus:invalid + .message::after {
    color: $color-invalid;
    content: "Required your first name";
}

.last-name-field:focus:invalid + .message::after {
    @include message-invalid("Required your last name");
}

.dob-field:focus:out-of-range + .message::after {
    @include message-invalid("Date is out of range");
}

.tel-field:focus:invalid + .message::after {
    @include message-invalid("Required telephone number");
}

.email-field:focus:invalid + .message::after {
    @include message-invalid("Required email address");
}

.website-field:focus:invalid + .message::after {
    @include message-invalid("Required valid URL");
}