:root {
    --headerHeight: 3.5rem;

    /* Color Set Options - ALMOST black to ALMOST white, cool grays */
    --darkest: #212529; 
    --darker: #343A40;
    --dark: #495057;
    --light: #6C757D;
    --lighter: #ADB5BD;
    --lightest: #CED4DA;

    /* fonts */
    --fontOne: "Cascadia Mono", sans-serif;
    --fontTwo: "Alumni Sans Pinstripe", sans-serif;
}

/* .main {
    display: flex;
    justify-content: space-evenly;
}

.main .heroImage {
    height: 858px;
} */

@media only screen and (max-width: 950px) {

.main{
    justify-content: center;
    align-items: center;
}

.main .bioTextBox{
    color: var(--lightest);
    margin: 20px;
    margin-right: 30px;
    margin-top: 70px;
    padding: 10px 10px 10px 10px;
    background-color: rgba(73, 80, 87, 0.4);  
    width: 90%;
    height: 80%;
    overflow-y: scroll;
    
}

.main .bioTextBox h2{
    clear:both;
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 35px;
    float: right;
    letter-spacing: 1.8px;
    padding-bottom: 8px;
}

.main .bioTextBox p{
    clear: both;
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 28px;
    /* text-indent: 10px;  */
    letter-spacing: 2.5px;
    line-height: 0.85;
    /* word-spacing: 2px; */
}

}


/* @media only screen and (min-width: 951px) {
    body::before {
        content: "Mobile version in development. Desktop view coming soon.";
        display: block;
        padding: 2rem;
        text-align: center;
        background: var(--darkest);
        color: var(--lightest);
        font-size: 1.5rem;
    }
    
    .main, header, footer {
        display: none !important;
    }
} */