Updated css of sidebar scaling and subheader

HTML and CSS Files/mainFridgeList.css

@@ -19,16 +19,20 @@ body {
 .lowerPage {
   width: 100vw;
   display: grid;
-  grid-template-columns: repeat(6, 16.67vw);
+  grid-template-columns: repeat(6, 25vw);
+  grid-template-rows: 12.5vh 87.5vh;
   text-align: left;
+  position: fixed;
+  background-color: white;
 }
+
 .sidebar {
   height: 100%;
   position: fixed;
-  width: 265px;
   background-color: rgba(196, 196, 196, 1);
   display: grid;
   grid-template-rows: repeat(16, 6.25vh);
+  grid-template-columns: repeat(2, 12.5vw);
   grid-column: 1/2;
   
   z-index:1;
@@ -36,10 +40,9 @@ body {
 }
 .sideItem {
   display: grid;
-  grid-template-columns: repeat(4);
   text-align: center;
   background-color: rgba(104, 104, 104, 1);
-  opacity: .8;
+  opacity: 0.8;
   transform: none;
 }
 .sideItem:hover {
@@ -50,38 +53,38 @@ body {
   font-family: "Roboto";
   font-size: 24px;
   color: white;
-  grid-column: 6/7;
+  grid-column: 2/3;
   text-align: center;
 }
 #fridgeIcon {
   background-color: white;
 	clip-path: circle();
-	height: 100px;
-  grid-row: 2/6;
+	height: 15vh;
+  grid-row: 1/6;
   grid-column: 1/2;
   margin: 10px;
 }
 #recipesIcon {
   background-color: white;
 	clip-path: circle();
-	height: 100px;
-  grid-row: 5/9;
+	height: 15vh;
+  grid-row: 4/9;
   grid-column: 1/2;
   margin: 10px;
 }
 #statsIcon {
   background-color: white;
 	clip-path: circle();
-	height: 100px;
-  grid-row: 8/12;
+	height: 15vh;
+  grid-row: 7/12;
   grid-column: 1/2;
   margin: 10px;
 }
 #toBuyIcon {
   background-color: white;
 	clip-path: circle();
-	height: 100px;
-  grid-row: 11/15;
+	height: 15vh;
+  grid-row: 10/15;
   grid-column: 1/2;
   margin: 10px;
 }
@@ -102,10 +105,51 @@ body {
   grid-column: 1/3;
 }
 
+.pageSubhead {
+  grid-column: 2/7;
+  grid-row: 1/2;
+  background-color: white;
+  display: grid;
+  grid-template-columns: 3vw repeat(6, 15.67vw) 3vw;
+}
+.subheader {
+  font-family: "Roboto Medium";
+  font-size: 10vh;
+  grid-column: 2/3;
+  text-align: center;
+}
+.addItem {
+  font-family: "Roboto Medium";
+  font-size: 18px;
+  grid-column: 3/5;
+  margin-top: 40px;
+  margin-left: 54px;
+  text-align: center;
+}
+.changeView {
+  font-family: "Roboto Medium";
+  font-size: 14px;
+  grid-column: 5/7;
+  margin-top: 40px;
+  text-align: center;
+}
+
+.listView {
+  grid-column: 2/7;
+  grid-row: 2/3;
+  background-color: white;
+  display: grid;
+}
+
+
 @font-face {
   font-family: Roboto Bold;
   src: url(Roboto-Bold.ttf);
 }
+@font-face {
+  font-family: Roboto Medium;
+  src: url(Roboto-Medium.ttf);
+}
 @font-face {
   font-family: Roboto;
   src: url(Roboto-Regular.ttf);