Flexbox implemetation isn't optimal, but done

code/frontend/src/Footer.css

@@ -4,28 +4,29 @@
   --Rotkehlchen-orange-default: #e79a0e;
 }
 
-
-
+/*mobile style first*/
 .footer {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: row;
+  align-items:flex-start;
   background-color: var(--Rotkehlchen-gray);
-  padding: 1rem 2rem;
+  padding: 1rem;
+  gap: 2rem;
+  text-align: center;
 }
 
 .footer-left {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  
+  align-items: center;
 }
 
 .footer-link {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  color: #000;
+  color: black;
   font-weight: 500;
   text-decoration: none;
 }
@@ -36,33 +37,29 @@
   transform: scale(1.5);
 }
 
-
 .footer-link img {
-
-  height: 22px;
-  object-fit:unset;
+  height: 1.5rem;
+  object-fit: unset;
   vertical-align: middle;
 }
 
-
-
-
-
 .footer-link.feather span {
   color: var(--Rotkehlchen-orange-default); 
   font-weight: bold;
-  
 }
 
 .footer-right {
   display: flex;
-  gap: 4rem;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
 }
 
 .footer-column {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  align-items: center;
 }
 
 .footer-column a {
@@ -74,3 +71,29 @@
 .footer-column a:hover {
   text-decoration: underline;
 }
+
+/*media adjusts styles for desktop */
+
+@media (min-width: 768px) {
+  .footer {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    text-align: left;
+    padding: 2rem 4rem;
+  }
+
+  .footer-left {
+    align-items: flex-start;
+  }
+
+  .footer-right {
+    flex-direction: row;
+    gap: 4rem;
+    align-items: flex-start;
+  }
+
+  .footer-column {
+    align-items: flex-start;
+  }
+}

code/frontend/src/Footer.tsx

@@ -2,6 +2,9 @@ import React from "react";
 import "./Footer.css";
 
 function Footer() {
+
+    
+
   return (
     <footer className="footer">
       <div className="footer-left">

code/frontend/src/header.css

@@ -21,10 +21,8 @@
   flex-direction: column;
   justify-content: center;
   flex-shrink: 0;
-
   color: var(--Rotkehlchen-orange-default);
   text-align: center;
-
   font-size: 24px;
   font-style: normal;
   font-weight: 700;