html, body {
  font-weight: lighter;
  background-color: white;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: lighter;
}

a {
  color: #333;
}

a:hover {
  color: black;
}

.string-chunk {
  display:inline-block;
  word-break: break-all;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  margin-top: .5em;
  margin-bottom: .5em;
}

.markdown h1 {
  font-size: 1.4em;
}

.markdown h2 {
  font-size: 1.3em;
}

.markdown h3 {
  font-size: 1.25em;
}

.markdown h4 {
  font-size: 1.15em;
}

.markdown h5 {
  font-size: 1em;
  font-weight: bold;
}

.markdown h6 {
  font-weight: bold;
  font-size: .7em;
  text-transform: uppercase;
}

.expand {
  width: 20px;
  margin-bottom: -4px;
  transform: rotate(-90deg);
}

.children {
  display: none;
}

.is-open > .children {
  display: block;
}

.is-open > .property .expand {
  transform: rotate(0deg);
}

/* EXAMPLES */

.examples-payload-tab:checked + label {
  background-color: #38a89d;
  border-color: #38a89d;
}

.examples-payload-tab:checked ~ .payload-examples {
  display: block;
}

.examples-headers-tab:checked + label {
  background-color: #de751f;
  border-color: #de751f;
}

.examples-headers-tab:checked ~ .headers-examples {
  display: block;
}

.payload-examples polygon, .headers-examples polygon {
  fill: #fff;
}

.payload-examples .text-grey-lightest, .headers-examples .text-grey-lightest {
  align-self: center;
}

/* PANELS */

.sidebar-panel {
  display: none;
  overflow: auto;
}

.examples-panel {
  display: none;
}

.right-block {
  background-color: #263238;
  margin-top: 0;
  margin-bottom: 0;
  z-index: 1;
}

@media only screen and (min-width: 992px) {
  .sidebar-panel {
    display: block;
  }

  .content-panel {
    margin-left: 256px;
    width: calc((100% - 256px) * 0.4);
  }
}

@media only screen and (min-width: 1400px) {
  .responsive-container {
    display: flex;
  }

  .center-block {
    width: 60%;
  }

  .examples-panel {
    display: block;
    width: calc((100% - 256px) * 0.4);
    background-color: #263238;
  }

  .right-block {
    background-color: transparent;
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 40%;
  }
}

/* BURGER MENU */

#burger-menu {
  display: none;
}

@media only screen and (min-width: 992px) {
  #burger-menu + label {
    display: none;
  }
}

@media only screen and (max-width: 991px) {
  #burger-menu + label {
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    background: #4dc0b5;
    width: 60px;
    height: 60px;
    bottom: 60px;
    right: 20px;
    border-radius: 50%;
    z-index: 100;
  }
  #burger-menu + label .wrapper {
    display: block;
    align-self: center;
    width: 30px;
    height: 30px;
  }
  #burger-menu + label .wrapper span {
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 6px;
    background: white;
    transition: .5s;
  }
  #burger-menu + label:hover {
    cursor: pointer;
  }
  #burger-menu:checked + label .wrapper {
    margin-top: 12px;
  }
  #burger-menu:checked + label .wrapper span {
    opacity: 0;
    top: 50%;
  }
  #burger-menu:checked + label .wrapper span:first-child {
    opacity: 1;
    transform: rotate(405deg);
  }
  #burger-menu:checked + label .wrapper span:last-child {
    opacity: 1;
    transform: rotate(-405deg);
    margin-top: -9px;
  }
  #burger-menu ~ .sidebar-panel {
    position: fixed;
    display: block;
    height: 0;
    top: -500px;
    overflow: hidden;
    transition: .2s;
    z-index: 90;
    opacity: 0;
  }
  #burger-menu:checked ~ .sidebar-panel {
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 1;
    overflow: auto;
    text-align: center;
  }
  #burger-menu:checked ~ .sidebar-panel .sidebar-panel__content {
    display: inline-block;
    text-align: center;
    margin: 0 auto 200px auto;
  }
}