body {
    font-family: Arial, sans-serif;
    padding: 10px;
}
header {
    background-color: #FFFFFF;
    padding: 10px 0;
    text-align: left; /* Align content to the left */
    width: 42%; /* Match the width of #main-content for alignment */
    margin: 0 auto; /* Center the header container */
}

header h1 {
    margin: 0; /* Remove default margin to align perfectly */
    padding: 0; /* Remove unnecessary padding */
    font-size: 30px; /* Adjust the font size as needed */
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
}
.circular {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
}

section#columns {
    width: 80%;
    margin: 10px auto;
    text-align: center;
}
section#main-content {
    width: 42%;
    margin: 50px auto;
    text-align: left;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #FFFFFF;
    padding: 20px 0;
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
}
.footer-icons {
    padding-right: 20px;

}
.footer-icons a {
    margin left: 10px;
    margin-right: 15px;
    text-decoration: none; /* Removes the underline */
}
.footer-icons a:hover {
    text-decoration: none; /* Optional: underline on hover for better UX */
}
.footer-icons i {
    font-size: 24px; /* Adjust the size as needed */
    color: grey; /* This will set the icon color to grey */
}
.indented-heading {
    display: block;
    margin-left: 20px;
}
.indented-paragraph {
    display: block;
    margin-left: 20px;
}
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active,
h2 a:link, h2 a:visited, h2 a:hover, h2 a:active, 
h3 a:link, h3 a:visited, h3 a:hover, h3 a:active {
    color: black;
    text-decoration: none;
}

h3 {
    margin-bottom: 10px;
}

 {
    color: black;
    text-decoration: none;
}
h4 {
    margin-bottom: 10px;
}

p {
    margin-top: 10px;
}
#page-divide {
}

#page-divide div {
}

#text-columns {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

#text-columns div {
    flex: 0 1 250px;
    margin: 1px;
    padding: 1px;
}
.video-container {
    display: flex;
    justify-content: center;
    margin-top: 100px;
    height: 100vh; /* Adjust the height as needed */
    width: 100%; /* Added width to occupy the full width of the screen */
}
@media (max-width: 768px) { /* Adjust for screen widths smaller than 768px */
    body {
        padding: 5px; /* Reduce padding for smaller devices */
    }
    header, section#main-content {
        width: 90%; /* Increase width to occupy more space */
        margin: 20px auto; /* Adjust the margin */
    }
    .video-container {
        margin-top: 20px; /* Reduce top margin for better spacing */
        height: auto; /* Adjust height to fit smaller screens */
    }
    #text-columns div {
        flex: 0 1 auto; /* Adjust flex property to avoid squishing text */
        margin: 5px; /* Add some spacing between columns */
    }
    section#main-content {
        width: 95%; /* Adjust width for mobile devices */
        margin: 10px auto; /* Smaller margin for better spacing */
    }
}