CSS menu needs to disappear with a click elsewhere

I made a menu that appears when clicking a hamburger button with CSS and a checkbox. It works nicely so far. But now I want it to disappear when clicking elsewhere on the page, not only when clicking on the hamburger button again. How do I do that, please?

HTML:

<div class="navigatie"> 
  <input class="nav-toggle" id="nav-toggle" type="checkbox">
  <nav>
      <ul>
          <li><a href="index.html" class="active">Home</a></li>
          <li><a href="werkwijze.html">Werkwijze</a></li>
          <li><a href="overons.html">Over ons</a></li>
          <li><a href="faq.html">Faq</a></li>
          <li><a href="accreditatie.html">Accreditatie</a></li>
      </ul>
  </nav>
  <label for="nav-toggle" class="nav-toggle-label">
    <span><i class="fas fa-bars"></i></span>
  </label>
</div>

CSS:

.nav-toggle {
  display: none;
}
nav { 
  position: absolute;
  bottom: 100%;
  left: 30%;
  background-color: #f1f1f1;
  width: 40%;
  transform: scale(1,0);
  transform-origin: bottom;
  transition: transform 400ms ease-in-out;
}
nav a {
  color: #65A624;
  font-size: 1rem;
  opacity: 0;
  transition: opacity 150ms ease-in;
  display: block;
}
nav a:hover:not(.active) {
  background-color: #555;
  color: white;
}
nav a.active {
  background-color: #65A624;
  color: white;
}
.nav-toggle:checked ~ nav {
  transform: scale(1,1);
}
.nav-toggle:checked ~ nav a {
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

Greetings,

Sandra.