:root {
  --COLOR_LINKS: #539dff;

  --COLOR_MAIN: #eaecef;
  --COLOR_BACKGROUND: #6657A6;
  --COLOR_CODE: #ffa033;

  --BACKGROUND_COLOR_MAIN: #2B2E32;
  --BACKGROUND_COLOR_SECONDARY: #171B1F;
  --BACKGROUND_COLOR_CODE: #3b3f45;

  --BORDER_COLOR_MAIN: #3d444d;
  --BORDER_COLOR_CODE: #787878;
}

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

html {
  color: var(--COLOR_MAIN);
  background-color: var(--BACKGROUND_COLOR_SECONDARY);
}

section {
  background-color: var(--BACKGROUND_COLOR_MAIN);
}
:root {
  --FONT_FAMILY_MONOSPACE: 'Consolas', 'Monospace';
  --FONT_FAMILY_SANS: "Segoe UI", 'Roboto', 'Noto', "Helvetica Neue", 'Arial', 'sans-serif';
  --FONT_FAMILY_SERIF: 'Athelas', 'Constantia', 'Georgia', 'serif';

  --FONT_SIZE_MAIN: 1rem;

  --FONT_SIZE_H1: 3.05rem;
  --FONT_SIZE_H2: 2.44rem;
  --FONT_SIZE_H3: 1.95rem;
  --FONT_SIZE_H4: 1.56rem;
  --FONT_SIZE_H5: 1.25rem;
  --FONT_SIZE_H6: 1.11rem;

  --FONT_WEIGHT_HEADER: 600;
}

html {
  font-size: var(--FONT_SIZE_MAIN);
  font-family: var(--FONT_FAMILY_SANS);
}

pre,
code {
  font-family: var(--FONT_FAMILY_MONOSPACE);
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--FONT_WEIGHT_HEADER);
}

h1 {
  font-size: var(--FONT_SIZE_H1);
}

h2 {
  font-size: var(--FONT_SIZE_H1);
}

h2 {
  font-size: var(--FONT_SIZE_H2);
}

h3 {
  font-size: var(--FONT_SIZE_H3);
}

h4 {
  font-size: var(--FONT_SIZE_H4);
}

h5 {
  font-size: var(--FONT_SIZE_H5);
}

h6 {
  font-size: var(--FONT_SIZE_H6);
}
:root {
  --PADDING_MAIN: 12px;

  --BORDER_SIZE_BIG: 4px;
  --BORDER_SIZE_SMOL: 0.5px;

  --BORDER_RADIUS_MAIN: 5px;
  --BORDER_RADIUS_CODE: 5px;

  --MARGIN_MAIN: 1rem;
}

pre,
code {
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

section {
  border: var(--BORDER_SIZE_SMOL) solid var(--BORDER_COLOR_MAIN);
  border-left: var(--BORDER_SIZE_BIG) solid var(--COLOR_BACKGROUND);
  border-radius: var(--BORDER_RADIUS_MAIN);

  padding: var(--PADDING_MAIN);
}

/* Everything below is for styling the markdown.
 * It mostly comes from github-markdown-css.
 */

/* HEADERS */

h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type,
h5:first-of-type,
h6:first-of-type {
  margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 1.5rem;
  margin-bottom: var(--MARGIN_MAIN);
  line-height: 1.25;
}

/* MARGIN_MAINS */

p,
blockquote,
ul,
ol,
dl,
table,
details,
hr {
  margin-top: 0;
  margin-bottom: var(--MARGIN_MAIN);
}

pre {
  margin-top: 0 !important;
  margin-bottom: var(--MARGIN_MAIN) !important;
}

/* LISTS */

ul ul,
ul ol,
ol ul,
ol ol {
  margin-bottom: 0;
}

ol ol,
ul ol {
  list-style-type: lower-roman;
}

ul ul ol,
ul ol ol,
ol ul ol,
ol ol ol {
  list-style-type: lower-alpha;
}

li>p {
  margin-bottom: 0;
}

li>p+p {
  margin-top: var(--MARGIN_MAIN);
}

/* PRE/CODE */

p code,
table code,
pre:has(code) {
  background-color: var(--BACKGROUND_COLOR_CODE) !important;
  border-radius: var(--BORDER_RADIUS_CODE) !important;
  border: var(--BORDER_SIZE_SMOL) solid var(--BORDER_COLOR_CODE) !important;
  color: var(--COLOR_CODE);
}

code {
  padding: .2em .4em;
  font-size: 85%;
  white-space: break-spaces;
}

pre code,
pre:has(code) {
  padding: 0;
  font-size: 100%;
  white-space: pre;
}

/* TABLES */

table {
  border-spacing: 0;
  border-collapse: separate;

  display: block;
  width: max-content;
  max-width: 100%;
  overflow: auto;
  font-variant: tabular-nums;

  background-color: var(--BACKGROUND_COLOR_CODE);
}

table th,
table td {
  padding: 6px 13px;
  border-top: var(--BORDER_SIZE_SMOL) solid var(--BORDER_COLOR_CODE);
  border-left: var(--BORDER_SIZE_SMOL) solid var(--BORDER_COLOR_CODE);
}

table tr:last-child td {
  border-bottom: var(--BORDER_SIZE_SMOL) solid var(--BORDER_COLOR_CODE);
}

table td:last-child,
table th:last-child {
  border-right: var(--BORDER_SIZE_SMOL) solid var(--BORDER_COLOR_CODE);
}

table tr:first-child th:first-child {
  border-top-left-radius: var(--BORDER_RADIUS_CODE);
}

table tr:first-child th:last-child {
  border-top-right-radius: var(--BORDER_RADIUS_CODE);
}

table tr:last-child td:last-child {
  border-bottom-right-radius: var(--BORDER_RADIUS_CODE);
}

table tr:last-child td:first-child {
  border-bottom-left-radius: var(--BORDER_RADIUS_CODE);
}

/* BLOCK-QUOTES */

blockquote {
  padding: 0 1em;
  border-left: var(--BORDER_SIZE_SMOL) solid var(--BORDER_COLOR_CODE);
}

blockquote:has(+ blockquote) {
  margin-bottom: 0;
  padding-bottom: var(--MARGIN_MAIN);
}

blockquote p {
  margin-bottom: 0;
  padding-bottom: var(--MARGIN_MAIN);
}

blockquote P:last-child {
  padding-bottom: 0;
}

/* IMAGES */

img {
  background-color: transparent;
  border-style: none;
  max-width: 100%;
  box-sizing: content-box;
  object-fit: cover;
}

/* Horizontal rules */

hr {
  box-sizing: content-box;
  overflow: hidden;
  background: transparent;

  border-bottom: var(--BORDER_SIZE_SMOL) solid var(--BORDER_COLOR_CODE);
}

h1:has(+hr),
h2:has(+hr),
h3:has(+hr),
h4:has(+hr),
h5:has(+hr),
h6:has(+hr) {
  padding-bottom: 0.3em;
  margin-bottom: 0;
}

h1+hr,
h2+hr,
h3+hr,
h4+hr,
h5+hr,
h6+hr {
  border-color: var(--COLOR_MAIN);
}

hr::before {
  display: table;
  content: "";
}

hr::after {
  display: table;
  clear: both;
  content: "";
}