Adjusted styling on main page to make the product listings span to just below the bottom of the page

static/css/style.css

@@ -22,6 +22,14 @@ html {
     padding: 2%;
     font-size: 160%;
     font-family: 'Courier New', Courier, monospace;
+    overflow-y: hidden;
+}
+
+body {
+    display: flex;
+    height: 103vh;
+    flex-direction: column;
+    gap: 1rem;
 }
 
 nav {
@@ -44,7 +52,7 @@ form {
 }
 
 #logo {
-    width: 12%;
+    width: 8rem;
     height: auto;
 }
 
@@ -104,14 +112,13 @@ a:active {
 
 .categories {
     background-color: var(--bg);
-    padding-top: 3rem;
     display: flex;
     justify-content: center;
 }
 
 .category {
     margin: .5rem 0rem;
-    padding: 0rem 1rem; 
+    padding: 0rem 1rem;
     border-left: .125rem solid var(--fg);
 }
   
@@ -121,38 +128,35 @@ a:active {
 
 .container {
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     width: 100%;
     flex-direction: column;
-}
-
-fieldset {
-    font-size: 1rem;
-    border-radius: 1rem;
-    font-family: consolas;
-}
-
-input, label, button {
-    font-size: inherit;
-    padding: .125rem .5rem;
-    /* the following ensures they're all using the same box-model for rendering */
-    -moz-box-sizing: content-box; /* or `border-box` */
-    -webkit-box-sizing: content-box;
-    box-sizing: content-box;
+    flex-grow: 1;
+    height: 90%;
 }
 
 .textbox {
-    font-size: inherit;
+    padding: .25rem;
+    margin-top: .25rem;
+    font-size: 1rem;
+    width: 15rem;
+    border: none;
     background-color: var(--fg);
 }
 
-.button {
+.search-button {
+    padding: .25rem .5rem;
+    margin-top: .25rem;
+    margin-right: .5rem;
+    background: #ddd;
+    font-size: 1rem;
+    border: none;
     background-color: orange;
 }
 
 .filter-pane {
-    width: 100%;
+    width: 70%;
     margin: .5rem 0rem;
     background-color: var(--bg-grad-3);
     border-radius: 1rem;
@@ -160,16 +164,17 @@ input, label, button {
 }
 
 .product-container {
-    width: 90%;
+    width: 95%;
     margin: .5rem 0rem;
     background-color: var(--bg-grad-3);
     border-radius: 1rem;
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
-    gap: 3rem 1.5rem;
-    padding: 2rem 1rem 2rem 1rem;
+    gap: 2rem 1.5rem;
+    padding: 2rem 1rem;
     transition: all 0.2s;
+    overflow-y: scroll;
 }
 
 .product {