completed sidebar base

src/styles/callout.scss

@@ -8,6 +8,7 @@
     border: var(--callout-border);
     border-radius: var(--callout-radius);
     background: var(--callout-background);
+    margin: 1vh;
 }
 
 .callout code,

src/styles/docs.scss

@@ -1,5 +0,0 @@
-.content{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}

src/styles/home.scss

@@ -1,4 +1,10 @@
-main {
+main{
+    display: unset;
+    flex-direction: unset;
+    align-items: unset;
+}
+
+.lines {
     background-image: url("/diagonal_lines_home.png");
     background-size: cover;
     background-repeat: repeat;

src/styles/main.scss

@@ -16,32 +16,39 @@ h1 {
     font-family: "Tanker-Regular", "Arial";
 }
 
+main{
+    display: flex;
+    justify-content: space-evenly;
+}
+
 .content {
+    display: flex;
+    flex-direction: column;
+    align-self: center;
     background-color: $highlight-primary;
     border-radius: 25px;
     border: 1px solid lighten($highlight-primary, 16%);
     box-shadow: 0px 4px 4px 0px #00000040;
     padding: 2vw;
-    margin-inline: 10vw;
+    width: 60vw;
     margin-bottom: 11vh;
 }
 .second-content {
+    align-self: center;
     text-align: center;
     $second-content-clr: #6e6e6e40;
     background-color: $second-content-clr;
     border-radius: 25px;
     border: 1px solid lighten($second-content-clr, 16%);
-    width: 80vh;
-    padding: 1vh;
+    width: 42vw;
+    padding: 2vh;
     margin-inline: 10vw;
     margin-bottom: 11vh;
 }
 
 .sidebar{
-    position: absolute;
     right: 0;
     top: 0;
-    margin-top: 10.5vh;
 }