.navbar {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(17, 17, 17, .6);
    z-index: 9999;
    animation: fadeDownward .7s ease-in-out forwards;
    transition: background-color 1s ease;
    height: 50px;
}

/* class to make navbar stick on top of the screen */
.fixed-navbar {
    position: fixed;
    top: 0;
    bottom: auto;
    background: rgba(17, 17, 51, 1);
}

.navbar .logo {
    float: left;
    margin-left: 8px;
    opacity: 0;
    animation: fadeUpward 1s ease-out .5s forwards;
    line-height: 50px;
}

.navbar .logo a {
    font-family: Lato, "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 30px;
    color: #ffffff;
    text-decoration: none;
    line-height: 50px;
}

.navbar .logo a > span {
    font-family: Lato, "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 30px;
    color: #FFA828;
    line-height: 50px;
}

.navbar > .navbar-list {
    position: relative;
    float: right;
}

.navbar > .navbar-list > .navbar-list-item {
    display: inline;
}

.navbar > .navbar-list > .navbar-list-item a {
    display: inline-block;
    text-decoration: none;
    padding: 10px;
    color: #FFFFFF;
    font-family: "Roboto Mono", Courier, monospace;
    transition: color .3s ease;
    font-size: 16px;
    line-height: 30px;
}

.navbar > .navbar-list > .navbar-list-item a:before {
    content: "< ";
}

.navbar > .navbar-list > .navbar-list-item a:after {
    content: " />";
}

.navbar > .navbar-list > .navbar-list-item.active a::after {
    content: "* >";
}

.navbar > .navbar-list > .navbar-list-item a:hover::before {
    content: "[ ";
}

.navbar > .navbar-list > .navbar-list-item a:hover::after {
    content: " /]";
}

.navbar > .navbar-list > .navbar-list-item.active a {
    color: #FFA828;
}

/* Back top button */

.back-top {
    position: fixed;
    bottom: 80px;
    right: 80px;
    color: #ccd;
    border-radius: 15px;
    padding: 8px;
    z-index: 9999;
    padding-top: 20px;
    width: 60px;
    height: 60px;
}

/* Make anchor full overlap content div */
.back-top > a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(17, 17, 51, .3);
    border-radius: 15px;
    -webkit-transition: background-color .5s ease;
    -moz-transition: background-color .5s ease;
    transition: background-color .5s ease;
    transition: border-color .5s ease;
    visibility: hidden;
    border: solid 4px rgba(255, 255, 255, .3);
    outline: none;
}

.back-top > a:hover {
    background-color: rgba(17, 17, 51, .75);
    border-color: rgba(255, 255, 255, .6);
}

.back-top > a:after {
    position: absolute;
    top: 16px;
    left: calc(50% - .6em);
    margin-left: auto;
    margin-right: auto;
    content: "";
    display: block;
    /* By using an em scale, the arrows will size with the font */
    width: 1em;
    height: 1em;
    border-right: .3em solid #dde;
    border-top: .3em solid #dde;
    transform: rotate(-45deg);
    margin-right: 0.5em;
}

.back-top > a:hover:after {
    border-right: .3em solid #FFA828;
    border-top: .3em solid #FFA828;
}

.back-top > a:before {
    position: absolute;
    top: 29px;
    left: calc(50% - .6em);
    margin-left: auto;
    margin-right: auto;
    content: "";
    display: block;
    /* By using an em scale, the arrows will size with the font */
    width: 1em;
    height: 1em;
    border-right: .3em solid #aad;
    border-top: .3em solid #aad;
    transform: rotate(-45deg);
    margin-right: 0.5em;
}

.back-top > a:hover:before {
    border-right: .3em solid #B2700E;
    border-top: .3em solid #B2700E;
}