Add basic styling to main content

1 files changed, 26 insertions, 7 deletions

diff --git a/css/style.css b/css/style.css
index 3b668d1..dac691e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -23,10 +23,26 @@ body {
 
 #content {
   width: 100%;
+  max-width: 1400px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  background-color: #00000011;
+  display: flex;
+  flex-direction: column;
 }
 
 /* Reusable Elements */
 
+h1 {
+  font-size: 4rem;
+  font-weight: 700;
+  color: #000;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 h3 {
   font-size: large;
   font-weight: 700;
@@ -79,17 +95,16 @@ hr {
   transform: translate(2px, 2px);
 }
 
-
 /* Link Styling - https://codepen.io/team/css-tricks/pen/xxPORam */
 .link {
   text-decoration: none;
   position: relative;
-  color: #18272F;
+  color: #18272f;
   font-weight: 700;
 }
 
 .link::before {
-  content: '';
+  content: "";
   background-color: #00000044;
   position: absolute;
   left: 0;
@@ -97,7 +112,7 @@ hr {
   width: 100%;
   height: 2px;
   z-index: -1;
-  transition: all .2s ease-out;
+  transition: all 0.2s ease-out;
 }
 
 .link:hover::before {
@@ -108,7 +123,6 @@ hr {
   transform: scale(1.1);
 }
 
-
 @media (min-width: 768px) {
   .button {
     min-width: 120px;
@@ -130,8 +144,6 @@ hr {
   padding-bottom: 0.25rem;
 }
 
-
-
 #nav-links {
   display: flex;
   flex-direction: column;
@@ -144,6 +156,13 @@ hr {
   margin-bottom: 0.25rem;
 }
 
+#welcome {
+  height: 75vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
 /* Media Queries */
 
 @media screen and (max-width: 1000px) {