body {
    font-family: 'Open Sans', sans-serif; /* This is a suggestion, replace it with your chosen font */
    color: #333333; /* A slightly off-black reduces harshness */
    background-color: #fff;
    line-height: 1.6;
    letter-spacing: 0.5px;
}

main > *:last-child {
    margin-bottom: 50px; /* This value can be adjusted as needed */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif; /* A different font for headings */
    color: #0056b3; /* A shade of blue for a pop of color */
    margin-bottom: 0.5em;
}

/* Specific styles for the About Me section */
#about-me p {
    font-size: 1.1em;
    text-align: justify;
    margin-bottom: 1em; /* Add space after paragraphs */
}

/* To make the first letter of the About Me section larger and bold */
#about-me p::first-letter {
    font-size: 200%;
    font-weight: bold;
}

nav {
    background-color: #007bff;
    padding: 10px 0;
}

nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    list-style-type: none;
    background-color: #007bff;
    flex-wrap: wrap;
}

nav li {
    display: inline-block; /* Change to inline-block for better spacing */
    margin: 5px; /* Add some space between items */
}

nav a {
    display: inline-block;
    padding:  10px;
    color: white;
    text-decoration: none;
    font-size: 1.2em;
    font-family: 'Arial', sans-serif;
    transition: background-color 0.3s;
}

nav a:hover, nav a.active {
    background-color: #0056b3;
    border-radius: 5px;
}
/* Side Navigation Bar styling */
.sidenav {
    height: 100%; /* Set the height to cover the entire viewport */
    width: 0; /* Initially, the sidebar is hidden */
    position: fixed; /* Fixed position */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    background-color: #007bff; /* Dark background color */
    overflow-x: hidden; /* Hide horizontal scrollbar */
    transition: 0.5s; /* Smooth transition */
    padding-top: 60px; /* Space for the close button */
    padding-bottom: 60px; /* Space for the close button at the bottom */
}

.sidenav ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */

}
.sidenav ul li {
        display: block;
    margin-bottom: 10px; /* Add space between each list item */
}
.openbtn {
    
    position: absolute; /* Position the button */
    padding-top: 0;
    top: 10px; /* Align to the top */
    left: 10px; /* Adjust the distance from the left */
    font-size: 36px; /* Adjust the font size */
    cursor: pointer; /* Show pointer cursor */
    background-color: #007bff;
    z-index: 1; /* Ensure button is above other content */
}

.openbtn:hover {
    background-color:#003399; /* Darken background on hover */
    color: white; /* Change text color on hover */
}



.main-content {
    margin-left: 250px; /* Adjust to leave space for sidenav */
    padding: 20px; /* Add padding to main content */
}



.content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.content p {
    font-family: 'Merriweather', serif; /* This is the font family you're applying */
    width: 60%;
    text-align: justify;
}

/* Profile photo styling */
.profile-photo {
    width: 30%;
    height: auto;
}

/* Keep space at the bottom */
main > *:last-child {
    margin-bottom: 50px;
}

@media (max-width: 768px) {
    .content {
        flex-direction: column;
        align-items: center;
    }

    .content ul {
        width: 100%;
        text-align: center;
    }

    .profile-photo {
        margin-top: 20px; /* Add some space above the logo on smaller screens */
        width: 50%; /* Larger width for smaller screens */
    }
}

footer {
    background-color: #0056b3; /* Blue background */
    padding: 10px 0;
    text-align: center;
}

footer a {
    margin: 0 15px;
    display: inline-block;
    vertical-align: middle;
}

footer img {
    width: 24px; /* Adjust if needed */
    height: auto;
    transition: transform 0.3s;
}

footer a:hover img {
    transform: scale(1.2); /* Slightly increase the size on hover */
}
#research-work h2 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px; /* Space below the title */
}

.research-item {
    margin-bottom: 30px; /* Space between each research article */
}

.research-item h3 {
    font-weight: bold;
    color: #0056b3; /* Blue color for titles */
    text-align: center; /* Center the titles */
    margin-bottom: 20px;
}

.research-content {
    display: flex;
    align-items: flex-start; /* Align items to the start of the flex container */
    justify-content: flex-start; /* Content aligned to the start */
    margin-bottom: 10px;
}

.research-content p {
    font-family: 'Merriweather', serif; /* This is the font family you're applying */
    width: 70%;
    text-align: justify;
}

.research-img {
    max-width: 30%; /* Adjust this value to increase the size of the image */
    height: auto; /* Maintain the aspect ratio of the image */
    margin-left: 20px; /* Space between the text and the image */
    border-radius: 15px; /* Optional: for rounded corners */
}

.button-container {
    text-align: center; /* Centers the button container */
    margin-top: 10px; /* Space above the button */
}

.paper-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block; /* Allows text-align center to work on the button */
}

.paper-button:hover {
    background-color: #0056b3;
}

#youtube-channel h2 {
    text-align: center;
    font-weight: bold;
    color: #0056b3; /* Blue color for headings */
    margin-bottom: 20px;
}

.channel-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.channel-content p {
    font-family: 'Merriweather', serif; /* This is the font family you're applying */
    font-size: 1.1em; /* Adjust the size as necessary */
    text-align: justify;
    line-height: 1.6; /* Adjust line height for better readability */
    margin-bottom: 20px; /* Space between paragraph and anything below it */
}

.youtube-img {
    width: 20%; /* Adjust to fit your layout */
    height: auto;
    margin-left: 20px;
}

.playlist-table {
    width: 100%;
    margin-top: 20px;
    text-align: center; /* Center text in table cells */
    border-collapse: collapse;
}

.playlist-table th {
    background-color: #007bff;
    color: white;
    padding: 10px;
}

.playlist-table td {
    padding: 10px;
    border: 1px solid #ddd; /* Light grey border for cells */
}

.playlist-table img {
    width: 30px; /* Adjust to fit the size of the YouTube logo */
    height: auto;
}

.table-title {
    text-align: center;
    margin-top: 40px; /* Adjust as needed for spacing */
    margin-bottom: 20px; /* Adjust as needed for spacing */
    /* Additional styling as needed, such as font size, color, etc. */
}

#personal-projects h2 {
    text-align: center;
    font-weight: bold;
    color: #0056b3;
    margin-bottom: 20px;
}

.project-item {
    margin-bottom: 30px;
}

.project-item h3 {
    font-size: 1.5em;
    text-align: center;
    color: #0056b3;
    margin-bottom: 10px;
}

.project-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.project-content p {
    font-family: 'Merriweather', serif; /* This is the font family you're applying */
    width: 70%;
    text-align: justify;
}

.project-img {
    width: 25%;
    height: auto;
    margin-left: 20px;
    border-radius: 5px;
}

.button-container {
    text-align: center;
}

.repo-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #28a745; /* GitHub green */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.repo-button:hover {
    background-color: #218838;
}

.project-table {
    width: 70%; /* Match width with the paragraph */
    margin-bottom: 20px; /* Space between the table and the master button */
    border-collapse: collapse;
    table-layout: fixed; /* Ensure consistent column widths */
}

.project-table th {
    background-color: #007bff;
    color: white;
    padding: 10px;
}

.project-table td {
    padding: 10px;
    text-align: center; /* Center text and logo within the cell */
    border: 1px solid #ddd; /* Light grey border for cells */
}

.github-logo {
    width: 24px; /* Adjust as needed */
    height: auto;
    vertical-align: middle; /* Align with the text if there is any */
}

.master-repo-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #28a745; /* GitHub green */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.master-repo-button:hover {
    background-color: #218838;
}

#work-experience h2 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
}

.work-entry {
    margin-bottom: 40px;
}

.work-entry h3 {
    text-align: center;
    margin-bottom: 5px;
}

.work-date {
    text-align: center;
    margin-bottom: 20px;
    font-style: italic;
}

.work-description {
    display: flex;
    align-items: flex-start; /* Aligns the content to the top */
    justify-content: space-between;
    margin-bottom: 20px;
}

.work-description > div {
    width: 70%;
}

.work-description p, .work-description ul {
    font-family: 'Merriweather', serif; /* This is the font family you're applying */
    text-align: justify;
    margin-bottom: 10px;
}

.work-description ul {
    list-style-type: disc; /* Adds bullets to the list */
    padding-left: 20px; /* Adds space before the list items */
}

.work-img {
    width: 13%; /* Adjust as needed to match the provided image size */
    height: auto;
    border-radius: 10px; /* Optional: for rounded corners */
}


#blog-corner h2 {
    text-align: center;
    font-weight: bold;
    color: #0056b3; /* Adjust the color to match your theme */
    margin-bottom: 20px;
}

#blog-corner p {
    font-family: 'Merriweather', serif; /* This is the font family you're applying */
    text-align: center; /* Center the introductory text */
    margin-bottom: 20px;
}

/* Style for blog titles */
summary {
    font-size: 1.5em; /* Larger font size for blog titles */
    text-align: center; /* Center-align blog titles */
    font-weight: bold;
    margin-bottom: 5px; /* Space below the title */
    cursor: pointer; /* Indicates this can be clicked */
    display: block; /* Block display to allow centering */
    padding: 10px; /* Padding for aesthetics */
    color: #0056b3; /* Adjust the color to match your theme, if needed */
    background-color: #f9f9f9; /* Background color for summary */
    border: 1px solid #ddd; /* Border for summary to match details */
    border-radius: 5px; /* Rounded corners for summary */
}

/* Custom arrow icon for summary elements */
summary::before {
    content: '▶'; /* Arrow for collapsed state */
    font-size: 1.2em; /* Size of the arrow */
    color: #0056b3; /* Color of the arrow, adjust as needed */
    margin-right: 10px;
}

/* Rotate arrow icon when details are open */
details[open] summary::before {
    content: '▼'; /* Arrow for expanded state */
}

/* Style for blog content inside the dropdown */
details > p {
    text-align: left;
    text-align: justify; /* Justify-align for the paragraph content */
    font-family: 'Merriweather', serif; /* Applying the font family if you have it */
    margin-left: 20px; /* Adjust as needed */
    margin-right: 20px; /* Adjust as needed */
}


details {
    background: #f9f9f9; /* Light background for dropdown content */
    margin-bottom: 20px; /* Space between blog posts */
    border-radius: 5px; /* Rounded corners for details */
}

#education h2 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
}

.education-entry {
    margin-bottom: 40px;
}

.education-entry h3 {
    text-align: center;
    color: #0056b3; /* Adjust the color to match your theme */
    margin-bottom: 20px;
}

.education-content {
    font-family: 'Merriweather', serif; /* This is the font family you're applying */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.education-content ul {
    width: 70%; /* Adjust as needed */
    list-style-type: none; /* Removes default list bullets */
    padding: 0;
}

.education-content ul li {
    margin-bottom: 5px; /* Spacing between list items */
}

.education-logo {
    width: 10%; /* Adjust as needed */
    height: auto;
}

/* Keep space at the bottom */
main > *:last-child {
    margin-bottom: 50px;
}

@media (max-width: 768px) {
    .education-content {
        flex-direction: column;
        align-items: center;
    }

    .education-content ul {
        width: 100%;
        text-align: center;
    }

    .education-logo {
        margin-top: 20px; /* Add some space above the logo on smaller screens */
        width: 50%; /* Larger width for smaller screens */
    }
}

#certifications h2 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
}

.certification-entry {
    text-align: center; /* Center everything in the certification entry */
    margin-bottom: 40px; /* Space between certification entries */
}

.certification-entry h3 {
    margin-bottom: 20px; /* Space between the title and the image */
    color: #0056b3; /* Adjust the color to match your theme */
}

.certification-image {
    max-width: 80%; /* Adjust as needed, ensures it doesn't get too large */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center the image */
    border: 1px solid #ddd; /* Optional: adds a light border around the image */
    border-radius: 5px; /* Optional: adds rounded corners to the image */
}

/* Keep space at the bottom */
main > *:last-child {
    margin-bottom: 50px;
}

#downloads h2 {
    text-align: center;
    margin-bottom: 30px;
}

#downloads table {
    width: 100%; /* Table takes full width of its container */
    border-collapse: collapse; /* Collapse borders */
    margin-top: 20px; /* Space below the title */
  }
  
  #downloads th,
  #downloads td {
    font-family: 'Merriweather', serif; /* This is the font family you're applying */
    text-align: center; /* Center-align text */
    padding: 10px; /* Padding inside cells */
    border: 1px solid #ddd; /* Border for cells */
  }
  
  #downloads th {
    background-color: #f9f9f9; /* Light background for header */
    color: #0056b3; /* Adjust the color to match your theme */
  }
  
  #downloads .download-button {
    padding: 5px 10px;
    background-color: #007bff; /* Adjust color to match your theme */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  
  #downloads .download-button:hover {
    background-color: #0056b3; /* Darker color on hover */
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    #downloads th, #downloads td {
      padding: 5px; /* Smaller padding on smaller screens */
    }
  }
  
  #dsa-codes-table a {
    /* Button-like styles */
    padding: 8px 12px; /* Add some padding */
    background-color: #007bff; /* Button color */
    color: white; /* Text color */
    text-decoration: none; /* Remove underline */
    border-radius: 4px; /* Rounded corners */
    display: inline-block; /* Allow padding and width */
    transition: background-color 0.2s; /* Smooth transition for hover effect */
}

#dsa-codes-table a:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

#dsa-codes-table {
    width: 100%; /* Sets the width to cover the full viewport width */
    table-layout: fixed; /* Ensures that each column is of equal width */
  }
  
  #dsa-codes-table th, #dsa-codes-table td {
    text-align: center; /* Centers text in the header and data cells */
    padding: 8px; /* Adds some padding for visual space around the content */
  }
  
  /* Ensure that your head and body cells do not wrap text */
  #dsa-codes-table th, #dsa-codes-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .about-me-section {
    text-align: center;
}

.download-resume-button {
    display: inline-block; /* or 'block' if you prefer */
    margin: 10px 0; /* Adjust the margin as needed */
    padding: 10px 20px; /* Adjust the padding as needed */
    background-color: #0044cc; /* Your button background color */
    color: white; /* Your button text color */
    text-decoration: none; /* Removes underline from links */
    border-radius: 5px; /* Adjust if you want rounded corners */
    /* Add other styles like font-family, font-size as per your design */
}

.download-resume-button:hover {
    background-color: #003399; /* Darker shade for hover effect */
}