/* Here we start */
    nav {
      background-color: #f0f0f0;
      color: #000;
      display: flex;
      justify-content: space-between;
      position: fixed;
      top:0;
      width: 100%;
      z-index: 999;
    }

    nav ul {
      /* Make the markers disappear */
      list-style-type: none;
      margin: 0;
    }

    nav ul li {
      /* Puts the elements in a single line */
      display: inline-flex;
      margin: 0.3em 1em;
    }

    nav ul li a {
      /* The links in the menu */
      text-decoration: none;
      color: #000;
    }

    /* These two lines make the checkbox and the label disappear when we are in desktop mode. */
    nav input[type="checkbox"],
    nav label {
      display: none;
      margin: 0;
      font-weight: bold;
      font-size: 1.2em;
    }

    /* This start to get interesting: we go into mobile phone mode */
    @media (max-width: 576px) {
      /* Here is the magic: if the checkbox is not marked, the adjacent list is not displayed */
      input[type="checkbox"]:not(:checked) + ul {
        display: none;
      }

      nav {
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
        width: auto;
      }

      /* Stlying the menu icon, the checkbox stays hidden */
      nav label {
        text-align: right;
        display: block;
        padding: 0.5em;
        line-height: 1.6em;
        align-self: center;
      }

      /* Because we are in mobile mode, we want to display it as a vertical list */
      nav ul {
        display: block;
      }

      /* We have two lists: the first one are the always visibile items in the 
        menu bar. The second one is the one that will be hidden */
      nav ul:last-child {
        width: 100%;
        flex-basis: 100%;
      }

      nav ul li {
        margin-bottom: 0;
        width: 100%;
        text-align: right;
        padding: 0.5em;
      }
    }