:root {
    --body-background-fill:#1a1a1a;
    --navbar-background-fill:#0d0d0d;
    --footer-background-fill:#0d0d0d;
    --border-color:#0d0d0d;
    --body-text-color:#AFB6C3;
    --text-muted:#AFB6C3;
    --red-accent:#e0006c;
    --red-accent-darker:#C0005C;
    --body-font:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,input,select,textarea,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
    box-sizing:border-box;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
*{outline:none}
html,body{
    height:100%;
    min-height:100%;
    margin:0;
    padding:0;
    font-family:var(--body-font);
    font-size:18px;
}
body{
    background:var(--body-background-fill);
    color:var(--body-text-color);
    height:100%;
    display:flex;
    flex-direction:column;
    line-height:1.3
}
h1{
    font-weight:bold;
    font-size:24px;
    margin:0.5rem 0 1rem 0;
    padding:0 0.5rem;
}
p{
    margin:0.5rem 0;
    line-height:1.2;
}
header{
    margin-bottom:2rem;
    background-color:var(--navbar-background-fill);
}
.navbar-top,.navbar-bottom{
    padding:1rem 0;
    color:var(--body-text-color);
    text-transform:uppercase;
    text-align:center;
}
.navbar-top li,.navbar-bottom li{
    display:block;
    padding:0.5rem 1rem;
}
.navbar-top a,.navbar-bottom a{
    color:var(--body-text-color);
    text-decoration:none;
}
.navbar-top a:hover,.navbar-bottom a:hover{
    color:var(--red-accent-darker);
}
.navbar-top a.active,.navbar-bottom a.active{
    color:var(--red-accent);
}
li.sep{
    display:none;
}
.container{
    width:calc(100% - 1rem);
    margin:0 auto;
}
main{
    padding-bottom:2rem; 
}
footer{
    background-color:var(--footer-background-fill);
    margin-top:auto;
    padding:2rem 0;
}
.logo-wrap{
    text-align:center;
}
.logo-wrap img{
    width:300px;
    max-width:calc(100% - 1rem);
    height:auto;
}
.logo-wrap p{
    text-transform:uppercase;
    color:var(--text-muted);
}
.card-container{
    margin-top:2rem;
    display:flex;
    flex-flow:column wrap;
    justify-content:center;
    align-content:center;
    gap:1rem;
}
.bio-card{
    flex:0 0 300px;
    border:3px solid var(--border-color);
    position:relative;
    max-width:300px;
}
.bio-card img,.card img {
    display:block;
    width:100%;
    height:auto;
    box-sizing:border-box;
}
.card{
    flex:0 0 300px;
    position:relative;
    max-width:300px;
}
.bio-card-caption{
    position:absolute;
    width:100%;
    padding:0.5rem;
    left:0;
    bottom:0;
    background-color:var(--text-muted);
    color:var(--border-color);
    border-top:1px solid var(--border-color);
    opacity:0.85;
    text-align:center;
    text-transform:uppercase;
}
h1{ 
    text-transform:uppercase;
    color:var(--red-accent);
}
.card h1{
    text-align:center;
}
.bio{
    width:320px;
    max-width:100%;
}
a.btn{
    display:block;
    background:var(--red-accent);
    color:#fff;
    padding:0.75rem 1.5rem;
    border-radius:4px;
    text-decoration:none;
    font-weight:bold;
    transition:background-color 0.3s;
    text-align:center;
}
a.btn:hover{
    background-color:var(--red-accent-darker);
}
@media(min-width:1200px){ 
    .container{
        width:calc(100% - 1rem);
        max-width: 1200px;
    }
}

@media(min-width:768px){ 
    .navbar-top li,.navbar-bottom li{
        display:inline-block;     
    }
    li.sep{
        display:inline-block;
    }
}