/* sample3.css */

/* Default margin for larger screens */
body {
    margin: 5vw; /* 5% of the viewport width */
}

/* Adjust margin for tablets */
@media (max-width: 900px) {
    body {
        margin: 4vw;
    }
}

/* Adjust margin for mobile devices */
@media (max-width: 600px) {
    body {
        margin: 3vw;
    }
}

.justified-text {
    text-align: justify;
}

.button-container {
            text-align: center; /* Centers the buttons horizontally */
            padding: 20px;
        }

        .button-container button {
            margin: 10px; /* Adds space between buttons */
        }

/* Container for the biography and photo */
.container {
    padding: 20px;
    overflow: auto; /* Ensures proper clearing of floated elements */
    display: flex;
    align-items: center;     /* vertically align */
    gap: 40px;               /* space between image and text */
}


/* Right column for the image */
.photo {
    flex: 1;
    margin-left: 20px; /* Space between the image and the text */
    margin-bottom: 20px; /* Space below the image if the text is longer */
}

.photo img {
    max-width: 200px; /* Adjust the size of the image */
    height: auto;
    border-radius: 50%; /* Optional: to make the photo circular */
}

/* Left column for biography */
.bio {
    text-align: justify;
}

/* Project page image (larger and not rounded) */
.project-photo img {
    width: 100%;          /* Fill its container */
    max-width: 500px;     /* Larger size */
    height: auto;
    border-radius: 0;     /* No rounding */
}

/* Optional: control width distribution */
.project-photo {
    flex: 2;            /* Image takes more space */
}

.project-description {
    flex: 2;
}