/* font-family: 'Bebas Neue', cursive;
font-family: 'Gelasio', serif; */

/* Current Color Scheme:
    top center small info boxes - #C8C6C6
    top half page color - #D9D9D9
    bottom half page color - #C8C6C6
    text color - #828282
    nav bar outline color - #9A9595
    divider color - #989595
*/

a{
    text-decoration: none;
}
a:link{
    color: rgb(185, 46, 107);}
a:visited{
    color:rgb(185, 46, 107);}
a:hover{
    color:rgb(255, 91, 163);}
a:active{
    color:rgb(235, 76, 103);}
body{
    width: 90%;
    background-color: rgb(219, 99, 152);
    color: rgb(185, 46, 107) ;
    font-family: 'Gelasio', serif; 
    font-size: 100%;
    line-height: 1.4em;
}
h1{
    font-family: 'Bebas Neue', cursive;
    font-size: 400%;
    text-align: center;
    padding: 2%;
    position:sticky; 
    top: 0;
    background-color:rgb(239, 167, 199);
}
h2{
    font-family: 'Bebas Neue', cursive;
    font-size: 300%; 
    text-align: center;
    position:sticky; 
    top: 0;
    padding: 2%;
    background-color:rgb(219, 99, 152);
}
h3,h4{
    font-family: 'Bebas Neue', cursive;
}
h3.info{
    font-size: 200%;
}
div.topHalf{
    position: absolute;
    top: 0;
    left:0;
    right:0;
    height: 99.99%;
    z-index: 0.5;
    background-color: rgb(239, 167, 199);
}
div.bottomHalf{
    position: absolute;
    top: 100%;
    left:0;
    right:0;
    background-color: rgb(219, 99, 152);
}
div.nav{
    width: 70%; 
    margin: 0% auto 5% auto;
    text-align: center;
}
li.nav{
    display: inline;
    margin: 0% 1%;
    padding:1%;
    font-size: 100%; 
    
}
#whoAmI{
    float:left;
    width: 30%;
    height: 500px;
    max-height: 55%;
    padding: 0% 2% 2% 2%;
    margin-left: 15%; 
    margin-right: 2%;
    font-size: 95%;
    overflow: scroll;
    background-color: rgb(255, 216, 233); 
}
#whatIsMyWork{
     float:left;
     width: 30%;
     height: 55%;
     max-height: 55%;
     padding: 0% 2% 2% 2%;
     overflow: scroll;
     background-color: rgb(255, 216, 233); 
}
#whoAmI:hover, #whatIsMyWork:hover{
    color:rgb(255, 91, 163);
}
div.essay{
    padding: 2%;
    margin: 2% 15% 2% 15%;
    height: 700px;
    overflow: scroll;
    background-color:  rgb(239, 167, 199);

}
div.divider{
    left:0;
    padding: 2%;
    background-color: rgb(185, 46, 107);
}



/* ------------------------------- TABLETS -----------------------------------*/
@media screen and (max-width: 768px) {
    body{
        width: 90%;
        font-family: 'Gelasio', serif; 
        font-size: 85%;
        line-height: 1.4em;
    }
    h1{
        line-height: 1.4em;
        font-size: 350%; 
        padding: 3%;
    }
    h2{
        font-size: 250%;  
        padding: 3%;
    }
    h3.info{
        font-size: 150%;
    }
    div.topHalf{
        height:68.67%
    }
    div.bottomHalf{
        top: 70%;
    }
    div.essay{
        margin: 2% 5% 2% 5%;
    }
    #whoAmI{
        width: 40%;
        max-height: 45%;
        margin-left: 3.5%;
    }
    #whatIsMyWork{
        width: 40%;
        max-height: 45%;
    }
    
}

/* ------------------------------- PHONES ------------------------------------*/

@media screen and (max-width: 576px) {
    body{
        width: 90%;
        font-family: 'Gelasio', serif; 
        font-size: 60%;
        line-height: 1.4em;
    }
    h1{
        font-size: 300%; 
        line-height: 1.0em;
    }
    h2{
        font-size: 150%;  
    }
    h3.info{
        font-size: 100%;
    }
    div.topHalf{
        height:68.67%
    }
    div.bottomHalf{
        top: 70%;
    }
    div.essay{
        margin: 2% 5% 2% 5%;
        height: 500px;
    }
    #whoAmI{
        width: 70%;
        max-height: 30%;
        margin-left: 12%;
        margin-bottom: 6%;
    }
    #whatIsMyWork{
        width: 70%;
        clear:left;
        max-height: 30%;
        margin-left: 12%;
    }
    div.nav{
        margin-left: 9.5%;
    }

 
}