#nav{display:none;}


@media screen and (min-width: 980px) {

    #nav{display:block;}
    * {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    html,
    body {
        margin: 0;
        padding: 0;
    }


    h1,
    h2,
    h3,
    p,
    pre,
    ul {
        margin: 0;
        padding: 0;
    }

    h1 {
        font-size: 48px;
        line-height: 1;
        margin-bottom: 1em;
    }

    h2 {
        font-size: 24px;
        line-height: 1;
        margin-bottom: 1em;
    }

    h3 {
        font-size: 16px;
        line-height: 1;
        margin-bottom: 1em;
    }

    p,
    pre,
    ul {
        margin-bottom: 2em;
    }

    pre {
        background: #fefefe;
        border: 1px solid #dedede;
        overflow-x: auto;
        padding: 2em;
    }

    ul {
        margin-left: 1em;
    }

    #nav {
        left: 20px;
        list-style: none;
        margin: 0;
        position: fixed;
        top: 20px;
    }

        #nav li {
            margin-bottom: 2px;
        }

        #nav a {
            background: #ededed;
            color: #666;
            display: block;
            font-size: 14px;
            padding: 5px 10px;
            text-decoration: none;
            text-transform: uppercase;
        }

            #nav a:hover {
                background: #dedede;
            }

        #nav .current a {
            background: #666;
            color: #ededed;
        }

    #container {
        margin: 0 auto;
        width: 800px;
    }

    .section {
        border-bottom: 5px solid #ccc;
        min-height: 60vh;
        padding: 50px 20px;
    }

        .section p:last-child {
            margin-bottom: 0;
        }
}