/* Custom Styles for About Me Page */

/* Section spacing and alignment */
section {
    margin: 2rem 0;
    padding: 1rem;
}

hgroup {
    text-align: center;
    margin-bottom: 1.5rem;
}

.container {
    max-width: 960px;
    margin: auto;
    padding: 1rem;
}

/* General container styling */
.grid {
    max-width: fit-content;
    margin: auto;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    /* Ensures responsiveness */
    gap: 1.5rem;
    /* Adds space between divs */
}

/* Style for the div containing about details */
.grid .about-details {
    flex: 1;
    /* Takes up equal space as the image */
    min-width: 300px;
    /* Ensures it doesn't shrink too much */
    order: 1;
    /* Default order */
}

/* Style for the div containing the image */
.grid .about-image {
    flex: 1;
    /* Takes up equal space as the details */
    min-width: 300px;
    /* Ensures it doesn't shrink too much */
    text-align: center;
    /* Centers the image */
    order: 2;
    /* Default order */
}

/* Image styling */
.grid .about-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.about-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.container .about-image {
    flex: 1;
    /* Takes up equal space as the details */
    min-width: 300px;
    /* Ensures it doesn't shrink too much */
    text-align: center;
    /* Centers the image */
    order: 1;
    /* Default order */
}



/* Skills list styling */
#skills ul {
    list-style: none;
    padding: 0;
}

#skills ul li {
    padding: 0.5rem 0;
    font-size: 1.1rem;
}

/* Image styling */
/* figure img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
} */

figcaption {
    text-align: center;
    font-size: 0.9rem;
    color: #555;
}

#resume_button {
    text-align: center;
}

/* Responsive design for small screens */
@media (max-width: 768px) {
    .gid {
        flex-direction: column;
        /* Stack divs vertically */
    }

    .grid .about-details {
        order: 1;
        /* Details come first */
    }

    .grid .about-image {
        order: 2;
        /* Image comes second */
    }
}