html, body
{
    background: #C7C7C7;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 4px;
}

.header{
    display:block;
}

h1
{
    font-weight: normal;
    margin-left: 15px;
    margin-top: 15px;
    float: left;
    font-size: 0.8em;
}

.iconlist
{
    display: block;
    margin-left: auto;
    max-width: 448px;
    margin-right: auto;
}

p
{
    letter-spacing: 1px;
}

#mainContent
{
}

.links
{
    clear:both;
    display:block;
}

.about
{
    margin: auto;
    letter-spacing: 1px;
    clear: both;
    max-width: 900px;
padding-top:10px;
}

.iconlist ul
{
    padding: 0;
    list-style-type: none;
}

.iconlist li
{
    float: Left;
}

    .iconlist li a
    {
        /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
        -o-transition: .5s;
        -ms-transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
        /* ...and now for the proper property */
        transition: .5s;
        display: Block;
    }

        .iconlist li a img
        {
            border: 0;
        }

.blackhover a:hover
{
    background: Black;
}

.spotifyhover a:hover
{
    background: #92c336;
}

.delicioushover a:hover
{
    background: #285da7;
}

.fiddlehover a:hover
{
    background: #3d6aa2;
}

.youtubehover a:hover
{
    background: #9f2724;
}

.linkedinhover a:hover
{
    background: #45baef;
}

.githubhover a:hover
{
    background: #24292e;
}

.twitterhover a:hover
{
    background: #45baef;
}

.imglink
{
    max-width: 64px;
}

.gravatar
{
    max-width: 80px;
    float: right;
    margin-right: 15px;
    margin-top: 15px;
}

@media only screen and (max-width : 850px)
{
    /*Styles*/
    body
    {
        min-width: 260px;
    }

    #header
    {
    }

    .gravatar
    {
        width: 20%;
        min-width: 20px;
    }
}