@import "support/normalize.css";
@import "support/kitabu.css";
@import "support/notes.css";
@import "support/toc.css";

:root {
  --cover-color: var(--accent-color);
  --link-color: var(--accent-color);
}

html {
  background: #eee;
  padding: 50px;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  width: 700px;
  padding: 50px;
  background: #fff;
  margin: 0 auto;
  line-height: 1.4;
}

a {
  color: var(--link-color);
}

p code,
li code {
  color: #3f9c55;
  font-size: 13px;
}

.two-columns {
  columns: 2;
  gap: 50px;
}

/* Format cover page. */
.frontcover {
  background: var(--cover-color);
  color: #fff;
  padding: 50px;
  margin: -50px -50px 50px -50px;
  text-align: center;
}

.frontcover * {
  margin: 0;
}

.frontcover .description {
  width: 45%;
  margin: 20px auto;
  color: rgba(#fff, 0.7);
}

.frontcover .creators {
  font-weight: thin;
  text-transform: uppercase;
  font-size: 24px;
}

/* Define asterism. */
.chapter + .chapter:before {
  content: "\2234";
  display: block;
  text-align: center;
  font-size: 24px;
  padding: 50px 0;
}

.chapter > h1 {
  margin-top: 0;
}

/* Code highlighting */
div.highlight {
  padding: 15px;
}

div.highlight pre {
  margin: 0;
  overflow: auto;
  font-size: 13px;
}

/* Table of contents */
.toc {
  padding-bottom: 50px;
  margin-bottom: 50px;
  border-bottom: 1px solid #eee;
}

/* Define chapter numbering  */
.sections {
  counter-reset: chapter 0;
}

.chapter {
  counter-increment: chapter;
}

.chapter h1:before {
  content: var(--chapter-text) " " counter(chapter);
  display: block;
  text-transform: uppercase;
  font-weight: normal;
  color: #db0209;
  font-size: 14px;
}

.chapter h3 {
  margin-top: 50px;
}

/* Footnotes */
.footnotes {
  margin-top: 50px;
  padding-top: 25px;
  border-top: 1px solid #eee;
}

.footnotes hr {
  display: none;
}

/* Logo */
.logo img {
  max-width: 350px;
}

/* Format lexers list */
.lexers {
  margin: 0;
  padding: 0;
}

.lexers li {
  break-inside: avoid-column;
}

.lexers span {
  font-size: 13px;
  word-wrap: anywhere;
}

.lexers li + li {
  margin-top: 15px;
}

/* Format imprint */
.imprint {
  margin-top: 50px;
  padding-top: 50px;
  border-top: 1px solid #eee;
}

.imprint * {
  margin: 0;
  font-size: 12px;
}

.imprint .description {
  margin-bottom: 10px;
}

/* Go top */
.go-top {
  position: fixed;
  right: 25px;
  bottom: 25px;
  text-decoration: none;
  display: inline-block;
  text-indent: -9999px;
  background: url(../images/up.svg) no-repeat center center;
  background-size: cover;
  width: 60px;
  height: 60px;
  opacity: 0.25;
  transition: 0.5s opacity;
}

.go-top:hover {
  opacity: 0.4;
}

/* Changelog */
.changelog:before {
  content: "\2234";
  display: block;
  text-align: center;
  font-size: 24px;
  padding: 50px 0;
}

/* Table of contents  */
.table-of-contents {
  padding-bottom: 50px;
  margin-bottom: 50px;
  border-bottom: 1px solid #eee;
}
