:root {
  /*----- Fonts ----- */
  --serif-font: "Crete Round", serif;
  --sans-serif-font: Verdana, arial, sans-serif;

  /* ----- Color palette ----- */
  --grey-light: #f5f9fa;
  --grey-code: #dcdcdc80;
  --grey-dark: #333;
  --blue-light: #e4f0f5;
  --blue-normal: #83d0f2;
  --blue-dark: #3d7e9a;
  --yellow-light: #fff3d4;
  --yellow-dark: #f6b73c;
}

/* ----- Global ----- */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--sans-serif-font);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--serif-font);
  font-weight: 700;
  color: var(--grey-dark);
}

h1 {font-size: 3em;}
h2 {font-size: 2.6em;}
h3 {font-size: 2em;}

h4 {
  display: inline-block;
  margin: 0.2em 0;
  padding: 3px 5px 3px 35px;
  line-height: 1 !important;
  font-size: 1.5em;
  font-weight: normal;
  color: var(--grey-light);
  background-color: var(--grey-dark);
}

ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: none;
  color: inherit;
  background-color: transparent;
}

/* ----- Document header ----- */
#doc-header {
  position: fixed;
  width: 100%;
  z-index: 20;
}

#doc-header h1 {
  padding: 0.5em;
  background-color: var(--grey-light);
}

.doc-header__links {
  overflow: hidden;
  font-size: 1.3em;
  color: #fff;
  background-color: #000;
}

.doc-header__links header {
  display: inline-block;
  padding: 0.64em 0.7em 0.64em 1.1em;
  font-family: var(--serif-font);
}

.doc-header__more {
  display: none;
}

.doc-header__links li {
  display: inline-block;
  padding: 0.64em 0.8em 0.44em;
  color: var(--blue-normal);
  border-bottom: 0.2em solid transparent;
}

.doc-header__links li:hover {
  color: #fff;
  border-bottom-color: var(--blue-normal);
}

/* ----- Main Document ----- */
#main-doc {
  position: absolute;
  top: 153px;
  height: calc(100vh - 153px);
  overflow-y: scroll;
}

/* ----- Navbar ----- */
#navbar {
  position: fixed;
  width: 300px;
  height: 100%;
  padding: 2em;
  overflow-y: auto;
  background-color: var(--grey-light);
  z-index: 10;
}

#navbar header {
  margin-bottom: 0.5em;
  padding: 0.5em 0;
  border-bottom: 1px solid var(--grey-dark);
}

#navbar li {
  margin-bottom: 0.8em;
  color: var(--blue-dark);
}

.nav-link:hover {
  text-decoration: underline;
}

.nav-link--inactive {
  position: relative;
  text-decoration: line-through;
  color: #bbb;
}

.nav-link--inactive::after {
  position: absolute;
  top: 0;
  left: 100%;
  margin: 3px 0 0 7px;
  padding: 2px;
  content: "In Progress";
  white-space: nowrap;
  font-size: 0.6em;
  font-weight: 700;
  background-color: var(--grey-code);
  border-radius: 2px;
}

.navbar__btn {
  display: none;
}

/* ----- Main article ----- */
.main-article {
  margin-left: 300px;
  padding: 1.7em;
}

.main-article p {
  max-width: 672px;
  line-height: 1.6;
}

.topic-start > p {
  margin-top: 0;
}

/* ----- Main section ----- */
.main-section {
  position: relative;
  margin: 3em 0;
  padding-top: 3em;
}

.main-section::before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 3px;
  content: "";
  background-color: var(--blue-dark);
}

/* ----- Code formatting ----- */
.main-section p code {
  padding: 2px;
  color: var(--blue-dark);
  background-color: var(--grey-code);
  border-radius: 1px;
}

.code--dark {
  font-weight: 700;
  color: var(--grey-dark) !important;
}

/* ----- Containers ----- */
.main-section .container--code {
  margin: 1.5em 0;
  padding: 1.2em;
  border-left: 5px solid var(--blue-dark);
  background-color: var(--grey-code);
}

.container--note {
  display: inline-block;
  margin: 1em 0;
  padding: 0 1em;
  background-color: var(--yellow-light);
  border-left: 5px solid var(--yellow-dark);
}

.container--syntax {
  display: block;
  margin: 1em 0;
  padding: 1px 1em;
  color: var(--blue-dark);
  background-color: var(--blue-light);
  border-left: 5px solid var(--blue-dark);
}

.container--syntax p {
  max-width: 100%;
}

.values__info {
  display: block;
  padding-left: 1.3em;
}

/* ===== Media queries ===== */
@media only screen and (max-width: 760px) {
  /* ----- Document Header ----- */
  #doc-header h1 {
    font-size: 2.5em;
  }

  .doc-header__links.is-open li{
    display: block;
  }

  .doc-header__more {
    display: inline-block;
  }

  .doc-header__links li {
    display: none;
    padding-left: 2.5em;
  }

  /* ----- Main article ----- */
  .main-article {
    padding: 1em;
  }
}

@media only screen and (max-width: 800px) {
    /* ----- Navbar ----- */
    #navbar {
      top: 0;
      padding: 1.2em 2em 2.95em;
      transform: translateX(-100%);
      transition: 0.2s ease-in-out;
      z-index: 30;
    }
  
    #navbar.is-open {
      transform: translateX(0);
      box-shadow: 0 0 20px -5px #000;
    }
  
    .navbar__btn {
      display: inline-block;
      position: fixed;
      bottom: 0;
      right: 0;
      margin: 0.5em;
      padding: 0 0.3em 0.3em;
      font-size: 2em;
      color: var(--grey-dark);
      background-color: var(--blue-normal);
      box-shadow: 1px 2px 12px -4px #000;
      border-radius: 50%;
      z-index: 31;
    }
  
    /* ----- Main article ----- */
    .main-article {
      margin-left: 0;
    }
}