.bodyContainer {
  display: grid;
  min-height: 100vh;
  gap: 10px;
  grid-template-columns: 170px 1fr;
  grid-template-rows: 170px 1fr 80px;
  grid-template-areas: 
    "hd hd"
    "sd-l main"
    "ft ft";
  min-height: 100vh;
}

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "hd"
      "sd-l"
      "main"
      "ft";
  }
}

.headerLabel{
  display: flex;  /*Enable flexbox layout */
  justify-content: center;   /*Center items horizontally */
  align-items: center;    /*Center items veritcally (if needed) */
}

.headerLabel img{
  margin-left: 20px;
  margin-right: 20px;
}

header { grid-area: hd; /*background: #3498db; */ padding: 10px; text-align: center; }
main { grid-area: main; /*background: #ffffff;*/ padding: 10px; }
.sidebar-l { grid-area: sd-l; /*background: #f4f4f4;*/ padding: 10px; }
footer { grid-area: ft; background: #333333; padding: 10px; }


/* Navbar CSS */
.navbarUl {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 150px;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.navbarLi a {
  display: block;
  color: whitesmoke;
  padding: 8px 13px;
  margin: 10px 4px;
  text-decoration: none;
  border-color: whitesmoke;
  border-style: groove;
  width: 115px;
}

.navbarLi a.active {
  background-color: #04AA6D;
  color: white;
}

.navbarLi a:hover:not(.active) {
  background-color: #555555;
  color: white;
}

/* Footer CSS */
.footerUl {
  display: flex;                 /* Enable flexbox layout for the list */
  list-style: none;             /* Remove default bullet points */
  padding: 0;                   /* Remove default padding */
  margin: 0;                    /* Remove default margin */
}

.footerLi {
  margin-right: 20px;           /* Space between list items */
}

.footerLi a {
  display: block;
  color: whitesmoke;
  text-decoration: none;
}

.footerLi:last-child {
  margin-right: 0;              /* Remove margin after the last item */
}

.footerLabel{
  display: flex;  /*Enable flexbox layout */
  justify-content: center;   /*Center items horizontally */
  align-items: center;    /*Center items veritcally (if needed) */
}

/*Main Index CSS*/
.container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "welcome welcome updates"
    "links links updates"
    "buttons buttons extra";
}

.welcome { grid-area: welcome; }

.links { grid-area: links; }

.buttons { grid-area: buttons; }

.extra { grid-area: extra; }

.updates { grid-area: updates; }

.sectionIndex {
  border-color: black;
  border-style: solid;
  padding: 5px;
  margin: 20px;
  background-color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

p {
  font-family: 'Courier New', monospace;
}

.updates{
  min-height: 850px; /*min height has to be defined for the over flow function to work */
  overflow: auto; /*enables the scroll once the text overflows */
}

/* Links section in main */
.linksUl{
  list-style-type: none;
}

.linksLi a {
  display: block;
  text-decoration: none;
}

/* Buttons section in main */
.button-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 5px 0;
}

/*About page*/

.sectionAbout {
  border-color: black;
  border-style: solid;
  padding: 5px;
  margin: 20px;
  background-color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/*Contact page*/

.sectionContact {
  border-color: black;
  border-style: solid;
  padding: 5px;
  margin: 20px;
  background-color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/*Guestbook page*/
.guestbookMain{
  grid-area: main; 
  padding: 10px; 
  display: flex;               /* Enable flexbox in main */
  justify-content: center;     /* Center embed horizontally */
  overflow: auto;              /* Enable scrolling */
}

.guestbook{
  flex: 1;                     /* Allow embed to grow and fill the space */
    min-height: 200px;          /* Define a minimum height */
    max-height: 100%;           /* Let it expand but never exceed parent */
    width: 100%;                /* Ensure it spans the full width */
    border: none;               /* Remove default borders */
}

/*Pics and Vids page */
.sectionPicsandVids {
  border-color: black;
  border-style: solid;
  padding: 5px;
  margin: 20px;
  background-color: rgba(255, 255, 255, 0.6);
  text-align: center;
}