diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..6f3a2913e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 1654a2e29..b0e6b7557 100644
--- a/index.html
+++ b/index.html
@@ -3,18 +3,19 @@
 
   <head><!-- where all the meta data will go, like and files we need to include -->
     <title>My Little Rainbow</title><!-- the title is what appears on your tab -->
+    <link rel="stylesheet" type="text/css" href="./main.css">
   </head>
 
   <body><!-- the body element is where everything we will see on the page will go -->
 
     <!-- our soon to be beautiful rainbow! -->
-    <div> <!-- the grandest grandparent div -->
-      <div>
-        <div>
-          <div>
-            <div>
-              <div>
-                <div></div> <!-- the grandest child div -->
+    <div id="red"> <!-- the grandest grandparent div -->
+      <div id="orange">
+        <div id="yellow">
+          <div id="green">
+            <div id="blue">
+              <div id="indigo">
+                <div id="violet"></div> <!-- the grandest child div -->
               </div>
             </div>
           </div>
diff --git a/main.css b/main.css
index 984a9b226..40f798cbb 100644
--- a/main.css
+++ b/main.css
@@ -9,3 +9,31 @@ div {
   border-right-color: transparent; /* the right side */
   border-bottom-color: transparent; /* and the bottom of the circle */
 }
+
+#red{ 
+  border-top-color: #f00;
+}
+
+#orange{
+border-top-color: #ffa500;
+}
+
+#yellow{
+border-top-color: #ff0;
+}
+
+#green{
+border-top-color: #00bc3f;
+}
+
+#blue{
+border-top-color: #06f;
+}
+
+#indigo{
+border-top-color: #8a2be2;
+}
+
+#violet{
+border-top-color: #d300c9;
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 478c3eac4..835aae5e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -651,9 +651,9 @@
       }
     },
     "node_modules/get-func-name": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
-      "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
+      "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
       "dev": true,
       "engines": {
         "node": "*"
@@ -2249,9 +2249,9 @@
       "dev": true
     },
     "get-func-name": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
-      "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
+      "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
       "dev": true
     },
     "glob": {
