/*remove excess space*/
html, body {
    margin: 0 auto;
    padding: 0;
}
/*set some default colors*/
:root {
    --toolbarBackground: var(--pageBackground);
    --toolbarButtons: var(--toolbarBackground);
    --toolbarButtonHover: var(--titleFontColor);
    --toolbarButtonFontColor: white;
    --pageBackground:  rgb(0, 30, 62);
    --titleFontColor: rgb(0, 123, 255);
    --generalPageFontColor: white;
    --generalPageFontHoverColor: rgb(125, 188, 255);
    --bioBackground: var(--pageBackground);
    --bioFontColor: white;
}
/*define body attributes*/
body {
    background-color: var(--pageBackground);
    color:var(--generalPageFontColor);
}
.titleText{
    display:inline-block;
    text-decoration: none;
    color:var(--titleFontColor);
    font-size:475%;
    font-family: serif;
    font-weight:bold;
    padding:0;
    margin:0;
}
.titleText:hover{
    color: var(--generalPageFontHoverColor);
    cursor: pointer;
}
/* In this style sheet, 3 areas will be utilized:
    Toolbar
    Body (holding sub containers)
    Footbar */
/* create the container to hold the toolbar items*/
.toolbarContainer{
    /*display type*/
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin:0;
    background-color: var(--toolbarBackground);
    width:35%;
    min-width:600px;
    max-width:700px;
    height:3vh;
    min-height:20px;
    border-style:solid;
    border-width:1*2%;
    border-radius:30px;
    overflow: hidden;
    border-color: var(--generalPageFontColor);
    transition: all .6s;
}
.toolbarContainer:hover{
    height:4vh;
}
/*toolbar button attributes*/
.toolbarButton{
    background-color: var(--toolbarButtons);
    color: var(--toolbarButtonFontColor);
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bolder;
    font-size: 1.9*2%;
    align-self:center;
    border:none;
    height:100%;
    min-height:20px;
    margin:0;
    padding: 1%;
    transition: all .6s;
}
/*toolbar button hover attributes*/
.toolbarButton:hover{
    cursor: pointer;
    height:4vh;
    transform:scale(1.25);
    z-index: 1;
    background-color: var(--toolbarButtonHover);
}
/*define header attributes*/
h1{
    color:var(--generalPageFontHoverColor);
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-size: 220%;
    margin:0;
    text-align:center;
}
/*define paragraph attributes*/
p {
    color:var(--generalPageFontColor);
    font-family:Arial, Helvetica, sans-serif;
}
/*biography container attributes*/
.bio{
    display:grid;
    grid-template-columns: 1fr 1.3fr;
    column-gap: 2%;
    width:68%;
    max-width:750px;
    margin:0;
    background-color: var(--bioBackground);
    padding:0;
}
/*bio font attributes*/
.bioParagraph{
    color: var(--bioFontColor);
    font-family:Arial, Helvetica, sans-serif;
    align-self:center;
    justify-self:right;
    font-size:2*2%;
    margin:auto;
    line-height: 1.5;
}
.bioHr{
    width:100px; 
    margin:0 auto;
    color: lightgray;
}
/* bio image attributes */
.bioImage{
    width:90%;
    scale:90%;
    align-self:center;
    border-style: solid;
    border-width: 3px;
    border-color:grey;
    border-radius:100vw;
    margin:0;
    padding:0;
    justify-self: left;
    transition: transform 0.7s;
}
.bioImage:hover{
    transform:scale(110%);
}
.highlight-blue {
    text-decoration: none;
    font-weight:normal;
    color: var(--generalPageFontHoverColor);
}
hr{
    color: white;
    margin:0;
}
.socials{
    display:flex;
    width:100%;
    justify-content: center;
    justify-items:center;
    margin: 0;
}
.socialHyperlink{
    margin-left:2%;
    margin-right:2%;
}
.socialSvg{
    color:white;
    width:100%;
    height:100%;
    padding: 1%;
    transition: all 0.15s;
}
.socialSvg:hover{
    cursor: pointer;
    color:var(--titleFontColor);
    /* width:125%;
    height:125%; */
    transform:scale(1.5);
}

/* Mobile styles (max-width: 767px) */
@media (max-width: 600px) {

    .titleText{
        font-size:270%;
    }

    .toolbarContainer{
        width:35%;
        min-width:350px;
    }

    /*toolbar button attributes*/
    .toolbarButton{
        height:3vh;
        margin:0;
        padding: 1%;
    }
    h1{
        font-size: 170%;
    }
    /*biography container attributes*/
    .bio{
        display:grid;
        grid-template-columns: 1fr;
        column-gap: 2%;
        width:100%;
        max-width:750px;
        margin:0 auto;
        border-radius:30px;
    }
    .bioHr{
        width:60px; 
    }
    /*bio font attributes*/
    .bioParagraph{
        margin:0;
        margin-left: 4%;
        margin-right: 4%;
        align-self:center;
        justify-self:center;
        font-size:2*2%;
    }
    /*bio image attributes*/
    .bioImage{
        width:50%;
        scale:90%;
        margin:0;
        padding:0;
        justify-self: center;
    }

    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }
}

/* Desktop/Tablet styles (min-width: 768px) */
@media (min-width: 601px) {

}