html {
  /* background-image: url("backgroundd.png"); */
  background-color: #F2D3DD;
  background-size: cover;
  background-repeat: no-repeat;
}

/* in order to use grid-template-areas: I have to define the amount of rows & columns */

.container {
  align-content: center;
  background-color: #704930;
  border-radius: 8px;
  border: 8px solid #EBD650;
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-template-rows: repeat(4, auto); /* this is to create rows and ye thats basically it */
  gap: 0;
  position: relative;
  width: auto; /* putting width and margin to auto seemed to have allowed the container to be centered to the middle of the screen */
  margin: auto;
   margin-top: 2%; /* Pushes the entire grid down */
   
  grid-template-areas:
  "hd1 hd1 hd1 . . tt tt tt . . . ."
  "bnr bnr bnr . . mn mn mn lb . . ."
  ". . . . . . . . . . . ."
  ". . . . . . . . . . . .";
  
}

#header1 {
grid-area: hd1;
  background-image: url("background.png");
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  align-content: center;
  border-radius: 39px;
  border: 2px solid #EBD650;
  color: #F2D3DD; /* this is for text color */
  max-height: 89vh;
  margin-top: 10vh;/* Pushes the entire grid down */
  margin-left: 10px;
}

#banners {
grid-area:bnr;
  background: url("background.png");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 5px;
  border: 2px solid #EBD650;
  color: #F2D3DD; /* this is for text color */
  max-height: 25vh;
  margin-top: 10vh;/* Pushes the entire grid down */
  align-content: center;
  margin-left: 10vh;
}

#title {
grid-area: tt;
text-align: center;
align-content: center;
background-size: auto;
align-self: flex-start;
color: #F2D3DD;
padding: 0vh;
}

#leftbar {
grid-area: lb;
  align-content: center;
  background-color: transparent;
  border-radius: 1px;
  min-width: 100px;
    /* looks like using (px) fixed the issue of making the sidebar small */
    max-height: 100vh;
  height: auto;
   /* making height (auto) will adjust the sidebar to the same height as the main body */
  padding: 0;
  width: 70px;
  overflow: auto; /* Enable scrolling if the sidebar has too much content */
  position: relative;
}

#leftbar ul li {
  background-color: #F2D3DD;
  /* padding: 0em 1em; /*first value is up/down, and second value is left/right */ 
  list-style-type: none;
  text-decoration: none;
  justify-content: space-evenly;
  }

#main {
grid-area: mn;
  background-image: url("backgroundd.png");
  border-radius: 5px;
  border: 2px solid #EBD650;
  color: black;
  padding-right: 2vh;
  padding-left: 2vh;
  margin-left: 2vh; /* so it wouldnt be touching header container */
  position: absolute; /* my guess pos: absolute; is to keep the container from shifting entirely */
  bottom: 27vh; /* higher the number, the higher it goes */
  height: auto;
  max-height: 100vh;
}

#main > h1 {  
text-align: center; /* this is to set the header in main to the center */
}

#main > p {
  font-size: 19px;
}

@media (max-width: 1440px) {
  .container {
  background-color: #704930;
  border-radius: 8px;
  border: 8px solid #EBD650;
  display: grid;
  transform-origin: top center;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-template-rows: repeat(3, [row-start] 1fr); /* this is to create rows and ye thats basically it */
  gap: 0;
  width: 1824px;
  margin: auto;
   margin-top: 2%;/* Pushes the entire grid down */
}

.container > * {
  grid-column: col-start / span 12;
  grid-template-rows: repeat(3, [col-start] 1fr);
}

#header1 {
  background-image: url("background.png");
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  align-content: center;
  border-radius: 39px;
  border: 2px solid #EBD650;
  color: #F2D3DD; /* this is for text color */
  grid-column: col-start 1 / span 3;
  grid-row: 1;
  max-height: 98vh;
  margin-top: 10vh;/* Pushes the entire grid down */
  margin-left: 10px;
}

#banners {
  background: url("background.png");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 5px;
  border: 2px solid #EBD650;
  color: #F2D3DD; /* this is for text color */
  grid-column: col-start 1 / span 3;
  grid-row: row-start 2 / span 3;
  max-height: 25vh;
  margin-top: 10vh;/* Pushes the entire grid down */
  align-content: center;
  margin-left: 10vh;
}

#title {
grid-column: col-start 4 / span 8;
grid-row: 1;
text-align: center;
align-content: center;
background-size: auto;
align-self: flex-start;
color: #F2D3DD;
}

#leftbar {
  margin-top: 50vh; /* Pushes the entire grid down */
  align-content: center;
  background-color: transparent;
  border-radius: 1px;
  min-width: 100px;
    /* looks like using (px) fixed the issue of making the sidebar small */
  height: 80vh;
   /* making height (auto) will adjust the sidebar to the same height as the main body */
  padding: 0;
  width: 70px;
  overflow: auto; /* Enable scrolling if the sidebar has too much content */
  grid-column: col-start 11 / span 1;
  grid-row: 1;
}

#leftbar ul li {
  background-color: #F2D3DD;
  padding: 0em 1em; /*first value is up/down, and second value is left/right */ 
  list-style-type: none;
  text-decoration: none;
  justify-content: space-evenly;
  
}

#main {
  background-image: url("backgroundd.png");
  border-radius: 5px;
  border: 2px solid #EBD650;
  color: black;
  padding-right: 2vh;
  padding-left: 2vh;
  margin-top: 15vh;
  margin-left: 2vh; /* so it wouldnt be touching header container */
  grid-column: col-start 4 / span 7;
  grid-row: row-start 1 / span 2 ;
}

#main > h1 {  
text-align: center; /* this is to set the header in main to the center */
}

#main > p {
  font-size: 19px;
}
}

@media (max-width: 1024px) {
 .container {
  background-color: #704930;
  border-radius: 8px;
  border: 8px solid #EBD650;
  display: grid;
  transform-origin: top center;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-template-rows: repeat(3, [row-start] 1fr); /* this is to create rows and ye thats basically it */
  gap: 0;
  width: 1824px;
  margin: auto;
   margin-top: 2%;/* Pushes the entire grid down */
}

.container > * {
  grid-column: col-start / span 12;
  grid-template-rows: repeat(3, [col-start] 1fr);
}

#header1 {
  background-image: url("background.png");
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  align-content: center;
  border-radius: 39px;
  border: 2px solid #EBD650;
  color: #F2D3DD; /* this is for text color */
  grid-column: col-start 1 / span 3;
  grid-row: 1;
  max-height: 98vh;
  margin-top: 10vh;/* Pushes the entire grid down */
  margin-left: 10px;
}

#banners {
  background: url("background.png");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 5px;
  border: 2px solid #EBD650;
  color: #F2D3DD; /* this is for text color */
  grid-column: col-start 1 / span 3;
  grid-row: row-start 2 / span 3;
  max-height: 25vh;
  margin-top: 10vh;/* Pushes the entire grid down */
  align-content: center;
  margin-left: 10vh;
}

#title {
grid-column: col-start 4 / span 8;
grid-row: 1;
text-align: center;
align-content: center;
background-size: auto;
align-self: flex-start;
color: #F2D3DD;
}

#leftbar {
  margin-top: 50vh; /* Pushes the entire grid down */
  align-content: center;
  background-color: transparent;
  border-radius: 1px;
  min-width: 100px;
    /* looks like using (px) fixed the issue of making the sidebar small */
  height: 80vh;
   /* making height (auto) will adjust the sidebar to the same height as the main body */
  padding: 0;
  width: 70px;
  overflow: auto; /* Enable scrolling if the sidebar has too much content */
  grid-column: col-start 11 / span 1;
  grid-row: 1;
}

#leftbar ul li {
  background-color: #F2D3DD;
  padding: 0em 1em; /*first value is up/down, and second value is left/right */ 
  list-style-type: none;
  text-decoration: none;
  justify-content: space-evenly;
  
}

#main {
  background-image: url("backgroundd.png");
  border-radius: 5px;
  border: 2px solid #EBD650;
  color: black;
  padding-right: 2vh;
  padding-left: 2vh;
  margin-top: 15vh;
  margin-left: 2vh; /* so it wouldnt be touching header container */
  grid-column: col-start 4 / span 7;
  grid-row: row-start 1 / span 2 ;
}

#main > h1 {  
text-align: center; /* this is to set the header in main to the center */
}

#main > p {
  font-size: 19px;
}
}

@media (max-width: 900px) {
  .container {
  background-color: #704930;
  border-radius: 8px;
  border: 8px solid #EBD650;
  display: grid;
  transform-origin: top center;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-template-rows: repeat(3, [row-start] 1fr); /* this is to create rows and ye thats basically it */
  gap: 0;
  width: 1824px;
  margin: auto;
   margin-top: 2%;/* Pushes the entire grid down */
}

.container > * {
  grid-column: col-start / span 12;
  grid-template-rows: repeat(3, [col-start] 1fr);
}

#header1 {
  background-image: url("background.png");
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  align-content: center;
  border-radius: 39px;
  border: 2px solid #EBD650;
  color: #F2D3DD; /* this is for text color */
  grid-column: col-start 1 / span 3;
  grid-row: 1;
  max-height: 98vh;
  margin-top: 10vh;/* Pushes the entire grid down */
  margin-left: 10px;
}

#banners {
  background: url("background.png");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 5px;
  border: 2px solid #EBD650;
  color: #F2D3DD; /* this is for text color */
  grid-column: col-start 1 / span 3;
  grid-row: row-start 2 / span 3;
  max-height: 25vh;
  margin-top: 10vh;/* Pushes the entire grid down */
  align-content: center;
  margin-left: 10vh;
}

#title {
grid-column: col-start 4 / span 8;
grid-row: 1;
text-align: center;
align-content: center;
background-size: auto;
align-self: flex-start;
color: #F2D3DD;
}

#leftbar {
  margin-top: 50vh; /* Pushes the entire grid down */
  align-content: center;
  background-color: transparent;
  border-radius: 1px;
  min-width: 100px;
    /* looks like using (px) fixed the issue of making the sidebar small */
  height: 80vh;
   /* making height (auto) will adjust the sidebar to the same height as the main body */
  padding: 0;
  width: 70px;
  overflow: auto; /* Enable scrolling if the sidebar has too much content */
  grid-column: col-start 11 / span 1;
  grid-row: 1;
}

#leftbar ul li {
  background-color: #F2D3DD;
  padding: 0em 1em; /*first value is up/down, and second value is left/right */ 
  list-style-type: none;
  text-decoration: none;
  justify-content: space-evenly;
  
}

#main {
  background-image: url("backgroundd.png");
  border-radius: 5px;
  border: 2px solid #EBD650;
  color: black;
  padding-right: 2vh;
  padding-left: 2vh;
  margin-top: 15vh;
  margin-left: 2vh; /* so it wouldnt be touching header container */
  grid-column: col-start 4 / span 7;
  grid-row: row-start 1 / span 2 ;
}

#main > h1 {  
text-align: center; /* this is to set the header in main to the center */
}

#main > p {
  font-size: 19px;
}
}

@media (max-width: 480px) {
  .container {
  background-color: #704930;
  border-radius: 8px;
  border: 8px solid #EBD650;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto); /* this is to create rows and ye thats basically it */
  gap: 0;
  position: relative;
  width: auto; /* putting width and margin to auto seemed to have allowed the container to be centered to the middle of the screen (applicable to smaller screens) */
  margin: auto;
   margin-top: 2%; /* Pushes the entire grid down */
   margin-bottom: 0;
  grid-template-areas:
  "hd1 hd1 hd1 . . tt tt tt . . . ."
  "hd1 hd1 hd1 . . mn mn mn lb . . ."
  "bnr bnr bnr . . . . . . . . ."
  ". . . . . . . . . . . .";
}

#header1 {
  grid-area: hd1;
  background-image: url("background.png");
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  align-content: center;
  border-radius: 39px;
  border: 2px solid #EBD650;
  color: #F2D3DD; /* this is for text color */
  max-height: 100vh; /* stack overflow answer mentions that "max-height: 100vh" along with "height: auto:" should set height to be fixed to cover the contents body */
  margin: 10%;
  height: auto;
  position: absolute;
}

#banners {
  grid-area: bnr;
  background: url("background.png");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 5px;
  border: 2px solid #EBD650;
  color: #F2D3DD; /* this is for text color */
  height: 8vh;
  min-height: 3vh;
  margin-top: auto;/* Pushes the entire grid down */
  align-content: center;
  margin-left: 1vh;
  position: absolute;
  bottom: 40vh;
  width: 120%;
  
}

#title {
  grid-area: tt;
text-align: center;
align-content: center;
background-size: auto;
align-self: flex-start;
color: #F2D3DD;
}

#leftbar {
  grid-area: lb;
  margin-top: auto; /* Pushes the entire grid down */
  align-content: center;
  background-color: transparent;
  border-radius: 1px;
  min-width: 100px;
    /* looks like using (px) fixed the issue of making the sidebar small */
  height: 80vh;
   /* making height (auto) will adjust the sidebar to the same height as the main body */
  padding: 0;
  width: 70px;
  overflow: auto; /* Enable scrolling if the sidebar has too much content */
  position: relative;
}

#leftbar ul li {
  background-color: #F2D3DD;
  padding: 0em 1em; /*first value is up/down, and second value is left/right */ 
  list-style-type: none;
  text-decoration: none;
  justify-content: space-evenly;
  
}

#main {
  grid-area: mn;
  background-image: url("backgroundd.png");
  border-radius: 5px;
  border: 2px solid #EBD650;
  color: black;
  padding-right: 2vh;
  padding-left: 2vh;
  margin-top: 15vh;
  margin-left: 2vh; /* so it wouldnt be touching header container */
  position: absolute;
  top: -15vh;
  right:-7vh; /* further negative i go the more it moves to the right ? */
  align-content: center;
  height: 80VH; /* this allowed the background and border to stretch the entire body of main. The smaller i go the smaller the padding gets.*/
  min-height: 0;
}

#main > h1 {  
text-align: center; /* this is to set the header in main to the center */
}

#main > p {
  font-size: 15px;
  
}
}