body { font-family: Oswald, sans-serif; background-color: rgb(236, 227, 216); }
h1 { color: #000000; text-align: center; font-size: 2em;}
header, nav, main, aside, footer { padding: 20px; margin: 0px; border: 0px solid #835f5f; }
header { background-color: #74817b; }
header {font-family: Oswald, sans-serif; font-size: 20px; color: #000000; text-align: center;}
header p { text-align: center;}
.header-content { display: flex; justify-content: center; align-items: center; }
.header-content .text-content { text-align: center; justify-content: center; margin-right: 30px; }
nav { text-align: right; }
nav a { margin: 0 10px; text-decoration: none; color: #000000; }
.nav-link { color:#000000}


.container { display: inline-flex 2;}
.container img { max-width: 100%; }
.container aside { flex: 1; }
.container main { flex: 2; }
.image-container {
    display: flex;
    justify-content: space-between;
    align-items: left;
    width: 45%;
    padding: 10px; 
   /* border-radius: 10px;  Optional: Add border radius */
}

.image-container img {
    width: 45%; /* Adjust as needed */
    border-radius: 10px;
    height: 100px;
}
table { width: 100%; border-collapse: collapse; }
table, th, td { border: 1px solid #813939; padding: 10px; }

.education-content {
    display: flex;
    align-items: flex-start;
}

.education-content aside {
    flex: 1;
    margin-right: 20px;
}

.education-content .text-content {
    flex: 2;
    display: flex;
    flex-direction: column;
}

.education-content .top-right {
    margin-bottom: 20px;
}

.education-content .lower-right {
    margin-bottom: 20px;
}

.education-content .left {
    margin-bottom: 20px;
}

table {
    width: 50%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #813939;
    padding: 10px;
}
main img {
    display: block;
    margin: 0 auto;
    width: 100%; 
    border-radius: 10px;
    height: 300%;
}
/* Rotating images styling */
.image-rotator-container {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px; /* Add margin to separate from text */
}
.image-rotator {
    position: relative;
    width: 100%;
    height: 600px;
}

.rotating-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure images cover the container without stretching */
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.rotating-image.active {
    opacity: 1;
}
.image-banner {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px; /* Add margin to separate from text */
}

.image-banner img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensure the image covers the container without stretching */
}
/* Skills container styling */
.skills-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.left-column, .right-column {
    flex: 1;
    margin: 10px;
}

.left-column div, .right-column div {
    margin-bottom: 20px;
}

/* Media queries for responsive design */
@media (max-width: 768px) {
    body { font-size: 14px; } /* Adjust base font size for smaller screens */
    .header-content { flex-direction: column; } /* Stack header content vertically on smaller screens */
    .image-container, .volunteer-container { width: 100%; } /* Make containers full width on smaller screens */
    .skills-container { flex-direction: column; } /* Stack skill columns vertically on smaller screens */
}

@media (max-width: 480px) {
    body { font-size: 12px; } /* Adjust base font size for very small screens */
}
.image-volunteer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.image-container, .volunteer-container {
    flex: 1;
    margin: 10px;
}