nav {
    background-color:#0074D9;
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
}

/* Small screens */
@media all and (max-width: 600px) {
    nav {
        /* On small screens, we are no longer using row direction but column */
        flex-direction: column;
        align-items:stretch;
    }

    nav #menu_toggle {
        display:block!important;
    }

    nav a {
        display:none!important;
        border-bottom: 1px solid #7fdbff;
    }

    nav #menu_checkbox:checked ~ a {
        display:block!important;
     }
}

nav #menu_checkbox {
    display:none;
}

nav #menu_toggle {
    color:white;
    font-size:2.5em;
    margin-left:1rem;
    display:none;
}

nav #menu_toggle:hover {
    cursor:pointer;
}

nav a {
    color:white;
    padding:10px;
    text-decoration:none;
    white-space:nowrap;
    display:block;
}

nav a:hover {
    background-color:#7fdbff!important;
}