html, body { height: 100%; }           /* allow flex children to size to viewport */
.container { min-height: 100dvh; display: flex; flex-direction: column; }

:root {
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    color:#ddd;
    background-color: #222;
}

body {
    margin: 0;
}

a {
    color: #fff;
}

.container {
    display: flex;
    flex-direction: column;
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
    background: linear-gradient(to bottom, #640199, #3b0170);
}

.hero img {
    height: 200px;
}

.socials {
    display: flex;
    flex-direction: row;
    justify-items: center;
    gap: 10px;
}

.projects {
    display: flex;
    flex-direction: row;
    margin-top: 25px;
    justify-content: space-around;
}
.project-item img { max-width: 100%; height: auto; }
.project-item iframe { width: 100%; }

.project-item {
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    width: 28%;
    background-color: #5b5557;
    padding: 16px;
}

.project-description {
    margin-top: 10px;
}

@media (max-width: 900px) {
    .projects {
        flex-direction: column;      /* was row */
        align-items: center;      /* full-width column items */
    }
    .project-item {
        width: 90%;
        margin-top:20px;
    }
}

.projects {  min-height: 0; overflow: auto; }
.hero { min-height: clamp(200px, 30dvh, 360px); }  /* responsive instead of fixed 300px */
.project-item { min-height: 0; gap: 24px; }                    /* allow cards to shrink within .projects */
.project-description { margin-top: auto; }          /* pin desc to bottom without extra space */
.project-item iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }