AAAA emergency fixes wip

demo/src/main/resources/static/css/home.css

@@ -15,9 +15,9 @@ body, html {
   background-color: var(--pale-yellow);
 }
 
-.container {
+.body {
   display: flex;
-  height: 100vh;
+  height: 100%;
 }
 
 /* Header Styles */
@@ -44,18 +44,26 @@ body, html {
   font-size: 2.5em;
   font-weight: bold;
   letter-spacing: 4px;
-  font-family: 'EB Garamond', serif;}
+  font-family: 'EB Garamond', serif;
+}
 
+.body-left {
+  flex-grow: 0;
+  width: 400px;
+}
+
+.body-right {
+  flex-grow: 0;
+  width: 400px;
+}
 
 /* Left Sidebar */
 .sidebar-left {
   overflow: hidden;
   margin: 25px;
-  position: fixed;
   border-radius: 20px;
   z-index: 10;
 
-  width: 200px;
   background-color: var(--peach);
   color: var(--dark);
   padding: 6px;
@@ -65,7 +73,7 @@ body, html {
 
   display: flex;
   flex-direction: column;
-  justify-content: flex-start; 
+  justify-content: space-between;
   align-items: center;
 }
 
@@ -94,18 +102,25 @@ body, html {
   border: none;
   padding: 0;
   cursor: pointer;
-}
-
-.sidebar-left .nav_icon img {
-  height: 40px;
+  height: 100px;
   width: auto;
   border-radius: 8px;
   transition: transform 0.2s ease;
 }
-.sidebar-left .nav_icon img:hover {
+.sidebar-left .nav_icon:hover {
   transform: scale(1.05);
 }
 
+/*.sidebar-left .nav_icon input {*/
+/*  height: 20px;*/
+/*  width: auto;*/
+/*  border-radius: 8px;*/
+/*  transition: transform 0.2s ease;*/
+/*}*/
+/*.sidebar-left .nav_icon input:hover {*/
+/*  transform: scale(1.05);*/
+/*}*/
+
 /* Create Icon */
 .create_icon {
   position: fixed;
@@ -130,13 +145,9 @@ body, html {
 .sidebar-right {
   margin: 25px;
   height: 75%;
-  position: fixed;
   border-radius: 20px;
-  z-index: 1;
+  z-index: 10;
 
-right: 0;
-
-  width: 200px;
   background-color: var(--peach);
   color: var(--dusty-red);
   padding: 5px;
@@ -146,7 +157,7 @@ right: 0;
 
   display: flex;
   flex-direction: column;
-  justify-content: space-between; 
+  justify-content: space-between;
   align-items: center;
 }
 
@@ -167,19 +178,19 @@ right: 0;
 
 /* Main Content */
 .main-content {
-  flex-grow: 0;
+  width: 100%;
+  flex-grow: 1;
   display: flex;
   justify-content: center;
   align-items: flex-start;
-margin-left: 300px;
-margin-right: 250px;
-margin-top: 25px;
 }
 
 .recipe-card {
+    width: 100%;
     display: flex;
     gap: 35px;
     justify-content: flex-start;
+    flex-direction: column;
 }
 
 .card {