@import url('/styles/common.css');
@import url('/styles/variables.css');
@import url('/styles/scrollbar.css');
@import url('/styles/classes/breaks.css');
@import url('/styles/classes/flex.css');
@import url('/styles/classes/ul-directions.css');

@import url('/styles/components/footer.css');
@import url('/styles/components/header.css');
@import url('/styles/components/pre-icon.css');
@import url('/styles/components/reference.css');

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

body {
  max-width: 800px;
  min-width: 300px;
  padding: 4em;
  margin: 4.5em auto auto;

  background: var(--background);
  font-family: var(--mono-font);
  font-weight: 400;
  font-size: 15px;
  color: var(--text);
  caret-color: var(--primary);
}

img {
  width: 100%;
}

math {
  font-family: "Crimson Text";
}

pre.sourceCode {
  width: 100%;
  counter-reset: line-numbering;
}

code.sourceCode {
  width: 100%;
  padding: 1em;
  display: inline-block;
  overflow: scroll;
}

code.sourceCode > span {
  counter-increment: line-numbering;
}

code.sourceCode > span::before {
  content: counter(line-numbering);
  display: inline-block;
  width: 2em;
  margin-right: 1em;
  text-align: right;
  color: #888;
  user-select: none;
}

*, *::before, *::after {
  transition: all .3s ease-out;
}