section
{
    text-align: left;
    width: 398px;
    background: dodgerblue;
    box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px, /*inset rgba(0,0,0, 0.3) 0 0 4px*/;
    position:relative;
    top:0;
    left:0;
    transition: .2s;
    padding: 20px;
    margin: 5px;
    color: rgba(255,255,255,0);
    text-shadow: none;
}

section h2
{
    visibility:hidden;
}

/* If you change the hover transition, be careful, as index.js is
   hard-coded to the current transition because JavaScript is too
   painful to work with in a reasonable way. */
section:hover, #links li:hover
{
    box-shadow: rgba(0, 0, 0, 1.0) 2px 2px 10px;
    position:relative;
    top: -10px;
    left: 0;
    color: white;
    text-shadow: 0 0 3px black;
    cursor: pointer;
}

section img
{
    position:absolute;
    opacity:1;
    transition: .2s;
}

section a
{
    color:rgba(255,255,0,0);
    position: absolute;
    bottom: 10px;
    right: 10px;
}

section:hover a
{
    color:yellow;
    text-decoration: none;
}

@media (max-width: 900px)
{
    html
    {
        background: url("../img/BackgroundLightLoop.png");
    }

    body
    {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    section
    {
        width: 100%;
        box-shadow: none;
        top: 0;
        left: 0;
        text-shadow: 0 0 3px black;
        color: white;
        padding: 20px;
        margin: 0;
        transition: none;
        background-position: center;
        box-sizing: border-box;
    }

    section:hover
    {
        cursor: auto;
        top: 0;
        left: 0;
        box-shadow: none;
    }

    section h2 { display: none; }
    section img { position: static; }
    section a { color:yellow;}
    section a:hover { color:white; }
    hr { display: none }

    ul#nav
    {
        width: 100%;
        position: relative;
        top: 10px;
    }

    ul#nav li
    {
        position: static;
        width: 50%;
    }
    ul#nav li a, ul#nav li a:hover
    {
        background-position: center;
        background-repeat: no-repeat;
    }

    #news { display: none }

    #owlboy
    {
        width: 100%;
        border-radius: 0;
        margin-bottom: 0
    }
    #vikings { width: 100%; margin-left: 0;}
    #footer { width: 100% }
    #development { width: 100% }

    #savant img { position: static; }
    #vikings img { position: static; }
    #smallergames { display: block; }

    .description {margin-bottom: 1em}

    #owlboy { margin-top: 40px }
    #savant, #vikings { margin-bottom: 0 }

    #owlboy .description,
    #savant .description,
    #vikings .description
    {
        top: -10px
    }

    #owlboy:hover { background: url("../img/owlboybg.png") center; }
    #savant:hover { background: url("../img/savantbg.png") -0px -150px }
    #vikings:hover { background: url("../img/votbg.png") right }

    #links {
        width: 100%;
        margin: 0;
    }

    #links li
    {
        width: 20%;
        margin: 0;
        transition-property: top;
    }
    #links li a
    {
        width : 100%;
        margin: 0;
    }

    /*#facebooklink a { background: #00408b }
    #twitterlink a  { background: teal }
    #youtubelink a  { background: red }
    #emaillink a    { background: #1c9710 }
    #twitchlink a   { background: #640080 }*/

    #footer { margin-top: 20px }
}