HTML/CSS - hamburger Online Editor and JavaScript Compiler

html

<!-- Created by Clever Programmer-->
<html>
    <head> <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <meta charset="utf-8">
    </head>
<header>
  <h1 class="logo">Logo</h1>
  <input type="checkbox" id="nav-toggle" class="nav-toggle">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">service</a>
          <ul><li><a href="#">web hacking</a></li>
               <li><a href="#">web securing</a></li>
          </ul> 
              
          
      </li>
      <li><a href="#">Security training</a></li>
    </ul>
  </nav>
   <!-- THIS WILL MAKE A TOGGLE ICON -->
  <label for="nav-toggle" class="nav-toggle-label">
    <span></span>
  </label>
</header>

css

/* Created by Clever Programmer */
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
:root {
  --background:  rgba(0, 214, 170, .85);
}
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  background:  #222;
  font-family: 'Quicksand', sans-serif;
}
.content {
  height: 200vh;
  background-color:  #333;
  display: grid;
  place-items: center;
}
/* navigation styles */
header {
  background: var(--background);

BROWSER

Console