body {
  margin: 0;
  font-family: Volkhov, Georgia, Times, serif;
  min-height: 100vh;
  position: relative;
  font-size: 1.1em;
}

.navbar-title {
  background-color: #000E2F;
  color: #f2f2f2;
  padding: 4px 10px;
  font-size: 22px;
  font-weight: bold;
  text-align: left;
}

.titlecontent {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.topnav {
  overflow: hidden;
  background-color: #000E2F;;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  z-index: 100;
}

.topnavcontent {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2b4;
  text-align: center;
  padding: 6px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  /* background-color: #ddd; */
  background-color: #000E2F;
  color: white;
}

.topnav a.active {
  background-color: #000E2F;
  color: white;
}

.topnav .icon {
  display: none;
}


.titlecontent-short {
  display: none;
}

@media screen and (max-width: 560px) {
  /* .topnav a:not(:first-child) {
    display: none;
  } */

  /* hide not active links */
  .topnav a:not(.active) {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }  

  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .titlecontent {
    display: none;
  }
  .titlecontent-short {
    display: block;
  }
  .profile {
    display: inherit !important;
  }
  .profile-image-container {
    text-align: center;
  }
}

@media screen and (min-width: 561px) {
  .hide-on-large {
      display: none !important;
  }
}


/* Main Content */
.content {
  padding: 20px 0;
  max-width: 800px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

h1,
h2 {
  text-align: center;
}

a {
  color: #BD5D38;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Footer */
footer#footer-content {
  background-color: white;
  color: black;
  position: absolute;
  bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Education Page */
h3.clickable {
  color: #BD5D38;
  /* This is the link color you provided earlier */
  cursor: pointer;
  text-decoration: none;
}

h3.clickable:hover {
  text-decoration: underline;
}

.courses-list {
  display: none;
}

.hidden-content {
  display: none;
}

.read-more {
  cursor: pointer;
}

.imgfloat {
  float: left;
  padding-right: 10px;
  width: 160px;
}

.row-fluid {
  display: grid;
}
.row-fluid h3,
.row-fluid h4,
.row-fluid p {
  margin-top: 5px;
  margin-bottom: 5px;
}


.individual-header h3, .individual-header h4 {
  text-align: center;
  width: 100%;
}

.profile {
  display: flex;
  align-items: start;
}

.profile-image {
  max-width: 200px;
  margin-right: 20px;
}

.profile-details {
  flex: 1;
}

.profile-details p {
  margin-top: 0;
  margin-bottom: 0;
}

.navbar-wrapper {
  display: flex;
  align-items: start; /* Vertically center the logo and content */
  background-color: #000E2F;
  padding-top: 5px;
}

.navbar-logo {
  height: 100%; /* Adjust this if you want to change the logo's height */
  width: 60px; /* Adjust this based on your logo's width */
  padding-left: 4px;
}

.navbar-content {
  flex-grow: 1; /* Allow the content to take up the remaining space */
}

details summary {
  color: #BD5D38; /* Change the color to your desired color */
  font-weight: bold;
  cursor: pointer;
  padding-left: 20px;
}


/* Main container that holds the group columns */
.people-container {
  display: flex;
  flex-wrap: wrap; /* Allows the items to wrap onto the next line if there's not enough space */
  justify-content: space-between; /* Distributes the columns with equal space in between */
}

/* Individual group column */
.group-column {
  flex: 1; /* Allows the column to grow and take up available space */
  min-width: 30%; /* Minimum width of the column */
  box-sizing: border-box;
  /* padding: 1%; */
}

.group-column ul {
  padding: 0 20px;
}

.group-column li {
  padding: 4px 0
}

/* For screens smaller than 768px: 2 columns */
@media (max-width: 767px) {
  .group-column {
      min-width: 48%; /* Slightly less than 50% to account for padding */
  }
}

/* For screens smaller than 480px: 1 column */
@media (max-width: 479px) {
  .group-column {
      min-width: 96%; /* Slightly less than 100% to account for padding */
  }
}