feat: added main styling

src/routes/style.css

@@ -1,11 +1,28 @@
 @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');
 
+:root{
+    --d1:1.0rem;
+    --d2:1.5rem;
+    --d3:2.25rem;
+    --d4:3.375rem;
+    --d5:5.0625rem;
+    --d6:7.59375rem;
+    --d7:11.390625rem;
+    --d8:17.0859375rem;
+    --d9:25.62890625rem;
+    --d10:38.443359375rem;
+
+    --border-round:var(--d2);
+}
+
 
 body {
 	color: var(--rp-moon-text);
 	background: var(--rp-moon-base);
     padding: 0;
-    margin: 0;
+    max-width: 60rem;
+    width:100%;
+    margin: auto;
     text-align: justify;
 }
 
@@ -17,20 +34,21 @@ pre {
 a {
     color: var(--rp-moon-iris);
     text-decoration: none;
-}
 
-a:visited {
+    &:visited {
         color: hsl(from var(--rp-moon-iris) h s calc(l * 0.85))
+    }
+}
+
+h1,h2,h3,h4,p:first-child {
+	#margin-top: 0;
 }
 
 
-.nav { 
+nav {
-    margin: auto;
     margin-top: 1rem;
 
-    padding: 1rem;
+    padding: 0 var(--d3) 0;
-    max-width: 60rem;
-    width: calc(100% - 2rem);
 
     font-family: "Fraunces", serif;
     font-optical-sizing: auto;
@@ -42,20 +60,21 @@ a:visited {
     font-size:1.728rem;
 }
 
-a.nav{
+nav a{
     margin: 1rem;
     margin-left: 0rem;
     padding-left: 0rem;
     color: var(--rp-moon-foam);
     #text-decoration: underline;
+    &:visited {
+        color: var(--rp-moon-foam);
+    }
 }
 
 main {
-    padding: 1rem;
+    #padding: 0 2rem 2rem;
-    margin: auto;
+    margin-top: var(--d3);
-    #margin-top: 1rem;
+    width: 100%;
-    max-width: 60rem;
-    width: calc(100% - 2rem);
     #box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
 }
 
@@ -86,7 +105,7 @@ h4{font-size: 1.728rem}
 }
 
 h4{
-    color: var(--rp-moon-rose);
+    color: var(--rp-moon-foam);
 }