body {
    font-family: 'Georgia', serif;
    background-color: white;
    color: black;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Center align the entire page content */
}

hr {
    border: none; /* Remove default border */
    border-top: 1px solid #09C; /* Set a 1px solid black border at the top */
}

.drop-cap::first-letter {
    font-size: 3em; /* Make the first letter 3 times the size of the rest */
    /*font-weight: bold; /* Make the first letter bold */
    float: left; /* Float the letter to the left */
    margin-right: 5px; /* Add some space between the letter and the rest of the text */
    line-height: 1; /* Adjust line-height */
}

.container {
    max-width: 1200px;
    margin: 20px auto;
    display: flex;
}

.left-column {
    width: 30%; /* Adjust width as needed */
    padding: 20px;
    border-right: 1px solid #ccc;
    box-sizing: border-box; /* Ensure padding is included in width */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
}

.left-column header img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.subhead {
    font-size: 24px;
    font-weight: 600; /* Moderately bold */
    margin-bottom: 20px;
    text-align: center; /* Center subhead text */
}

.menu {
    text-align: center; /* Center menu items */
}

.menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu ul li {
    margin-bottom: 10px;
    font-weight: 50; /* Moderately bold */
}

.menu ul li a {
    color: black;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.2s; /* Smooth transition for color change */
}

.menu ul li a:hover {
    color: #09C; /* Change color to #09C on hover */
    /* border-left: 1px solid #09C; /* Add a 1px left border */
    /* padding-left: 5px; /* Add some padding to avoid text sticking to the border */
    color: #09C;
}

.active_page {
    font-weight: 500; /* Make text bold */
    /* font-style: italic; /* Make text italic */
    border-left: 5px solid #09C; /* Add a 3px left border */
    padding-left: 5px; /* Add some padding to avoid text sticking to the border */
    color: #09C;
}

.right-column {
    flex: 1; /* Allow the content to take remaining space */
    width: 450px; /* Set the width of right column */
    padding: 30px;
    overflow-y: auto; /* Enable vertical scrollbar for overflow content */
    box-sizing: border-box; /* Ensure padding is included in width */
    border-left: 1px solid #09C; /* Makes the vertical dividing line the same as hr */
}

.text-container {
    width: 500px; /* Set the width of text container to 300 pixels */
    margin-right: auto; /* Align the text container to the left */
    max-height: calc(100vh - 100px); /* Adjust height of text container; subtract header height */
    overflow-y: auto; /* Enable vertical scrollbar for overflow content */
    text-align: left; /* Left-align text within text container */
    padding: 20px; /* Add padding inside the text container */
    padding-top: 0px; /* Add padding to the top of the text container */
}

.text-container p {
    margin-bottom: 20px;
}

/* Center align <h3> and <h4> headings */
.text-container h3,
.text-container h4 {
    text-align: center;
}

/* Webkit scrollbar styles */
.text-container::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
}

.text-container::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color of the track */
}

.text-container::-webkit-scrollbar-thumb {
    background: #09C; /* Color of the thumb */
    border-radius: 10px; /* Rounded corners for the thumb */
}

.text-container::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color of the thumb on hover */
}

/* Firefox scrollbar styles */
.text-container {
    scrollbar-width: thin; /* Makes scrollbar thin */
    scrollbar-color: #09C #f1f1f1; /* Color of the thumb and track */
}