.profile {
    display: flex; flex-direction: row;
}
.profile > .pfPic {
    width:13.9em; aspect-ratio:1; margin:0.5em;
}
.profile > .pfPic > a > img {
    width:100%; aspect-ratio: 1; border-radius:50%;
}
.profile > .column {
    display: flex; flex-direction: column;
    width:calc(100% - 4em);
    margin-left:0.25em;
}
.profile > .column > div {
    font-size: 1.5em;
    width:calc(100% - 1em); margin:0.5em;
}
.profile > .column > .links > a > img { width:1em; height:1em; filter:invert(); }
.barHoriParent {
    display:flex; flex-direction:column; align-items: center;/* center it */
    width:100% !important; margin:0 !important;
}
.barHoriParent > .barHori {
    display: block;
    width:calc(100% - 1em); height:2px;
    background-color: var(--bs-dark-border-subtle);
}



#cardList {
    display: flex; flex-flow:row wrap;
    margin:0.75em;
}
cardParent {
    width:25em;
    margin:0.75em;
    display:flex; flex-direction: column; align-items:center;/* center content */
}

gitCard {
    background-color:var(--bs-dark-border-subtle);
    border-radius: 2em;
    width:100%;
    display:flex; flex-direction: column; align-items:center;/* center content */
}

gitCard > header { margin-top:0.25em; font-size:1.75em; }

gitCard > inner {
    background-color: var(--bs-secondary-bg); width:100%;
    display:flex; justify-content: center;
    cursor:pointer;
}
gitCard > inner > img {
    width:23em;
    margin:1em;
    aspect-ratio: 16/9;
    
    user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;/* keep user from selecting image */
}
gitCard > inner > img[alt="true"] {
    width:12.9em; aspect-ratio: 1;
    filter:invert();
}
gitCard > inner > img[alt="pfPic"] { width:13.9em; aspect-ratio: 1; border-radius:50%; margin:0.5em }

gitCard > footer {
    width:90%;
    margin-top:0.25em; margin-bottom:2.25em;
    max-height:0px;
    overflow: hidden;

    font-size:1.125em;
    display: flex; flex-direction:column; justify-content: center; align-items: center;
}
gitCard[show="true"] > footer { max-height:1000px; margin-bottom:1.25em; }
gitCard > footer > a.link-homepage > img { width:1em; height:1em; filter:invert(); }
gitCard > footer > div { width: 100%; }/* card description */

@media screen and (max-width: 55.5em) {/* for smaller screen */
    .profile {
        flex-direction: column;
        align-items: center;
    }
    .profile > .column > .links {
        display: flex; flex-direction: column; align-items: center;/* center content */
    }
    .profile > .column > .bio {
        font-size: 1.35em;
    }
    #cardList {
        margin-top:0.75em;
        margin-bottom:0.75em;
        justify-content: center;
    }
    cardParent {
        width:calc(100vw - 4em);
        margin:0.75em;
    }
    gitCard {
        width:100%;
        margin:0;
    }
    gitCard > inner > img {
        width:calc(100% - 2em);
    }
    gitCard > inner > img[alt="true"] {
        width:calc(calc(100% - 2em) * 0.55);
    }
}