html, body {
    margin: 0px;
    padding: 0px;
    font-style: normal;
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}

#navbar {
    position: relative;
    float: left;

    width: 100%;
    min-height: 50px;
    line-height: 50px;

    background-color: #222;
}

#navbar-links-list {
    display: none;
}

#navbar a {
    position: relative;
    display: block;
    float: none;

    height: 100%;
    vertical-align: middle;

    padding-left: 15px;
    padding-right: 15px;

    font-size: 1em;
    color: #fff;
    text-align: center;
    text-decoration: none;
}

#navbar a:hover {
    background-color: #444;
}

#navbar a.active {
    background-color: #666;
}

#home-link {
    float: left !important;
}

#dropdown-navbar-btn {
    float: right !important;
    clear: right;
}

#dropdown-navbar-btn.active ~ #navbar-links-list {
    position: relative;
    display: block;
    top: 50px;
    left: 0px;
    width: 100%;
    height: auto;
    background-color: #252525;
}

/*
    CSS which only applies on big screens
    NOTE - default CSS is aimed at mobile devices
 */
@media screen and (min-width: 600px) {
    #dropdown-navbar-btn {
        display: none !important;
    }

    #navbar-links-list {
        display: block !important;
    }

    #navbar a {
        display: inline;
    }

    #play-link, #help-link {
        float: left !important;
    }

    #create-account-link, #login-link {
        float: right !important;
    }
}