made scss more responsive for desktops

src/styles/footer.scss

@@ -0,0 +1,11 @@
+footer {
+    display: inline-flexbox;
+    align-items: center;
+    text-align: center;
+    margin: 5vh;
+    bottom: 0;
+
+    a {
+        color: white;
+    }
+}

src/styles/home.scss

@@ -1,6 +1,13 @@
-.home-title-box {
-    position: absolute;
-    margin-top: 12vh;
+main {
+    background-image: url("/diagonal_lines_home.png");
+    padding-inline: 10vw;
+}
+
+.home-main-box {
+    padding-block: 8vh;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .home-title {
@@ -9,21 +16,17 @@
     font-family: "Tanker-Regular";
 }
 
-main {
-    background-image: url("/diagonal_lines_home.png");
-    height: 73vh;
-    margin-left: -1vw;
-    width: 90.4vw;
-    flex-shrink: 0;
-    padding-left: 10vw;
-}
-
-.using-engines {
-    display: inline-flex;
+.home-title-box {
+    justify-self: flex-start;
+    margin-right: 5vw;
 }
 
 .content {
-    position: absolute;
-    margin-left: 45vw;
-    margin-right: 8vw;
+    justify-self: flex-end;
+    margin: 0;
+    max-width: 450px;
+}
+
+.using-engines {
+    width: 21vw;
 }

src/styles/main.scss

@@ -18,12 +18,9 @@ h1 {
 .content {
     background-color: $highlight-primary;
     border-radius: 25px;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    display: flex;
-    padding: 1.8vw;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
+    box-shadow: 0px 4px 4px 0px #00000040;
+    display: flexbox;
+    padding: 2vw;
     margin: 4vw;
 }
 
@@ -32,6 +29,10 @@ b {
     color: $accent;
 }
 
-a {
-    color: $link;
+.content {
+    a {
+        color: $link;
+        text-decoration: underline;
+        margin: 0;
+    }
 }

src/styles/navbar.scss

@@ -0,0 +1,44 @@
+nav {
+    justify-self: flex-start;
+    display: inline-flex;
+}
+
+.navbar-entry {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.highlighter {
+    margin-top: -10px;
+}
+
+header {
+    padding-top: 2.5vh;
+    padding-bottom: 2.5vh;
+    margin-inline: 2.5vw;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    margin-right: 2.5vw;
+    width: 40px;
+}
+
+a {
+    color: white;
+    text-decoration: none;
+    text-align: center;
+    margin-inline: 0.9vw;
+}
+
+.active {
+    font-family: "Satoshi-Bold";
+    color: #7eca9c;
+}
+
+.social {
+    width: 22px;
+}