body
{ 
    font-family: 'Raleway', sans-serif; /*The reason there are two fonts seperated by commas, is because if Google's font server ever goes down, Your webpage will fall back on the second native font family described and ensure consistent UX*/
    color: #F9FEFF;
    margin: 0; /*Without this the background is encased in a thick border*/
}
.nav-link 
{
    color: white;
    text-decoration: none;
}

li 
{
    display: inline-block;
    font-size: 12px;
    width: 100px;
    font-weight: bold;
    margin-top: 30px;
    text-align: center;
    margin-left: 30px;
}

ul 
{
    margin-left: auto;
    margin-right: auto;
    max-width: 740px;
}

.profileContainer
{
    background: url(images/headersplash.jpg) no-repeat center center fixed;
    /*
    the -tags below are vender prefixes (targets specific browsers); 
             -webkit targets webkit rendering engine that powers Chrome & Safari browser
             -moz targets mozilla rendering engine that powers Firefox browser
             -o targets Opera web browser
      
    Before background-size property was officially supported on CSS, 
    all vendors supported it by adding these vendor prefixes. Although 
    currently all current browser versions support this natively, 
    these ensure users with older browsers can have the same UX.
    */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 600px;
}

.profile
{
    width: 500px;
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.profilePic
{
    height: 150px;
    width: 150px;
    border-radius: 100%; 
    /* If you wanted to add a lined border around things use the following
    border-style: solid; (makes a solid line)
    border-color: white; (makes that line the specified color white)
    */

    margin-top: 40px;
}

h1 
{
    font-size: 50px;
    font-weight: normal;
    margin-bottom: 0;
}

h2 
{
    font-size: 25px;
    margin-top: 0px;
    font-weight: 100;
}

.hr1
{
    height: 3px;
    background-color: #7D7F7F;
    /*horizontal rules by default have a border, remove this shit*/
    border: none;
    width: 50px;
}

.bio
{
    font-size: 18px;
    color: #F9FEFF;
}

h3
{
    margin-top: 100px;
    text-align: center;
    font-size: 28px;
    font-weight: normal;
    color: #7D7F7F;
}

.hr2
{
    border-top: 5px double #7D7F7F;
    width: 250px;
    border-bottom: none;
    border-right: none;
}

.box
{
    float: left;
    width: 42.5%;
    margin-left: 5%;
    margin-top: 80px;
}

.clear
{
    clear:both;
}

h4
{
    text-align: center;
    font-size: 24px;
    color: #00637F;
}

p
{
    text-align: center;
    margin: 40px auto;
    max-width: 400px;
    color: black;
}

.screenshot 
{
    width: 100%;
}

.toolsTitle
{
    margin-top: 100px;
}

.skills
{
    max-width: 400px;
    margin-top: 40px auto;
    margin-bottom: 0px;
}

.skills2
{
    max-width: 400px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.icons
{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    width: 100%;
    max-height: 300px;
}

.icons svg {
    width: 35%;
    height: 35%;
    padding-left:  10px;
    padding-right: 10px;
}


.contact
{
    height: 750px;
    background: url(images/headersplash.jpg) no-repeat center bottom fixed;

    padding-top: 5px;
}

.contactBio
{
    color: white;
    font-size: 13px;
    margin-top: 30px;
}

.contactLink {
    color: #ADECFF;
    font-weight: bold;
    font-size: 13px;
}