diff --git a/index.html b/index.html
index 4d2590f..c9d521a 100644
--- a/index.html
+++ b/index.html
@@ -10,160 +10,160 @@
     </head>
 
     <body class="no-transition">
+        <header>
+            <h1>Form Validation</h1>
+        </header>
         <main>
             <section>
-                <div style="background: var(--color-02);">
-                    <form data-validation='{"onSuccess": "save()"}'>
-                        <fieldset>
-                            <legend>Native HTML Form Controls</legend>
+                <form data-validation='{"onSuccess": "save()"}'>
+                    <fieldset>
+                        <legend>Native HTML Form Controls</legend>
 
-                            <figure class="form-group">
-                                <label for="text">Text</label>
-                                <input id="text" type="text" name="text">
-                                <figcaption>Input element with <code>type="text"</code> attribute.</figcaption>
-                            </figure>
+                        <figure class="form-group">
+                            <label for="text">Text</label>
+                            <input id="text" type="text" name="text">
+                            <figcaption>Input element with <code>type="text"</code> attribute.</figcaption>
+                        </figure>
 
-                            <figure class="form-group">
-                                <label for="email">Email</label>
-                                <input id="email" type="email" name="email">
-                                <figcaption>Input element with <code>type="email"</code> attribute.</figcaption>
-                            </figure>
+                        <figure class="form-group">
+                            <label for="email">Email</label>
+                            <input id="email" type="email" name="email">
+                            <figcaption>Input element with <code>type="email"</code> attribute.</figcaption>
+                        </figure>
 
-                            <figure class="form-group">
-                                <label for="tel">Tel</label>
-                                <input id="tel" type="tel" name="tel">
-                            </figure>
+                        <figure class="form-group">
+                            <label for="tel">Tel</label>
+                            <input id="tel" type="tel" name="tel">
+                        </figure>
 
-                            <figure class="form-group">
-                                <label for="date">Date</label>
-                                <input id="date" type="date" name="date" min="2025-01-01" max="2025-12-31">
-                            </figure>
+                        <figure class="form-group">
+                            <label for="date">Date</label>
+                            <input id="date" type="date" name="date" min="2025-01-01" max="2025-12-31">
+                        </figure>
 
-                            <figure class="form-group">
-                                <label for="file">File Upload</label>
-                                <input id="file" type="file" name="file">
-                            </figure>
+                        <figure class="form-group">
+                            <label for="file">File Upload</label>
+                            <input id="file" type="file" name="file">
+                        </figure>
 
-                            <figure class="form-group">
-                                <label for="select">Select</label>
-                                <select id="select" name="select">
-                                    <option selected value="">Choose an Item</option>
-                                    <option>1</option>
-                                    <option>2</option>
-                                    <option>3</option>
-                                </select>
-                            </figure>
+                        <figure class="form-group">
+                            <label for="select">Select</label>
+                            <select id="select" name="select">
+                                <option selected value="">Choose an Item</option>
+                                <option>1</option>
+                                <option>2</option>
+                                <option>3</option>
+                            </select>
+                        </figure>
 
-                            <figure>
-                                <fieldset class="form-group">
-                                    <legend>Check Group</legend>
-                                    <span class="form-group__item">
-                                        <input id="checkbox-1" type="checkbox" name="checks">
-                                        <label for="checkbox-1">Checkbox 1</label>
-                                    </span>
-                                    <span class="form-group__item">
-                                        <input id="checkbox-2" type="checkbox" name="checks">
-                                        <label for="checkbox-2">Checkbox 2</label>
-                                    </span>
-                                    <span class="form-group__item">
-                                        <input id="checkbox-3" type="checkbox" name="checks">
-                                        <label for="checkbox-3">Checkbox 3</label>
-                                    </span>
-                                </fieldset>
-                            </figure>
+                        <figure>
+                            <fieldset class="form-group">
+                                <legend>Check Group</legend>
+                                <span class="form-group__item">
+                                    <input id="checkbox-1" type="checkbox" name="checks">
+                                    <label for="checkbox-1">Checkbox 1</label>
+                                </span>
+                                <span class="form-group__item">
+                                    <input id="checkbox-2" type="checkbox" name="checks">
+                                    <label for="checkbox-2">Checkbox 2</label>
+                                </span>
+                                <span class="form-group__item">
+                                    <input id="checkbox-3" type="checkbox" name="checks">
+                                    <label for="checkbox-3">Checkbox 3</label>
+                                </span>
+                            </fieldset>
+                        </figure>
 
-                            <figure>
-                                <fieldset class="form-group">
-                                    <legend>Radio Group</legend>
-                                    <span class="form-group__item">
-                                        <input id="radio-1" type="radio" name="radios">
-                                        <label for="radio-1">Radio 1</label>
-                                    </span>
-                                    <span class="form-group__item">
-                                        <input id="radio-2" type="radio" name="radios">
-                                        <label for="radio-2">Radio 2</label>
-                                    </span>
-                                </fieldset>
-                            </figure>
+                        <figure>
+                            <fieldset class="form-group">
+                                <legend>Radio Group</legend>
+                                <span class="form-group__item">
+                                    <input id="radio-1" type="radio" name="radios">
+                                    <label for="radio-1">Radio 1</label>
+                                </span>
+                                <span class="form-group__item">
+                                    <input id="radio-2" type="radio" name="radios">
+                                    <label for="radio-2">Radio 2</label>
+                                </span>
+                            </fieldset>
+                        </figure>
 
-                            <figure class="form-group">
-                                <label for="textarea">Textarea</label>
-                                <textarea id="textarea" name="textarea"></textarea>
-                            </figure>
-                        </fieldset>
+                        <figure class="form-group">
+                            <label for="textarea">Textarea</label>
+                            <textarea id="textarea" name="textarea"></textarea>
+                        </figure>
+                    </fieldset>
 
-                        <fieldset>
-                            <legend>Passwords</legend>
-                            <p style="grid-column: -1 / 1;">The Password Confirm field below is automatically generated based on the presence of a Password field.</p>
+                    <fieldset>
+                        <legend>Passwords</legend>
+                        <p style="grid-column: -1 / 1;">The Password Confirm field below is automatically generated based on the presence of a Password field.</p>
 
-                            <div class="form-group">
-                                <label for="password">Password</label>
-                                <input id="password" type="password" name="password">
+                        <div class="form-group">
+                            <label for="password">Password</label>
+                            <input id="password" type="password" name="password">
+                        </div>
+                    </fieldset>
+
+                    <fieldset>
+                        <legend>Custom Form Controls</legend>
+
+                        <figure class="form-group">
+                            <label for="custom-control">Check for Text</label>
+                            <div data-validation='{"valueSrc": ["#custom-control", "textContent"]}'
+                                 class="custom-form-control" id="custom-control" name="custom_control" contenteditable>
                             </div>
-                        </fieldset>
+                            <figcaption>This custom form control is a <code>div</code> element, not an <code>input</code> element.</figcaption>
+                        </figure>
 
-                        <fieldset>
-                            <legend>Custom Form Controls</legend>
+                        <figure class="form-group">
+                            <label for="exists">Check for Element</label>
+                            <div data-validation='{"valueSrc": ["#exists", "exists", ":scope > img"]}' id="exists" name="exists" class="custom-form-control"
+                                 style="display: flex; height: 3lh; justify-content: center; padding: var(--half-space); overflow: clip;" ></div>
+                            <button type="button" onclick="document.querySelector('#exists').insertAdjacentHTML('afterbegin', '<img src=&quot;https://raw.githubusercontent.com/tailwindlabs/heroicons/refs/heads/master/src/24/solid/hand-thumb-up.svg&quot; alt=&quot;Ya good.&quot; />')">Add an Image</button>
+                            <button type="button" onclick="document.querySelector('#exists').innerHTML = ''">Remove Images</button>
+                            <figcaption>This custom form control checks if a the <code>div#exists</code> contains an <code>img</code> tag.</figcaption>
+                        </figure>
+                    </fieldset>
 
-                            <figure class="form-group">
-                                <label for="custom-control">Check for Text</label>
-                                <div data-validation='{"valueSrc": ["#custom-control", "textContent"]}'
-                                     id="custom-control" name="custom_control" contenteditable
-                                     style="background: green;">
-                                </div>
-                                <figcaption>This custom form control is a <code>div</code> element, not an <code>input</code> element.</figcaption>
-                            </figure>
+                    <fieldset>
+                        <legend>Other Options</legend>
+                        <p style="grid-column: -1 / 1;">These options can be applied to the fields above.</p>
 
-                            <figure class="form-group">
-                                <label for="exists">Check for Element</label>
-                                <div data-validation='{"valueSrc": ["#exists", "exists", ":scope > img"]}' id="exists" name="exists"
-                                    style="border: 1px solid var(--color-01); display: flex; height: 3lh; justify-content: center; padding: var(--half-space); overflow: clip;" ></div>
-                                <button type="button" onclick="document.querySelector('#exists').insertAdjacentHTML('afterbegin', '<img src=&quot;https://raw.githubusercontent.com/tailwindlabs/heroicons/refs/heads/master/src/24/solid/hand-thumb-up.svg&quot; alt=&quot;Ya good.&quot; />')">Add an Image</button>
-                                <button type="button" onclick="document.querySelector('#exists').innerHTML = ''">Remove Images</button>
-                                <figcaption>This custom form control checks if a the <code>div#exists</code> contains an <code>img</code> tag.</figcaption>
-                            </figure>
-                        </fieldset>
+                        <figure class="form-group">
+                            <label for="not-required">Text (Optional)</label>
+                            <input data-validation='{"optional": true}' id="not-required" type="text" name="not_required">
+                            <figcaption>Optional fields will allow blank input, but will validate non-blank value based on the input's type attribute and/or custom pattern if supplied.</figcaption>
+                        </figure>
 
-                        <fieldset>
-                            <legend>Other Options</legend>
-                            <p style="grid-column: -1 / 1;">These options can be applied to the fields above.</p>
+                        <figure class="form-group">
+                            <label for="custom">Regex Pattern Test</label> <small>(Numbers only.)</small>
+                            <input data-validation='{"pattern": "^[0-9]*$", "patternMessage": "This field must only contain numbers."}' id="custom" type="text" inputmode="numeric" name="custom">
+                            <figcaption>This field uses a user supplied regular expression to test against and can output a custom error message. The input will validate based on the input's type attribute first, then the pattern.</figcaption>
+                        </figure>
 
-                            <figure class="form-group">
-                                <label for="not-required">Text (Optional)</label>
-                                <input data-validation='{"optional": true}' id="not-required" type="text" name="not_required">
-                                <figcaption>Optional fields will allow a blank input.</figcaption>
-                            </figure>
+                        <figure class="form-group">
+                            <label for="disabled">Dynamic Disabling</label>
+                            <input id="disabled" type="text" name="disabled" disabled>
+                            <button type="button" onclick="document.querySelector('#disabled').toggleAttribute('disabled')">Toggle Disabled Attribute</button>
+                            <figcaption>Required fields can be dynamically disabled/enabled.</figcaption>
+                        </figure>
+                    </fieldset>
 
-                            <figure class="form-group">
-                                <label for="not-required-email">Email (Optional)</label>
-                                <input data-validation='{"optional": true}' id="not-required-email" type="email" name="not_required_email">
-                                <figcaption>Optional fields will still be validated when there is input present.</figcaption>
-                            </figure>
-
-                            <figure class="form-group">
-                                <label for="custom">Regex Pattern Test</label> <small>(Numbers only.)</small>
-                                <input data-validation='{"pattern": "^[0-9]*$", "patternMessage": "This field must only contain numbers."}' id="custom" type="text" inputmode="numeric" name="custom">
-                                <figcaption>This field uses a user supplied regular expression to test against and can output a custom error message. The value of the field will be run against all default validation checks, then run against the pattern.</figcaption>
-                            </figure>
-
-                            <figure class="form-group">
-                                <label for="disabled">Dynamic Disabling</label>
-                                <input id="disabled" type="text" name="disabled" disabled>
-                                <button type="button" onclick="document.querySelector('#disabled').toggleAttribute('disabled')">Toggle Disabled Attribute</button>
-                                <figcaption>Required fields can be dynamically disabled/enabled.</figcaption>
-                            </figure>
-                        </fieldset>
-
-                        <fieldset>
-                            <figure class="form-group">
-                                <button type="submit">Submit</button>
-                                <button type="reset">Reset</button>
-                            </figure>
-                        </fieldset>
-                    </form>
-
-                </div>
+                    <fieldset>
+                        <figure class="form-group">
+                            <button type="submit">Submit</button>
+                            <button type="reset">Reset</button>
+                        </figure>
+                    </fieldset>
+                </form>
             </section>
         </main>
+        <footer>
+            <div class="align-center">
+                <a href="https://git.danremollino.dev/danremollino/form-validation">
+                    <img src="https://git.danremollino.dev/assets/img/logo.svg" alt="Repository on Gitea" />
+                </a>
+            </div>
+        </footer>
     </body>
 </html>
