diff --git a/docs/_assets/css/style.css b/docs/_assets/css/style.css
index e83d2528..361ebddc 100644
--- a/docs/_assets/css/style.css
+++ b/docs/_assets/css/style.css
@@ -1,137 +1,143 @@
-@import '/_assets/vocabulary/css/vocabulary.css' layer(vocabulary);
+/* Importing vocabulary.css */
+@import "/_assets/vocabulary/css/vocabulary.css" layer(vocabulary);
 
+/* CSS for All Pages */
 body {
-font-family: sans-serif; 
-margin: 0;
-display: flex;
-flex-direction: column;
-padding: 0 0 0;
+  font-family: sans-serif;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 0 0 0;
 }
 
-/* STYLES FOR MAIN CONTENT */
-
+/* Styles for listing.html and submission.html*/
 .main-content a {
-color: #40ae49;
-cursor:pointer;
+  color: #40ae49;
+  cursor: pointer;
 }
 
 h1 {
-text-align: center;
+  text-align: center;
 }
 
+/* Styles for listing.html resource thumbnail cards */
 #thumbnaillist {
-max-width: 900px;
-min-width: 250px;
-margin: 0 auto;
+  max-width: 900px;
+  min-width: 250px;
+  margin: 0 auto;
 }
 
-#preview {
-width: 500px;
-height: 375px;
-margin: 0 auto;
-background-image: url(/_assets/images/placeholder-500.gif);
-border-radius: 25px;
+.thumbnailbox {
+  width: 200px;
+  float: left;
+  display: block;
+  border-radius: 25px;
+  border: 2px solid #c0c0c0;
+  margin: 5px;
 }
 
-#downloadbuttonholder {
-height: 100px;
-width: 100%;
-display: flex;
-justify-content: center;
-align-items: center;
-margin: 10px auto;
+.thumbnailLink {
+  text-decoration: none;
 }
 
-#longdescription {
-max-width: 500px;
-margin: 0 auto;
-border: 2px solid #C0C0C0;
-border-radius: 25px;
-padding: 10px;
+.thumbnailtitle {
+  text-align: center;
+  height: 75px;
 }
 
-.thumbnailbox {
-width: 200px;
-float: left;
-display: block;
-border-radius: 25px;
-border: 2px solid #C0C0C0;
-margin: 5px;
+.thumbnailblurb {
+  height: 100px;
+  padding: 5px;
 }
 
-.thumbnailLink {
-    text-decoration: none;
+.thumbnail {
+  width: 200px;
+  height: 150px;
+  margin: 0 auto;
 }
 
-.thumbnailtitle {
-text-align: center;
-height: 75px;
+/* Styles For resource.html */
+#preview {
+  width: 500px;
+  height: 375px;
+  margin: 0 auto;
+  background-image: url(/_assets/images/placeholder-500.gif);
+  border-radius: 25px;
 }
 
-.thumbnailblurb {
-height: 100px;
-padding: 5px;
+#downloadbuttonholder {
+  height: 100px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 10px auto;
 }
 
-.thumbnail {
-width: 200px;
-height: 150px;
-margin: 0 auto;
+#longdescription {
+  max-width: 500px;
+  margin: 0 auto;
+  border: 2px solid #c0c0c0;
+  border-radius: 25px;
+  padding: 10px;
 }
 
 .downloadbutton {
-min-width: 150px;
-width: max-content;
-height: 70%;
-padding: 0 5px;
-border-radius: 8px;
-background-color: #40ae49;
-display: flex;
-justify-content: center;
-align-items: center;
+  min-width: 150px;
+  width: max-content;
+  height: 70%;
+  padding: 0 5px;
+  border-radius: 8px;
+  background-color: #40ae49;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .downloadbutton p {
-height: 100%;
-margin: 0;
-font-size: 130%;
-line-height: 75px;
-color: white;
+  height: 100%;
+  margin: 0;
+  font-size: 130%;
+  line-height: 75px;
+  color: white;
 }
 
+/* Styles For index.html and all.html */
 #resourcenavbar {
-height: fit-content;
-margin: 0 auto 100px;
-display: flex;
-justify-content: center;
+  height: fit-content;
+  margin: 0 auto 100px;
+  display: flex;
+  justify-content: center;
 }
 
 .resourcenav {
-width: 200px;
-height: fit-content;
-display: none;
+  width: 200px;
+  height: fit-content;
+  display: none;
 }
 
 .resourcenav.resourcenavstatic {
-display: block;
+  display: block;
 }
 
 #bannercc {
-width: 210px;
-height: 50px;
-margin-left: 100px;
+  width: 210px;
+  height: 50px;
+  margin-left: 100px;
 }
 
+/* Styles For footer.html */
 footer a {
-    color: var(--vocabulary-brand-color-turquoise);
+  color: var(--vocabulary-brand-color-turquoise);
 }
 
 footer .donate a {
-    color: #000;
+  color: #000;
 }
 
+/* Media Queries for responsiveness */
 @media screen and (max-width: 600px) {
-    #resourcenavbar {
-        flex-direction: column;
-    }
+  #resourcenavbar {
+    flex-direction: column;
+  }
 }