@import url('https://fonts.googleapis.com/css2?family=Public+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');

body {
    font-family: 'Public Sans', sans-serif; /* Global font family */
}

header {
    background: url('images/IndexHeader.png') no-repeat center bottom;
    background-size: cover;
    height: 400px;
    color: rgb(0, 0, 0);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 10px;
    text-align: center;
    font-size: 2.25rem;
    max-width: 100%;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    header {
        font-size: 1.8rem; /* Adjust the font size for smaller screens */
        padding-bottom: 20px; /* Increase space at the bottom if needed */
    }
}

.nav-link {
    text-decoration: none;
    color: black;
    padding: 10px;
    transition: transform 0.2s, color 0.2s; /* Smooth animation */
}

.nav-link:hover {
    transform: scale(1.1); /* Slightly enlarges the link */
    color: #217c8a; /* Changes color on hover */
}

.nav-link.active {
    font-weight: bold;
    color: #0d574d; /* Keeps the active link highlighted */
}

/* Row layout */
.row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
}

.leftcolumn {
    flex: 3;
    min-width: 300px;
    max-width: 1000px;
    margin-left: auto !important;
    margin-right: auto !important;

    background-color: #b3d4da; 
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.rightcolumn {
    background-color: #b3d4da; /* Blue background */
    padding: 20px; /* Adds some space inside the box */
    border-radius: 10px; /* Makes the corners rounded, if you like */
    color: white; /* Makes text white for good contrast */
    width: 150px; /* Adjust as needed */
    flex: 1;
    margin-left: auto !important;
    margin-right: auto !important;
    min-width: 200px;
    max-width: 500px;
}

.leftcolumn hr {
    border: none; /* Removes default border */
    height: 3px; /* Line thickness */
    background-color: #217c8a; /* Line color */
    margin: 50px 0; /* Adds space above and below the line */
    width: 100%; /* Ensures the line spans across the full width */
    box-sizing: border-box; /* Ensures the line size is calculated including padding and borders */
}

.leftcolumn a,
.leftcolumn a:visited,
.rightcolumn a,
.rightcolumn a:visited {
    color:#0d574d; 
    font-weight: 600;
}
.leftcolumn a:hover,
.rightcolumn a:hover {
    color: #217c8a;
}

.rightcolumn-img-index {
    max-width: 200px;
    max-height: 200px; 
    width: auto;
    align: left;
    border-radius: 20px; /* optional for rounded edges */
}

/* Mobile responsiveness */
@media screen and (max-width: 800px) {
    .row {
        flex-direction: column;
    }

    .leftcolumn, .rightcolumn {
        width: 100%;
    }
}

/* Card styling */
.card {
    background-color: transparent;
    padding: 20px;
    margin-top: 20px;
}

/* Content with image styling */
.content-with-image {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    gap: 20px;
}

/* Only applies to blog posts on the index page */
.index-style {
    display: flex; /* Enables side-by-side layout */
    align-items: flex-start; /* Aligns items at the start (top) */
    gap: 20px; /* Adds space between the image and text */
    border-style: none !important;
    border-radius: 50px !important;
}

/* Styling for the blog headline on index */
.blog-headline {
    box-align: center;
    font-size: 2rem; /* Make it bigger */
    font-weight: bold; /* Bolder text */
    color: black;/* Change to the color you want */
}

.blog-img-index {
    max-width: 200px;
    max-height: 400px; 
    width: 100%;
    height: auto;
    border-radius: 20px; /* optional for rounded edges */
}

.blog-img-fullpost {
        max-width: 400px;  /* Adjust based on your layout */
        width: 100%;
        height: auto;
        margin-right: 20px;
        display: block;
        border-radius: 20px;
        margin-bottom: 20px;
}

.blog-subtext {
    font-size: smaller;
    font-family: 'Public Sans', sans-serif; /* Global font family */
}

.blog-bullets {
    list-style-type: disc; /* or square, circle, etc */
    padding-left: 2rem;    /* indent the bullets from the margin */
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    color: #333;           /* darker text */
    font-size: 1rem;
    line-height: 1.6;
}

.blog-bullets li {
    margin-bottom: 0.5rem;
}


@media (max-width: 1000px) {
    .content-with-image {
        flex-direction: column; /* Stacks the image and text when the screen is narrow */
        align-items: center; /* Centers both the image and the text */
    }
}

.text-to-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.text-to-right h2 {
    margin: 0; /* Removes extra space around h2 */
    font-size: 2rem;
    text-align: left; /* Title aligned to the left */
    line-height: 1; /* Ensures that the line-height doesn't push the title down */
}

.blog-body {
    text-align: left;
    font-family: 'Public Sans', serif;
    color: black;
    background-color: transparent;
}

/*Bio styling */
.bio-img {
    width: 200px; 
    height: auto;
    border-radius: none; 
    margin-top: 30px;
}

.bio-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    max-width: 1000px; 
    margin: 0 auto;
    padding: 20px;
    flex-wrap: no wrap;
}

@media (max-width: 768px) {
    .bio-container {
        flex-direction: column; /* Stacks the image and text when the screen is narrow */
        align-items: center; /* Centers both the image and the text */
    }
}

.bio-text {
    font-family: 'Public Sans', sans-serif;
    column-count: 1; /* Prevents the text from breaking into columns */
    line-height: 1.6;
    text-align: left;
}

/*Resume styling */
.resume_h1{
    font-family: "Alfa Slab One", serif;
    font-size: 3rem;
    font-weight: 400;
    font-style: normal;
    text-align: center; /* Centers text inside .bio-text */
    width: 80%;
    max-width: 1000px; 
    margin: 0 auto;
}

.resume_h2{
    font-size: 2rem;
    font-weight: 400;
    font-style: normal;
    text-align: center; /* Centers text inside .bio-text */
    width: 80%;
    max-width: 1000px; 
    margin: 0 auto;
}

.resume_body_bold{
    font-family: 'Public Sans', sans-serif;
    text-align: left; 
    width: 80%;
    max-width: 1000px; 
    margin: 0 auto;
    padding: 0 20px;
}

.resume_body_neutral{
    font-family: 'Public Sans', sans-serif;
    font-weight: 300;
    text-align: left; 
    width: 80%;
    max-width: 1000px; 
    margin: 0 auto;
    padding: 0 20px;
}
.resume_footnote{
    font-family: 'Public Sans', sans-serif;
    font-weight: 200;
    font-style: italic;
    font-size: 0.9 rem;
    text-align: center; 
    width: 80%;
    max-width: 1000px; 
    margin: 0 auto;
    padding: 0 20px;
}

/* Footer styling */
footer {
    text-align: center;
    padding: 20px;
    background-color: #f4f4f4;
}

footer p {
    font-size: 1rem;
}

/* Navigation styling */
nav ul {
    text-align: center;
    list-style: none;
    padding: 0;
}

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

nav ul li a {
    color: rgb(0, 0, 0);
    text-decoration: none;
}