@import url(https://fonts.googleapis.com/css?family=Open+Sans);
    @import url(https://fonts.googleapis.com/css?family=Lato);

    html {
        height: 100%;
        font-family: 'Open Sans', sans-serif;
        background-color: #E9E8E2;
    }

    body {
        height: 100%;
    }

    #test nav {
        position: fixed;
        top: 5%;
        bottom: auto;
        z-index: 10;

    }

    #test ul {
        list-style: none;
        padding: 0;
    }

    #test li {
        padding: 10px 0;
    }

    #test span {
        display: inline-block;
        position: relative;
    }

    #test nav a {
        display: inline-block;
        color: #272727;
        text-decoration: none;
        font-size: 1em;
    }

    #test .circle {
        height: 10px;
        width: 10px;
        left: -10px;
        border-radius: 50%;
        background-color: #272727;
    }

    #test .rect {
        height: 3px;
        width: 0px;
        left: 0;
        bottom: 4px;
        background-color: #272727;
        -webkit-transition: -webkit-transform 0.6s, width 1s;
        -moz-transition: -webkit-transform 0.6s, width 1s;
        transition: transform 0.6s, width 1s;
    }

    #test nav a:hover,
    #test nav .active-section {
        color: rgb(248, 71, 12);
    }

    #test nav a:hover span,
    #test nav .active-section span {
        background-color: rgb(248, 71, 12);
    }

    #test nav .active-section .rect {
        width: 40px;
    }

    #test .content-section {
        position: relative;
        width: 70%;
        height: 90%;
        /*         left: 50%;

 */
        left: 60%;
        background-color: #ecf1f1;
        text-align: center;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    #test .content-section h1 {
        position: relative;
        top: 50%;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        color: #9b59b6;
        font-size: 3em;
    }

    /*CREDITS*/
    #test .about {
        position: fixed;
        bottom: 0;
        left: 1%;
    }

    #test .about a {
        text-decoration: none;
        font-size: 1.5em;
    }

    #test .about a:visited,
    #test .about a:active,
    #test .about a:link {
        color: #000;
    }

    #test .about a:hover {
        color: red;
    }