<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="/style.css">

    <nav>
      <div id="logo">
        <h1>
          KodeSoul
        </h1>
        <details>
          <summary>menu</summary>

    <main>
      <nav>
        <div id="logo">
          <h1>Kode<strong id="soul">Soul</strong></h1>
        </div>
        <details id="menu" open>

            <li><a href="#">snips</a></li>
            <li><a href="#">about</a></li>

          <summary class="hide">menu</summary>

      </div>
    </nav>
    <section class="section">
      <div class="container">
        {% block content %} {% endblock %}
      </div>
    </section>

      </nav>
      <section class="section">
        <div class="container">
          {% block content %} {% endblock %}
        </div>
      </section>
    </main>

// --- reset styles ---
*,*::before,*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
// --- theme ---
$pc: #C678DD; // primary color
$sc: #8fdd78; // secondary color
$bg: #121212; // background
$fg: #FAFAFA; // foreground
$pd: #62396e; // primary dark
$pl: #f4e4f9; // primary light
// --- global styles ---
html {
  overflow-y: scroll;  
  height: 100%;
  font: 100%/1.5 sans-serif;
  word-wrap: break-word;
  margin: 0 auto;
  padding: 0 1em;
  color: $bg;
  background-color: $fg;
  nav {
    align-items: center;
    margin: 16px 0px;
    #logo {
      padding: 16px 0px;
      #soul {
        color: $pd;
      }
    }
    ul {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      list-style:none;
      border: 1px solid black;
      border-radius: 8px;
      background-color: $pl;
      li {
        padding: 4px 8px;
        border-right: 1px solid black;
      }
    }
  }
  h1,h2,h3,h4 {
    // margin: 2.5rem 0 1.5rem 0;
    line-height: 1.3;
    color: $bg;
  }
  a {
    color: $pd;
    text-decoration: none;
    &:hover, &:focus, &:active {
      text-decoration: underline;
    }
  }
  p {
    margin: 1em 0;
    line-height: 1.5;
    code {
      background-color: #121212;
      padding: 0.05em 0.2em;
      border: 1px solid #ccc;
    }
  }
}
// --- small screens ---
@media (min-width: 768px) {
  html {
    font-size: 125%;
    max-width: 42em;
  }
}
// --- atomic classes ---
// hide tag. 
.hide { display:none; }