Made more reactive styling on main page and template

src/routes/+layout.svelte

@@ -6,7 +6,14 @@
     .main-container {
         margin-left: 10%;
         margin-right: 10%;
-        padding-top: 3em;
+        padding-top: 2em;
+    }
+
+    @media (max-width: 800px) {
+        .main-container {
+            margin: 0em;
+            padding-top: 1em;
+        }
     }
 
     nav {
@@ -20,15 +27,30 @@
         height: 1.5em;
         border-radius: 4px;
     }
+
+    .fade {
+        -webkit-animation: fadeinout 1s linear forwards;
+        animation: fadeinout 1s linear forwards;
+    }
+
+    @-webkit-keyframes fadeinout {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+    }
+
+    @keyframes fadeinout {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+    }
 </style>
 
 <nav>
     <a href = "/">//Profile</a>
-    <a href = "test">//Repos</a>
-    <a href = "test">//Contact</a>
+    <a href = "/repos">//Repos</a>
+    <a href = "/contact">//Contact</a>
 </nav>
 
-<div class="main-container">
+<div class="main-container fade">
 
     <slot />