/* styles-for-navbar.css  */
/* THIS CONTROLS THE NAVIGATION BAR ONLY */

#mxsm-navbar {
    font-family: "Roboto", Arial, sans-serif;
    text-align: center;
    font-size: 18px;
    margin-top: 35px;
    margin-bottom: 10px;
}

#titlediv h1,
#titlediv h2,
#titlediv p {
    color: #444;
}

#titlediv h1:hover,
#titlediv h2:hover,
#titlediv p:hover {
    color: #21759b;
}

#titlediv h1 {
    font-size: 2em;
    margin-bottom: 10px;
}

#titlediv h2 {
    font-size: 1.5em;
    font-variant: small-caps;
    margin-bottom: 22px;
}

#header-statement {
    width: 1000px;
    max-width: 100%;
    margin: 30px auto;
    font-weight: bold;
    clear: both;
    font-size: 1.3em;
}

@media (max-width: 767px) {
    h1,
    h2 {
        /* padding-bottom: 20px; */
    }

    #mxsm-navbar {
        margin-top: 0;
        /* display: flex;
        flex-direction: column-reverse; */
    }
    #header-statement {
        width: 90%;
    }

    nav.topnav {
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
        padding: 10px 50px 10px 0;
    }
    nav.responsive a {
        text-align: center;
    }

    .topnav .icon {
        font-weight: bold;
    }
}