/* The sidebar menu */
.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 13px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  text-align: center;
}

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 0px 16px;
  text-decoration: none;
  font-size: 22px;
  color: #ffffff;
  display: block;
}

.sidenav p {
  font-size: 22px;
  color: #ffffff;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #ffffff;
}

.footer {
  background-color: #000000;
  color: #ffffff;
  position: fixed;
  text-align: right;
  bottom : 0;
  width: 100%;
}

.main {
  margin-left: 160px;
}


.container {
  display: flex; 
  flex-direction: row;
  padding: 16px 32px 16px
}

.summary {
  padding: 0px 32px
}

.header {
  min-width : 170px;
  max-width : 170px;
  font-size : 18px;
}

.image-grid {
  /* Style the image grid as a 2x2 grid */
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns */
  grid-template-rows: repeat(2, 1fr);    /* Two rows, will expand if more images are added */
  gap: 8px;
  width: auto; 
  height: auto;
}

.image {
  width: 100%;
  overflow: hidden;
}

.image img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Or 'cover' if you prefer cropping */
}

.text {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 22;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}