body, html {
    font-family: 'Courier New', Courier, monospace;
    color: #000000;
    margin: 0 ; /* Add left and right margins */
    padding: 0;
    background-color: #f4f4f4;
    hyphens: auto; /* Enable hyphenation */
}


header {
    background-color: #e8f4f8;  /* Light blue background for the header */
    color: #005f73;             /* Darker blue for text */
    padding: 20px;
    text-align: center;
}

main {
    padding:2rem;
    background-color: #ffffff;  /* White background for main content */
    margin: 4rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Soft shadow around the main content box */
}

@media (max-width: 600px) {
    body, html {
        font-size: 15px; /* Reduces base font size on mobile devices */
    }
    main {
        padding: 0.4rem; /* Reduce padding on mobile screens */
        margin: 0rem; /* Reduce margin on mobile screens */
        
    }

}

section {
    padding: 10px;
    border-bottom: 1px solid #ececec; /* Light gray border for subtle separation */
}

@media (max-width= 600px) {
    section {
        padding: 1px; /* Reduce padding on mobile screens */
    }
    
}

section:last-of-type {
    border-bottom: none; /* Remove border from the last section */
}

footer {
    background-color: #d9e2ec;  /* Light gray background for the footer */
    padding: 10px 20px;
    text-align: center;
}

footer a {
    font-size: 19px; /* Adjust the font size as needed */
    text-decoration: underline !important;/* Underline the links */

}

.large-font {
    font-size: 19px; /* Adjust the font size as needed */
    
}

nav a {
    color: #0077cc;
    text-decoration: none;
    padding: 5px 10px;
    display: inline-block;
}

h1, h2 {
    color: #333;
    margin-bottom: 0.6rem;
}

main img {
    display: block;
    margin: 0 auto; /* Center the image horizontally */
    max-width: 90%; /* Limit the maximum width to prevent overflow */
    height: auto; /* Maintain aspect ratio */
}

main p {
    text-align: center; /* Center the caption text */
    
    font-size: 22px; /* Adjust the size as needed */
    color: #000000; /* Black color */
    
}

/* Style for the main text */
.bio-entry {
    font-size: 22px; /* Adjust the size as needed */
    color: #000000; /* Black color */
    text-align: left;
    margin-bottom: 0.4rem;
}

/* Style for the comments */
.bio-comment {
    font-family: 'Consolas', 'Courier New', Courier, monospace;
    font-size: 20px; /* Adjust the size as needed */
    color: #0b1d80; /* Dark gray color */
    margin-bottom: 1.25rem;
}

/* Style for publication items */
.publication-item {
    font-size: 20px; /* Adjust the size as needed */
    color: #000000; /* Black color */
    text-align: left;
    margin-bottom: 1rem;
    padding-left: 20px; /* Indent publication items */
    padding-right: 20px;
}

.bio-block {
    border: 1px solid black; /* Add a black border */
    padding: 10px; /* Add some padding inside the border */
    margin-left: 20px; /* Add left margin */
    margin-right: 20px; /* Add right margin */
    margin-bottom: 15px; /* Add bottom margin */
}

@media (max-width: 600px) {
    .bio-block {
        padding: 2px; /* Remove padding on mobile screens */
    }
}

.custom-link {
    color: #0077cc;
    text-decoration: none; /* Removes the underline */
}

.custom-link:hover, .custom-link:active, .custom-link:visited, .custom-link:focus {
    color: #0077cc;
    text-decoration: none; /* You can change this to 'none' if you don't want underline on hover */
}

.blue-text {
    color: blue;
    margin: 0;
    padding: 0;
}

.purple-text {
    color: purple;
    margin: 0;
    padding: 0;
}

ul.custom-list-circle {
    list-style-type: circle; /* Change bullet to circle */
}