/* <div class="layout-background">
                    <div id="bio-wrapper">
                        <img src="/assets/profile_picture.png" alt="profile picture depicting a blue tiger dressed in a shirt and hat">
                        <div id="bio-text-wrapper">
                            <p id="bio-pronouns">he/him</p>
                            <p id="bio-text">mid 20s comfy cat</p>
                        </div>
                    </div>
                </div>
 * 
 * */

.navbar-override { position: relative; height: 500px !important; }
.layout-override { 
    width: 100%; position: relative; 
    top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 30px; margin-top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}
#main-wrapper { height: 100%; }

#bio-wrapper { 
    position: relative; display: flex; flex-direction: row; width: fit-content; height: 200px;
    left: 50%; transform: translateX(-50%);
}

#bio-icon { border-radius: 50%; width: 200px; height: 200px; border: 10px var(--layout-accent) solid; }
#bio-text-wrapper {
    position: relative; display: flex; flex-direction: column;
    height: fit-content; margin-left: 20px;
    
    top: 50%; transform: translateY(-50%);
}

#bio-pronouns { color: var(--page-background); font-style: italic; font-size: 0.9em; margin: 0; }
#bio-text { color: var(--layout-bright); margin-top: 5px; }
.bio-text-accent { color: var(--page-background); }

#social-box {
    width: 100%; position: relative; margin-top: 40px;
    display: flex; flex-direction: row; gap: 10px;
}
.social {
    display: inline-block; margin: 0; width: 35px; height: 35px;    
    transition: all .2s ease;
}
.social:hover, .social:active { transform: scale(1.1); }
.social img { width: 100%; height: 100%; margin: 0; }