:root {
    --nav-bgcolor: rgb(13, 100, 13);
    --nav-color: white;
}

* {
    box-sizing: border-box;
}

body {
    font-family: helvetica, sans-serif;
    margin: 0;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

header nav ul {
    display: none;
}

header nav.expanded ul {
    display: block;
}

nav a:link,
nav a:visited,
nav a:hover,
nav a:active {
    display: block;
    color: var(--nav-color);
    background-color: var(--nav-bgcolor);
}

nav a:hover {
    background-color: var(--nav-color);
    color: var(--nav-bgcolor);
}

#menu-control {
    background-color: yellow;
}

nav.expanded #menu-control {
    background-color: purple;
}

@media screen and (min-width: 800px) {
    /* ===============================
       ===  ATTENTION!! ============== 
       Because we added 
       header nav.expanded ul {display: block;}
       we also need to make sure the display is "flex"
       here in the wider screen, because the 
       "header nav.expanded ul" has a precedent score of 0013
       "header nav ul"          has a precedent score of 0003 
       so we are adding "header nav.expanded ul" as a selector
       to set the display to flex!
    */
    header nav ul,
    header nav.expanded ul {
        display: flex;
    }
    header nav ul li {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 5rem;
    }

}