Upload Fridge Detailed View CSS

HTML and CSS Files/mainFridgeDetailed.css

+body {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+}
+
+.detailedViewHeader {
+  background-color: rgba(40, 40, 40, 1);
+  width: 100vw;
+  color: white;
+  text-align: left;
+}
+.breadcrumbsHead {
+  font-family: "Roboto Bold";
+  font-size: 46px;
+  margin-left: 50px;
+}
+  
+.lowerPage {
+  width: 100vw;
+  display: grid;
+  grid-template-columns: repeat(6, 16.67vw);
+  text-align: left;
+  background-color: white;
+}
+
+.sidebar {
+  height: 200vh;
+  background-color: rgba(196, 196, 196, 1);
+  display: grid;
+  grid-template-rows: repeat(16, 6.25vh);
+  grid-template-columns: repeat(2, 8.33vw);
+  grid-column: 1/2;
+  
+  z-index:1;
+  left:0;
+}
+.sideItem {
+  display: grid;
+  background-color: rgba(104, 104, 104, 0.7);
+  transform: none;
+}
+.sideText {
+  font-family: "Roboto";
+  font-size: 24px;
+  color: white;
+  grid-column: 2/3;
+  margin-right: 5px;
+  text-align: right;
+}
+#fridgeIcon {
+  background-color: white;
+  clip-path: circle();
+  height: 15vh;
+  grid-row: 1/6;
+  grid-column: 1/2;
+  margin: 10px;
+}
+
+#statsIcon {
+  background-color: white;
+  clip-path: circle();
+  height: 15vh;
+  grid-row: 4/9;
+  grid-column: 1/2;
+  margin: 10px;
+}
+#toBuyIcon {
+  background-color: white;
+  clip-path: circle();
+  height: 15vh;
+  grid-row: 7/12;
+  grid-column: 1/2;
+  margin: 10px;
+}
+.fridge {
+  grid-row: 3/4;
+  grid-column: 1/3;
+}
+
+.stats {
+  grid-row: 6/7;
+  grid-column: 1/3;
+}
+.toBuy {
+  grid-row: 9/10;
+  grid-column: 1/3;
+}
+
+.pageSubhead {
+  grid-column: 2/7;
+  background-color: white;
+  display: grid;
+  grid-template-columns: 3vw repeat(6, 15.67vw) 3vw;
+  grid-template-rows: repeat(3, 6.25vh);
+}
+.subheader {
+  font-family: "Roboto Medium";
+  font-size: 10vh;
+  grid-column: 2/3;
+  text-align: center;
+}
+.addItem {
+  grid-column: 3/4;
+  grid-row: 2/3
+}
+.addItemButton {
+  margin-left: 20px;
+  margin-right: 20px;
+  background-color: rgba(175, 175, 175, 0.7);
+  border-radius: 100px;
+  transform: none;
+}
+.addItemText {
+  font-family: "Roboto Medium";
+  font-size: 18px;
+  color: white;
+  text-align: center;
+}
+.changeView {
+  grid-column: 5/6;
+  grid-row: 2/3;
+}
+.changeViewDropdown {
+  background-color: rgba(228, 228, 228, 0.7);
+  transform: none;
+}
+.changeViewText {
+  text-align: center;
+  font-family: "Roboto Medium";
+  font-size: 14px;
+}
+
+.detailedView {
+  grid-column: 2/7;
+  background-color: rgba(196, 196, 196, 1);
+  display: grid;
+  grid-template-columns: repeat (6, 13.89vw);
+  grid-row-gap: 10px;
+}
+.productHeader {
+  grid-column: 1/7;
+  background-color: white;
+  font-family: "Roboto Medium";
+  font-size: 36px;
+  text-align: center;
+}
+.tableHeader {
+  grid-column: 1/7;
+  display: grid;
+  background-color: rgba(40, 40, 40, 1);
+}
+.header {
+  background-color: rgba(40, 40, 40, 1);
+  color: white;
+  text-align: center;
+  font-family: "Roboto Medium";
+  font-size: 20px;
+}
+.itemRow {
+  grid-column: 1/7;
+  display: grid;
+  background-color: rgba(104, 104, 104, 1);
+}
+.item {
+  background-color: rgba(104, 104, 104, 1);
+  color: white;
+  text-align: center;
+  font-family: "Roboto";
+  font-size: 20px;
+}
+.name {
+  grid-column: 1/2;
+}
+.description {
+  grid-column: 2/3;
+}
+.quantity {
+  grid-column: 3/4;
+}
+.expiration {
+  grid-column: 4/5;
+}
+.purchase {
+  grid-column: 5/6;
+}
+.status {
+  grid-column: 6/7;
+}
+
+
+@font-face {
+  font-family: Roboto Bold;
+  src: url(Roboto-Bold.ttf);
+}
+@font-face {
+  font-family: Roboto Black;
+  src: url(Roboto-Black.ttf);
+}
+@font-face {
+  font-family: Roboto Medium;
+  src: url(Roboto-Medium.ttf);
+}
+@font-face {
+  font-family: Roboto;
+  src: url(Roboto-Regular.ttf);
+}
+
+
+.sideItem:hover {
+  background-color: rgba(104, 104, 104, 1);
+  transition: background-color .5s;
+}
+.listItem:hover {
+  background-color: rgba(237, 237, 237, 1);
+  transition: background-color .5s;
+}
+.addItemButton:hover {
+  background-color: rgba(175, 175, 175, 1);
+  transition: background-color .5s;
+}
+.changeViewDropdown:hover {
+  background-color: rgba(240, 240, 240, 1);
+  transition: background-color .5s;
+}
+
+a {
+  color: rgba(0,0,0,0);
+}
+
+.main{
+  margin-left: 23%;
+}