diff --git a/assets/css/styles.css b/assets/css/styles.css
index 61752ec..0fc65f3 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,79 +1,205 @@
-html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent;}
-
-main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}
-
-html {box-sizing: border-box;}
+/* Generic Resets for Common Elements */
+html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font-weight: normal;
+    vertical-align: baseline;
+    background: transparent;
+}
 
-*, *:before, *:after {box-sizing: inherit;}
+/* Block Elements Display Property */
+main, article, aside, figure, footer, header, nav, section, details, summary {
+    display: block;
+}
 
-img {max-width: 100%;}
+/* Box Sizing for HTML Element */
+html {
+    box-sizing: border-box;
+}
 
-ul {list-style: none;} /* we'll restore bullets as needed for content */
+/* Box Sizing Inheritance for All Elements */
+*, *:before, *:after {
+    box-sizing: inherit;
+}
 
-blockquote, q {quotes: none;}
+/* Responsive Image */
+img {
+    max-width: 100%;
+}
 
-blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
+/* List Styles Removal */
+ul {
+    list-style: none;
+}
 
-a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
+/* Remove Quotes */
+blockquote, q {
+    quotes: none;
+}
 
-del {text-decoration: line-through;}
+/* Additional Styling for Quotes */
+blockquote:before, blockquote:after, q:before, q:after {
+    content: '';
+    content: none;
+}
 
-abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
+/* Link Styling */
+a {
+    margin: 0;
+    padding: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    background: transparent;
+}
 
-table {border-collapse: separate; border-spacing: 0; text-align: left;}
-th {font-weight: bold; vertical-align: bottom;}
-td {font-weight: normal; vertical-align: top;}
-td img {vertical-align: top;}
+/* Strikethrough Text Decoration for Deleted Content */
+del {
+    text-decoration: line-through;
+}
 
-hr {display: block; height: 1px; border: 0; border-top: 1px solid #999; margin: 1rem 0; padding: 0;}
+/* Dotted Border for Abbreviations and Definitions */
+abbr[title], dfn[title] {
+    border-bottom: 1px dotted #000;
+    cursor: help;
+}
 
-input, select {vertical-align: middle;}
+/* Table Styles */
+table {
+    border-collapse: separate;
+    border-spacing: 0;
+    text-align: left;
+}
+th {
+    font-weight: bold;
+    vertical-align: bottom;
+}
+td {
+    font-weight: normal;
+    vertical-align: top;
+}
+td img {
+    vertical-align: top;
+}
 
-pre {white-space: pre-line;}
+/* Horizontal Rule Styles */
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #999;
+    margin: 1rem 0;
+    padding: 0;
+}
 
-input[type="radio"] {vertical-align: text-bottom;}
-input[type="checkbox"] {vertical-align: bottom;}
+/* Vertical Alignment for Form Elements */
+input, select {
+    vertical-align: middle;
+}
 
-small {font-size: .8rem;}
+/* Preserve Whitespace in Preformatted Text */
+pre {
+    white-space: pre-line;
+}
 
-strong {font-weight: bold;}
+/* Vertical Alignment for Radio and Checkbox Inputs */
+input[type="radio"] {
+    vertical-align: text-bottom;
+}
+input[type="checkbox"] {
+    vertical-align: bottom;
+}
 
-sub, sup {font-size: .8rem; line-height: 0; position: relative;}
-sup {top: -0.5rem;}
-sub {bottom: -0.25rem;}
+/* Font Size Adjustment for Small Text */
+small {
+    font-size: .8rem;
+}
 
-pre, code, kbd, samp {font-family: monospace, sans-serif;}
+/* Bold Text */
+strong {
+    font-weight: bold;
+}
 
-label, input[type=button], input[type=submit], input[type=file], button {cursor: pointer;}
+/* Superscript and Subscript Styling */
+sub, sup {
+    font-size: .8rem;
+    line-height: 0;
+    position: relative;
+}
+sup {
+    top: -0.5rem;
+}
+sub {
+    bottom: -0.25rem;
+}
 
-button, input, select, textarea {margin: 0;}
+/* Monospace Font Family for Code */
+pre, code, kbd, samp {
+    font-family: monospace, sans-serif;
+}
 
-ins {background-color: var(--highlight-color); color: #000; text-decoration: none;}
-mark {background-color: var(--highlight-color); color: #000; font-style: italic; font-weight: bold;}
+/* Cursor Style for Buttons and Form Elements */
+label, input[type=button], input[type=submit], input[type=file], button {
+    cursor: pointer;
+}
 
-blockquote {padding: 2rem; border-left: 1px solid #333;}
+/* Styling for Inserted and Marked Text */
+ins {
+    background-color: var(--highlight-color);
+    color: #000;
+    text-decoration: none;
+}
+mark {
+    background-color: var(--highlight-color);
+    color: #000;
+    font-style: italic;
+    font-weight: bold;
+}
 
-.clearfix:after {content: ""; display: table; clear: both;} /* https://css-tricks.com/snippets/css/clear-fix/ */
+/* Blockquote Styles */
+blockquote {
+    padding: 2rem;
+    border-left: 1px solid #333;
+}
 
-/* ———— END THE GENERIC RESETS ———— */
+/* Clearfix for Floats */
+.clearfix:after {
+    content: "";
+    display: table;
+    clear: both;
+}
 
+/* Root Variables for Color Scheme */
 :root {
-	--font-system: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* https://css-tricks.com/snippets/css/system-font-stack */
-	--text-color: #333;
-	--featured-color: #03f;
-	--featured-color-hover: #69f;
-	--highlight-color: #fcd700;
+    --font-system: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --text-color: #333;
+    --featured-color: #03f;
+    --featured-color-hover: #69f;
+    --highlight-color: #fcd700;
 }
 
-body {font-size: 16px; font-family: var(--font-system); color: var(--text-color);}
+/* Body Styles */
+body {
+    font-size: 16px;
+    font-family: var(--font-system);
+    color: var(--text-color);
+}
 
-a {color: var(--featured-color);}
-a:hover {color: var(--featured-color-hover);}
+/* Link Color and Hover Color */
+a {
+    color: var(--featured-color);
+}
+a:hover {
+    color: var(--featured-color-hover);
+}
 
+/* Media Query for Small Screens */
 @media screen and (max-width: 480px) {
-	
+    /* Styles for small screens go here */
 }
 
+/* Media Query for Print Styles */
 @media print {
-	
-}
\ No newline at end of file
+    /* Styles for print go here */
+}
diff --git a/index.html b/index.html
index a8a8bd9..011b65b 100644
--- a/index.html
+++ b/index.html
@@ -1,30 +1,32 @@
 <!DOCTYPE html>
 
-<!--	HTML5 Reset: 
-	https://github.com/murtaugh/HTML5-Reset
-	
-	3RD PARTY TOOLS:
+<!-- HTML5 Reset: https://github.com/murtaugh/HTML5-Reset -->
+
+<!-- 3RD PARTY TOOLS:
 	repo management: https://github.com/new
 	favicon generator: https://favicon.io
 	social meta tag generators: https://metatags.io — https://megatags.co
 	analytics providers: https://plausible.io — https://simplyanalytics.com — https://analytics.google.com
 	free web font providers: https://www.fontsquirrel.com — https://fonts.google.com
-
 -->
-
 <html lang="en">
-	
+
 <head>
 
+	<!-- Set character encoding -->
 	<meta charset="utf-8">
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+	<!-- Responsive design meta tag -->
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 
+	<!-- Page title and metadata -->
 	<title></title>
 	<meta name="description" content="" />
 	<meta name="author" content="" />
 	<meta name="copyright" content="" />
 
+	<!-- Link to external stylesheet -->
 	<link rel="stylesheet" href="assets/css/styles.css" />
 
 </head>
@@ -33,10 +35,13 @@
 
 <div>
 
+	<!-- Page header -->
 	<header>
 
+		<!-- Main heading with a link to the homepage -->
 		<h1><a href="/">Page Title</a></h1>
 
+		<!-- Navigation menu -->
 		<nav>
 
 			<ul>
@@ -48,56 +53,74 @@ <h1><a href="/">Page Title</a></h1>
 		</nav>
 
 	</header>
-	
+
+	<!-- Main content section -->
 	<main>
 
+		<!-- Main article section -->
 		<article>
-	
+
+			<!-- Article heading -->
 			<h1>Article Header</h1>
-	
+
+			<!-- Article content -->
 			<p>Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.</p>
-	
+
+			<!-- Subheading within the article -->
 			<h2>Article Subhead</h2>
-	
+
+			<!-- Additional content within the article -->
 			<p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p>
 
+			<!-- Form within the article -->
 			<form>
 				<fieldset>
 
+					<!-- Legend for the form -->
 					<legend>Personal Info</legend>
-					
+
+					<!-- Input field for Full Name -->
 					<label for="name">Full Name:</label>
 					<span class="help-text" id="input-name-help">Single word names are supported.</span>
 					<input type="text" id="name" name="name" aria-describedby="input-name-help">
-					
+
+					<!-- Input field for Email -->
 					<label for="email">Email:</label>
 					<input type="email" id="email" name="email">
 
 				</fieldset>
-				
+
+				<!-- Additional input field for Password -->
 				<label for="password">Password:</label>
 				<input type="password" id="password" name="password">
 
+				<!-- Checkbox for terms acceptance -->
 				<input type="checkbox" id="terms" required="required" />
 				<label for="terms">I have read and accept the <a href="#" target="_blank">terms and conditions</a>.</label>
-				
+
+				<!-- Submit button for the form -->
 				<input type="submit" value="Submit">
 			</form>
-	
+
 		</article>
-	
+
+		<!-- Sidebar section -->
 		<aside>
-	
+
+			<!-- Sidebar heading -->
 			<h2>Sidebar Content</h2>
-			
+
+			<!-- Additional content within the sidebar -->
 			<p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p>
-	
+
 		</aside>
-	
+
 	</main>
 
+	<!-- Page footer -->
 	<footer>
 
+		<!-- Copyright notice -->
 		<p><small>&copy; 2023 Your Name Here. All Rights Reserved.</small></p>
 
 	</footer>