body {
  margin: 0;
  padding: 0;
  font-family: 'Trebuchet MS', sans-serif;
  background-color: white;
  color: #333; /* grey text color */
  padding: 0 20px; /* Add padding to the right and left of the entire page */
}

.container {
  max-width: 1280px; /* Set maximum width for the container */
  margin: 0 auto; /* Center the container horizontally */
}

header {
  background-color: white; /* white background for the header */
  text-align: center;
}

.logo {
  margin-top: 20px; /* Add spacing above the logo */
}

.logo img {
  max-width: 400px; /* Adjust the max-width of the logo */
}

@media (max-width: 800px) {
  .logo img {
    max-width: 300px;
  }  
}

.tagline-container {
  margin-bottom: 10px; /* Add some space below the tagline */
  border-top: 1px solid rgb(82, 151, 174); /* Blue border on top */
  border-bottom: 1px solid rgb(82, 151, 174); /* Blue border on bottom */
  padding: 10px 0; /* Add padding above and below the tagline */
}

.tagline {
  display: inline-block; /* Ensure tagline container wraps around the text */
  font-size: 2em; /* Double the font size of the tagline */
  color: rgb(129, 149, 142); /* Change the color of the tagline */
  padding-top: 10px; /* Adjust spacing above the tagline */
  padding-bottom: 10px; /* Adjust spacing below the tagline */
}

.tagline-color-change {
  color: rgb(82, 151, 174); /* blue text color */
}

.tagline p {
  margin: 0;
  padding: 0;
}


@media (max-width: 1055px) {
  .tagline {
      font-size: 1.5em; /* Adjusted font size for smaller screens */
  }
}

nav {
  background-color: white; /* white background for the nav */
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  margin-right: 20px
}

nav ul li {
  margin-right: calc((100vw - 400px) / 7);
}

nav ul li.external-link {
  margin-right: 0;
  font-size: 1.5em;
}

@media (max-width: 800px) {
  nav ul li.external-link {
    margin-right: -5px;
    font-size: 1.1em;
  }
}


nav ul li a {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: rgb(82, 151, 174); /* blue text color */
}

nav ul li.external-link a {
  margin-top: 12px;
  padding: 5px;
}

/* TODO: make the icons work with hover style by giving them transparent backgrounds
Also it would help if they were the same size images (add whitespace to make them the same size) */
nav ul li a:hover {
  color: rgb(103, 67, 155)
}

nav ul li a img {
  vertical-align: middle; /* Align the icons vertically */
}

nav ul li.linked-in a img {
  width: 30px; /* Set the width of the icons */
  height: auto; /* Maintain aspect ratio */
}

nav ul li.e-mail a img {
  width: 40px; /* Set the width of the icons */
  height: auto; /* Maintain aspect ratio */
}

/* Style for the active link */
nav ul li a.active {
  font-weight: bold;
  text-decoration: underline;
}

/* Existing CSS remains unchanged */

/* Existing CSS remains unchanged */

.content {
  max-width: 1280px; /* Set maximum width for the container */
  border-bottom: 1px solid rgb(82, 151, 174); /* Blue border on bottom */
  margin: 0 auto; /* Center the content horizontally */
  padding: 20px 0; /* Add padding above and below the content */
}

.content:last-child {
  border: none;
}

.content h2 {
  font-size: 24px; /* Set font size for the heading */
  margin-bottom: 10px; /* Add spacing below the heading */
}

.content p {
  margin-bottom: 5px; /* Add spacing below the paragraph */
}

.no-bullets {
  list-style-type: none; /* Remove bullets from the list */
  padding-left: 0; /* Remove default left padding */
  margin: 0;
}

.content img {
  display: block; /* Ensure the image is displayed as a block element */
  max-width: 100%; /* Make the image responsive */
  margin-top: 20px; /* Add spacing above the image */
  margin-left: auto;
  margin-right: auto;
}

/* Existing CSS remains unchanged */

.project-header {
  color: rgb(82, 151, 174); /* Set color for project header */
}

h3.project-header {
  margin-top: 0;
  margin-bottom: 10px;
}


.project-subheader {
  color: rgb(82, 151, 174); /* Set color for project subheader */
}

li.e-mail {
  color: rgb(82, 151, 174);
  position: relative;
}

li.e-mail .email-notice {
  font-size: 0.7em;
  color: rgb(82, 151, 174);
  position: absolute;
  display: none;
  top: 50px;
  right: -10px;
  text-align: right;
}

li.e-mail .email-notice input{
  width: 220px;
  font-size: 1em;
}

p.image-intro {
  margin-bottom: 0;
}

img.image-under-intro {
  margin-top: 0;
}

/* Other CSS rules remain unchanged */