body {
  background-image: url('../pictures/bg.jpg'); /* Replace 'background.jpg' with the path to your background image */
  background-repeat: no-repeat;
  background-size: cover; /* This property ensures the background image covers the entire body */
  background-position: center center; /* Center the background image */
  background-attachment: fixed; /* Fix the background image even when scrolling */
  height: 100vh; /* Set the body height to fill the entire viewport */
  margin: 0; /* Remove any default margin to avoid white space */
  padding: 0; /* Remove any default padding to avoid white space */
  font-family: Arial, sans-serif; /* Optional: Set the font family for the body */
}

header {
  text-align: center; /* Center the navigation links */
  /*margin-top: 1in;*/ /* Add a 1-inch margin at the top */
}

header .topnav ul {
  padding: 0;
  list-style: none;
  font-weight: bold;
  display: inline-block; /* Set the display to inline-block to center the navigation links */
}

header .topnav li {
  display: inline;
  margin-right: 20px;
}

header .topnav a {
  text-decoration: none;
  color: #999;
}

header .topnav a:hover {
  text-decoration: underline;
}

.container {
  text-align: center; /* Center the content within the container */
  max-width: 100%; /* Set a maximum width for the container to avoid excessive width on larger screens */
  margin: 1in auto; /* Add a 1-inch margin at the top and center horizontally */
}

h1 {
  font-size: 3em;
  font-family: 'Helvetica', 'Arial', sans-serif;
}

p {
  font-size: 1.5em;
  line-height: 1.4em;
  color: #333;
}

footer {
  position: fixed;
  bottom: 1in; /* Adjust this value to change the margin from the bottom */
  left: 0;
  right: 0;
  text-align: center;
  border-top: 1px solid #d5d5d5;
  font-size: .8em;
  padding-top: 10px;
}

footer p {
  margin: 0;
}

ul.posts {
  margin: 20px auto 40px;
  font-size: 1.5em;
}

ul.posts li {
  list-style: none;
}


/* Add the styles for the slideshow */
.slideshow-container {
  max-width: 70%;
  position: relative;
  margin: 0 auto; /* Add this line to center the container horizontally */
}

.slide {
  display: none;
}

img {
  width: 100%;
}

/* Optional: Add styles for slide transition animation */
.fade {
  animation: fade 2s ease-in-out infinite; /* Change the animation duration and timing function as needed */
}

@keyframes fade {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 1; }
}

/* About section */
.about-section {
  text-align: justify;
  width: 70%;
  margin: 0 auto; /* Center the section horizontally */
  background-color: #FAF0DD; /* Replace #f2f2f2 with the desired background color */
  padding: 20px; /* Optional: Add padding to create some spacing around the content */
}

/* CSS for the Resume section */
.resume-section {
  width: 80%;
  margin: 0 auto; /* Center the section horizontally */
  background-color: #FAF0DD; /* Replace #f2f2f2 with the desired background color */
  padding: 20px; /* Optional: Add padding to create some spacing around the content */
}



/* Add styles for the contact links container */
.contact-links {
  display: inline; /* Make the container inline */
}

/* Add styles for the contact links */
.contact-links p {
  display: inline; /* Make each link appear inline */
  margin-right: 10px; /* Add some spacing between the links */
}


/* Add styles for the unordered list and education-item */
.left-align,
.education-item {
  text-align: left;
  margin-left: 20px;
}

/* Add styles for list items */
.left-align li {
  list-style-type: disc; /* Add bullet points for each list item */
  margin-bottom: 10px; /* Add some spacing between list items (optional) */
}

/* Add styles for the education-item divs */
.education-item div {
  margin-bottom: 0; /* Remove the default margin between the divs */
}

.project {
  text-align: justify;
  font-family: "Times New Roman";
  max-width: 80%;
  margin: 0 auto; /* Center the section horizontally */
  margin-bottom: 30px;
  border: 1px solid #ccc;
  padding: 20px;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 400px 400px; /* Adjust the height of each row as per your preference */
  gap: 10px; /* Adjust the gap as per your preference */
  width: 100%;
  height: 100%;
}

.grid-item {
  width: 100%;
  height: 100%;
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: fill; /* This will make the image fill the entire space without maintaining aspect ratio */
}

/* CSS to make the icons bigger */
.topnav li a {
  font-size: 35px; /* Adjust the font size as needed */
}

/*coursework styles*/
.coursework-section {
  font-family: "Times New Roman";
  width: 70%;
  margin: 0 auto;
  padding: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.course-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
}

.course-list li {
  text-align: left;
  font-size: 16px;
  width: 50%; /* Set each list item to occupy 50% of the width to create two columns */
  box-sizing: border-box; /* Ensure the padding is included in the width */
  padding: 5px; /* Optional: Add padding between list items */
}

.highlight {
  font-weight: bold;
}

.colored {
  color: red; /* You can change the color to your desired one */
}