/**
 * css for the nav bar
 *
 * source:
 * https://stackoverflow.com/questions/55440825/how-to-centre-a-navigation-bar-that-has-dropdown-menus
 **/

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #221a57;
    display: flex;
    justify-content: center;
}

/**
 * common styling for the headers
 * (i.e. the "regular" <a> tags for
 * contact, about, resources; and
 * the <div><button> "vocab" dropdowon)
 * You can't simply put all these in
 * .navbar (which is parent to all of them)
 * as form elements (which <button> are)
 * can't inherit font properties.
*/
.navbar a,
button {
    font-size: 20px;
    padding: 14px 18px;
    color: var(--text-color);
    background-color: inherit;
    font-family: inherit;
}

.navbar a {
    text-align: center;
    text-decoration: none;
}

.dropdown .dropbtn {
    border: none;
    outline: none;
    margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
    background-color: teal;
    /**background-color: #F73D4B; */
}

.dropdown-content {
    display: none;
    position: absolute;

    /**
     * if u end up wanting to allow this div to scroll on overflow:
     * the 3 attrs below will do it.
     * reason i decided on to do this (and to just
     * reduce padding on the <a> tags so that there
     * was no overflow) is that it causes an overscroll
     * beahvior where the div jumps (like what happens when
     * you scroll to the top of the page).
     * I could not get that to stop happening so i just
     * reduced padding between the elements in this div
     * so that there is no overscroll happening.
     * But for future reference, this is at least how
     * to make the overflow work
     */

    /** so i can get a scrollbar on overflow */
    position: fixed;
    /** height is required for overflow to work */
    max-height: 80%;
    /** if u make it auto instead of 'scroll', then scrollbar will disappear when not overflowing */
    /** DON'T USE - WILL MAKE X AND Y SCROLLBARS! */
    /** overflow: auto; */
    /** USE INSTEAD. if u make 'hidden', scrollbar disappears when not overflowing, and will only have y-axis (up/down) scroll (not side/side) */
    overflow-x: hidden;

    background-color: #DDDDDD;

    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.9);
    z-index: 1;
}

.dropdown-content a {

    color: black;
    /**padding: 12px 16px;*/
    padding: 6px 16px;
    /** reduced top/bottom padding to prevent overflow in .dropdown-content */
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #fff;
    /**#b1b1b1;/**#ddd;*/
}

.dropdown:hover .dropdown-content {
    display: block;
}

@media all and (max-width:800px) {

    .navbar a,
    button {
        font-size: 16px;
        padding: 14px 14px;
    }

    body {
        font-size: 16px;
    }
}