Reworked font size to be based on default font size (16px), not custo…

…m 20px

webpage/main.scss

@@ -7,4 +7,4 @@
 @use "partials/personal";
 @use "partials/footer";
 
-/* Selectors cheat sheet: https://dev.to/dawnind/css3-selectors-cheat-sheet-6dk */
+/* Selectors cheat sheet: https://dev.to/dawnind/css3-selectors-cheat-sheet-6dk */

webpage/partials/_footer.scss

@@ -11,7 +11,7 @@ footer {
 
 footer p {
     color: v.$light-blue;
-    font-size: 0.5rem;
+    font-size: 0.75rem;
     font-style: italic;
     text-align: center;
 }

webpage/partials/_global.scss

@@ -4,9 +4,6 @@
     font-family: Helvetica, Arial, sans-serif;
     margin: 0;
 }
-html {
-    font-size: 20px;
-}
 body {
     background-color: v.$navy-blue;
 }

webpage/partials/_personal.scss

@@ -9,16 +9,16 @@
 }
 #personal_life h1 {
     text-align: center;
-    font-size: 1.5rem;
+    font-size: 1.75rem;
     font-style: italic;
     margin-bottom: 1%;
 }
 #personal_life > p ~ h1 {
     margin-top: 3%;
 }
 #personal_life p {
-    font-size: 1rem;
+    font-size: 1.25rem;
     text-align: center;
-    line-height: 1.25rem;
+    line-height: 1.5rem;
     color: v.$navy-blue;
 }

webpage/partials/_projects.scss

@@ -13,10 +13,11 @@
         margin: 0 auto;
         margin-top: 4%;
     }
+
     #project_menu a {
         display: block;
         padding: 5% 5%;
-        font-size: 1rem;
+        font-size: 1.5rem;
         background-color: v.$light-blue;
         color: v.$navy-blue;
         border: v.$navy-blue 2px solid;
@@ -28,6 +29,7 @@
     #project_menu a:hover {
         background-color: v.$gray-blue;
     }
+
     .project_container {
         width: 70%;
         padding: 3%;
@@ -47,13 +49,13 @@
     h1.project_title {
         text-align: center;
         font-weight: bold;
-        font-size: 2rem;
+        font-size: 2.5rem;
         padding: 1rem;
     }
     .project_desc p {
         padding: 1% 10%;
         text-align: center;
-        font-size: 1.25rem;
+        font-size: 1.5rem;
     }
     .project_divider ~ .project_content > .project_title {
         padding-top: 3%;
@@ -83,29 +85,30 @@
     .project_skills ul li {
         font-family: "Lucida Console", Courier, monospace;
         list-style-type: none;
-        font-size: 1rem;
+        font-size: 1.25rem;
         line-height: 1.2;
     }
     .project_skills ul li:before {
         content: ">";
     }
 
     .takeaways {
+        border: 2% solid v.$navy-blue;
         margin: 2% auto;
         width: 90%;
     }
     .takeaways h1 {
         text-align: center;
-        text-decoration: underline rgb(5, 37, 59);
-        font-size: 1.25rem;
+        text-decoration: underline v.$navy-blue;    //Why isn't this border working?
+        font-size: 1.5rem;
         margin-top: 5%;
         margin-bottom: 3%;
         font-weight: normal;
     }
     .takeaways p {
-        padding: 0 10% 2% 10%;
+        padding-bottom: 0.75rem;
         font-size: 1rem;
-        line-height: 1rem;
+        line-height: 1.25rem;
         text-align: center;
         font-style: italic;
     }

webpage/partials/_skills.scss

@@ -33,7 +33,7 @@
 
 #skills .column {
     text-align: left;
-    font-size: 1.25rem;
+    font-size: 1.5rem;
     margin: 1%;
     padding: 3%;
     background-color: v.$light-blue;
@@ -45,6 +45,6 @@ div#skills .column ul {
 div#skills .column ul p {
     margin: 0;
     margin-left: 7.5%;
-    font-size: 1.25rem;
+    font-size: 1.5rem;
     font-style: italic;
 }

webpage/styles/main.css

@@ -3,10 +3,6 @@
   margin: 0;
 }
 
-html {
-  font-size: 20px;
-}
-
 body {
   background-color: #091d3a;
 }
@@ -132,7 +128,7 @@ a:visited {
 }
 #skills .column {
   text-align: left;
-  font-size: 1.25rem;
+  font-size: 1.5rem;
   margin: 1%;
   padding: 3%;
   background-color: rgb(203, 239, 252);
@@ -145,7 +141,7 @@ div#skills .column ul {
 div#skills .column ul p {
   margin: 0;
   margin-left: 7.5%;
-  font-size: 1.25rem;
+  font-size: 1.5rem;
   font-style: italic;
 }
 
@@ -158,7 +154,7 @@ div#skills .column ul p {
   #project_menu a {
     display: block;
     padding: 5% 5%;
-    font-size: 1rem;
+    font-size: 1.5rem;
     background-color: rgb(203, 239, 252);
     color: #091d3a;
     border: #091d3a 2px solid;
@@ -189,13 +185,13 @@ div#skills .column ul p {
   h1.project_title {
     text-align: center;
     font-weight: bold;
-    font-size: 2rem;
+    font-size: 2.5rem;
     padding: 1rem;
   }
   .project_desc p {
     padding: 1% 10%;
     text-align: center;
-    font-size: 1.25rem;
+    font-size: 1.5rem;
   }
   .project_divider ~ .project_content > .project_title {
     padding-top: 3%;
@@ -223,28 +219,29 @@ div#skills .column ul p {
   .project_skills ul li {
     font-family: "Lucida Console", Courier, monospace;
     list-style-type: none;
-    font-size: 1rem;
+    font-size: 1.25rem;
     line-height: 1.2;
   }
   .project_skills ul li:before {
     content: ">";
   }
   .takeaways {
+    border: 2% solid #091d3a;
     margin: 2% auto;
     width: 90%;
   }
   .takeaways h1 {
     text-align: center;
-    text-decoration: underline rgb(5, 37, 59);
-    font-size: 1.25rem;
+    text-decoration: underline #091d3a;
+    font-size: 1.5rem;
     margin-top: 5%;
     margin-bottom: 3%;
     font-weight: normal;
   }
   .takeaways p {
-    padding: 0 10% 2% 10%;
+    padding-bottom: 0.75rem;
     font-size: 1rem;
-    line-height: 1rem;
+    line-height: 1.25rem;
     text-align: center;
     font-style: italic;
   }
@@ -288,7 +285,7 @@ div#skills .column ul p {
 
 #personal_life h1 {
   text-align: center;
-  font-size: 1.5rem;
+  font-size: 1.75rem;
   font-style: italic;
   margin-bottom: 1%;
 }
@@ -298,9 +295,9 @@ div#skills .column ul p {
 }
 
 #personal_life p {
-  font-size: 1rem;
+  font-size: 1.25rem;
   text-align: center;
-  line-height: 1.25rem;
+  line-height: 1.5rem;
   color: #091d3a;
 }
 
@@ -315,7 +312,7 @@ footer {
 
 footer p {
   color: rgb(203, 239, 252);
-  font-size: 0.5rem;
+  font-size: 0.75rem;
   font-style: italic;
   text-align: center;
 }