.page-cheatmd .content-inner {
  --horizontal-space: 1.5em;
  --vertical-space: 1em;
}

@media (max-width: 600px) {
  .page-cheatmd .content-inner {
    --horizontal-space: 1em;
    --vertical-space: 0.75em;
  }
}

.page-cheatmd .content-inner {
  max-width: 1200px;
}

/* h1 */

.page-cheatmd .content-inner h1 {
  margin-bottom: var(--vertical-space);
}

/* h2 */

.page-cheatmd .content-inner h2 {
  margin: var(--vertical-space) 0;
  column-span: all;
  color: var(--gray700);
  font-weight: 500;
}

.page-cheatmd.dark .content-inner h2 {
  color: var(--gray200);
}

/* h3 */

.page-cheatmd .content-inner h3 {
  color: var(--main);
  text-decoration-color: var(--main);
  margin: 0 0 1em;
  font-weight: 400;
}

.page-cheatmd .content-inner h3 :is(a, a:visited) {
  color: var(--main);
  text-decoration-color: var(--main);
}

.page-cheatmd .content-inner section.h3 {
  min-width: 300px;
  margin: 0;
  padding: 0 0 calc(var(--vertical-space) * 2) 0;
  break-inside: avoid;
}

.page-cheatmd .content-inner h3 .text {
  overflow: hidden; /* Clips generated content horizontal rule */
}

.page-cheatmd .content-inner h3 .text::after {
  content: "";
  margin-left: calc(var(--horizontal-space) / 2);
  vertical-align: baseline;
  display: inline-block;
  width: 100%;
  height: 1px;
  margin-right: -100%;
  margin-bottom: 5px;
  background-color: var(--codeBorder);
}

/* h4 */

.page-cheatmd .content-inner h4 {
  display: block;
  margin: 0;
  padding: 0.25em var(--horizontal-space);
  font-weight: 400;
  background: var(--gray100);
  color: #567;
  border: solid 1px 1px 0 1px var(--gray100);
}

.page-cheatmd.dark .content-inner h4 {
  background: #192f50;
  color: var(--textBody);
  border: 1px solid #192f50;
  border-bottom: 0;
}

/* Paragraphs */

.page-cheatmd .content-inner .h2 p {
  margin: 0;
  display: block;
  background: var(--gray50);
  padding: var(--vertical-space) var(--horizontal-space);
}

.page-cheatmd.dark .content-inner .h2 p {
  background: var(--gray700);
}

.page-cheatmd .content-inner .h2 p > code {
  color: #eb5757;
  border-radius: var(--borderRadius);
  padding: 0.2em 0.4em;
}

/* Code blocks */

.page-cheatmd .content-inner pre code {
  padding: var(--vertical-space) var(--horizontal-space);
}

.page-cheatmd .content-inner pre code::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.6rem;
}

.page-cheatmd .content-inner .h2 pre {
  margin: 0;
}

.page-cheatmd .content-inner .h2 pre + pre {
  margin-top: -1px;
}

.page-cheatmd .content-inner pre.wrap {
  white-space: break-spaces;
}

@media screen and (max-width: 768px) {
  .page-cheatmd .content-inner pre code {
    border-left-width: 1px !important;
    border-right-width: 1px !important;
  }
}

/* Tables */

.page-cheatmd .content-inner .h2 table {
  display: table;
  box-sizing: border-box;
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.page-cheatmd .content-inner .h2 th {
  padding: var(--vertical-space) var(--horizontal-space);
  line-height: inherit;
  margin-bottom: -1px;
  vertical-align: middle;
  border-bottom: 1px solid var(--codeBorder);
}

.page-cheatmd .content-inner .h2 td {
  padding: var(--vertical-space) var(--horizontal-space);
  border: 0;
  border-bottom: 1px solid var(--codeBorder);
}

.page-cheatmd .content-inner .h2 tr:first-child {
  border-top: 1px solid var(--codeBorder);
}

.page-cheatmd .content-inner .h2 td code {
  color: #eb5757;
  border-radius: var(--borderRadius);
  padding: 0.2em 0.4em;
}

.page-cheatmd .content-inner .h2 thead {
  background-color: var(--gray50);
}

.page-cheatmd.dark .content-inner .h2 thead {
  background-color: var(--gray700);
}

.page-cheatmd .content-inner .h2 tbody {
  background-color: var(--codeBackground);
}

/* Lists */

.page-cheatmd .content-inner .h2 :is(ul, ol) {
  margin: 0;
  padding: 0;
}

.page-cheatmd .content-inner .h2 li {
  list-style-position: inside;
  padding: 0.5em var(--horizontal-space);
  line-height: 2em;
  vertical-align: middle;
  background-color: var(--codeBackground);
  border-bottom: 1px solid var(--codeBorder);
  margin-top: 0;
}

.page-cheatmd .content-inner .h2 :is(ul, ol) + pre code {
  border-top: 0;
}

.page-cheatmd .content-inner .h2 li > code {
  color: #eb5757;
  border-radius: var(--borderRadius);
  padding: 0.2em 0.4em;
}

/* Columns */

.page-cheatmd .content-inner section.width-50 {
  display: block;
  width: 50%;
  margin: 0;
}

.page-cheatmd .content-inner section.width-50 > section > table {
  width: 100%;
}

.page-cheatmd .content-inner section:is(.col-2, .col-2-left, .col-3) {
  column-gap: 40px;
}

.page-cheatmd .content-inner section.col-2 {
  column-count: 2;
  height: auto;
}

.page-cheatmd .content-inner section.col-2-left {
  display: grid;
  grid-template-columns: calc(100% / 3) auto;
}

.page-cheatmd .content-inner section.col-2-left > h2 {
  grid-column-end: span 2;
}

.page-cheatmd .content-inner section.col-3 {
  column-count: 3;
  height: auto;
}

.page-cheatmd .content-inner section.list-4 > ul {
  display: flex;
  flex-wrap: wrap;
}

.page-cheatmd .content-inner section.list-4 > ul > li {
  flex: 0 0 calc(100% / 4);
}

.page-cheatmd .content-inner section.list-6 > ul {
  display: flex;
  flex-wrap: wrap;
}

.page-cheatmd .content-inner section.list-6 > ul > li {
  flex: 0 0 calc(100% / 6);
}

/* Layout adjustments for smaller viewports. Limited to screen as sufficient width is assumed when printing. */

@media screen and (max-width: 1400px) {
  .page-cheatmd .content-inner section.col-3 {
    column-count: 2;
  }

  .page-cheatmd .content-inner section.col-2-left {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (max-width: 1200px) {
  .page-cheatmd .content-inner section:is(.col-2, .col-3) {
    display: flex;
    flex-direction: column;
  }

  .page-cheatmd .content-inner section.list-6 > ul > li {
    flex: 0 0 calc(100% / 4);
  }
}

@media screen and (max-width: 1000px) {
  .page-cheatmd .content-inner section:is(.list-4, .list-6) > ul > li {
    flex: 0 0 calc(100% / 3);
  }
}

@media screen and (max-width: 600px) {
  .page-cheatmd .content-inner section:is(.list-4, .list-6) > ul > li {
    flex: 0 0 calc(100% / 2);
  }

  .page-cheatmd .content-inner section.width-50 {
    width: 100%;
  }
}