.container {
    width: 98%;
    align-content: center;
    text-align: center;
    display: block; /* Activates flexbox layout */
    gap: 20px;
}

.field-required{
    color: #ff0000;
}
.header {
    margin-left: auto;
    margin-right: auto;
    align-content: center;
    display: inline-flex;
}

.header-title{
    margin-left: 16px;
    color:#4c4c4d;
    font-size:3.2em;
    margin-top: 36px;
}
.email-section {
    align-content: center;
    width: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
    margin-bottom: 24px;
}
@media screen and (min-width:850px){
    .header-title{
        font-size: 3.2em;
    }
}
@media screen and (max-width:600px) {
    .header-title {
        font-size: 2.5em;
    }
    .email-section{
        width:50%;
    }
}
.contact-me{
    color: #5a5b5c;
    font-size: 1.3em;
    padding-bottom: 24px;
}
.divider{
    border:1px solid #4c4c4d;
}

.title-image {
    width: 100px; /* Adjust size as needed */
    height: auto;
}
.line-spacing{
    margin-bottom: 12px;
}

.text-alignment{
    text-align:left;
}

.gallery-container {
    display: flex; /* Activate Flexbox */
    flex-wrap: wrap; /* Allow items to wrap onto the next line */
    justify-content: space-between; /* Distribute space between items for even spacing */
    gap: 10px; /* Optional: Adds a gap between images */
    padding: 10px;
}

.image-wrapper {
    /* Each item takes up slightly less than 50% to account for gaps/margins */
    flex: 1 1 calc(50% - 10px);
    box-sizing: border-box; /* Ensures padding/border are included in the 50% width */
    max-width: calc(50% - 10px); /* Ensures max width is correct */
}

    .image-wrapper img {
        width: 100%; /* Make images responsive to their container width */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Removes extra space below the image */
        object-fit: cover; /* Optional: Ensures images fill their wrapper area nicely */
    }


.input-field {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529; /* Text color */
    background-color: #fff; /* Background color */
    background-clip: padding-box;
    border: 1px solid #ced4da; /* Border color */
    appearance: none; /* Remove default browser styling */
    border-radius: 0.25rem; /* Slightly rounded corners */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .input-field:focus {
        color: #212529;
        background-color: #fff;
        border-color: #86b7fe; /* Blue border on focus */
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Blue glow effect on focus */
    }

    .input-field:disabled,
    .input-field[readonly] {
        background-color: #e9ecef; /* Grayed out background for disabled/readonly */
        opacity: 1;
    }

/* Styling the horizontal rule */
    hr.footer-line {
        border: 0;
        height: 1px;
        background-color: #ccc; /* Light grey line */
        margin: 20px 0; /* Space above and below the line */
    }

    /* Styling the footer container */
    .footer {
        text-align: center; /* Center the text */
        font-size: 0.9em; /* Smaller font size for the copyright notice */
        color: #666; /* Muted color for the text */
        padding-bottom: 20px; /* Space below the copyright text */
    }