:root {
  --font-family: 'Roboto', Arial, sans-serif;
  --color-bg: #f5f6fa;
  --color-text: #232323;
  --color-header-bg: #20282f;
  --color-header-text: #fff;
  --color-sidebar-bg: #222c35;
  --color-sidebar-text: #ccc;
  --color-link: #a8b6c1;
  --color-link-hover: #33aadd;
  --color-link-active-bg: #24303a;
  --color-active-border: #33aadd;
  --color-active-shadow: #e3f7fd;
  --color-separator-bg: #dae1e8;
  --color-separator-hover: #33aadd;
  --border-radius: 7px;
  --transition-speed: 0.2s;
}

body {
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text);
  height: 100vh;
  margin: 0;
  padding: 0;
}

.wiki-container {
  display: flex;
  min-height: 100vh;

  .no-select {
    user-select: none;
  }

  .wiki-separator {
    width: 7px;
    cursor: ew-resize;
    background: var(--color-separator-bg);
    min-height: 100vh;
    position: relative;
    z-index: 2;
    touch-action: none;

    &:hover {
      background: var(--color-separator-hover);
    }
  }

  .wiki-sidebar {
    min-width: 180px;
    width: 550px;
    max-width: 840px;
    background: var(--color-sidebar-bg);
    color: var(--color-sidebar-text);
    padding: 2em 1em 2vh 1.2em;
    position: sticky;
    top: 0;
    height: 100vh;
    resize: horizontal;
    transition: width 0.1s;
    overflow-y: auto;

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        margin-bottom: 0.8em;
      }
    }

    a {
      color: var(--color-link);
      text-decoration: none;
      font-weight: 500;
      display: block;
      border-left: 3px solid transparent;
      padding-left: 0.6em;
      transition: color var(--transition-speed);

      &.active,
      &:hover {
        color: var(--color-link-hover);
        border-left: 3px solid var(--color-link-hover);
        background: var(--color-link-active-bg);
      }
    }
  }
}

  .wiki-content {
    flex: 1;
    max-width: 1000px;
    margin: 1.5em auto 1em auto;
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 3px 15px 0 rgba(30, 40, 55, 0.06);
 & h5 {
 padding-left: 2rem ;
 }
    section {
      padding: 1.5em 2em;
      border-bottom: 1px solid #eee;

      &.active-link {
        background: rgba(30, 40, 55, 0.06);
        transition: box-shadow var(--transition-speed), border var(--transition-speed);
      
      & a {
        color: var(--color-separator-hover);
        text-decoration: none;
        transition: color var(--transition-speed);

        &:visited {
          color: var(--color-link-hover);
        }
      }
    }
  }
}

h2 {
  border-bottom: 2px solid var(--color-separator-bg);
  padding-bottom: 0.35em;
  margin-top: 2em;
}

i {
    & a {
      color: var(--color-link);
      text-decoration: none;
      font-weight: bolder;
      transition: color var(--transition-speed);

      &:hover {
        color: var(--color-link-hover);
      }

      &:visited {
        color: var(--color-link-hover);
      }
    }
}

@media (max-width: 850px) {
  .wiki-container {
    flex-direction: column;

    .wiki-sidebar {
      position: static;
      width: 100vw;
      height: auto;
    }

    .wiki-content {
      padding: 1em;
      margin: 1em;
    }
  }
}