@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter.ttf') format('truetype-variations');
  font-weight: 1 999;
}

@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/Newsreader.ttf') format('truetype-variations');
  font-weight: 1 999;
}

:root {
  --font-main: 'Inter', sans-serif;
  --font-header: 'Newsreader', serif;

  --color-background: #18181a;/*dark*/
  --color-border: #393939;/*dark-light*/
  --color-font: #fff;/*white*/
  --color-font-small: #aaa;/*white-light*/
  --color-heading: #e4609b;/*pink*/
  --color-strong: #e5b7cb;/*pink-light*/
  --color-button: #47bac0;/*cyan*/
  --color-accent: #e6db74;/*yellow*/
  --color-number: #3b88c3;/*blue*/
  --color-errors: #da9898;/*red*/
  --color-code-background: #292929;/*gray*/
  --color-code: #c7c7c7;/*gray-light*/
}

html {
  background-color: var(--color-background);
  scroll-behavior: smooth;
  overflow-wrap: anywhere;
  /*hyphens: auto;*/
}

body {
  overflow-y: scroll;
  font-family: var(--font-main);
  font-size: 1.3em;
  color: var(--color-font);
  max-width: 1000px;
  margin: 0 auto;
  padding: 5vw;
}

header,
h2,
footer {
  text-align: center;
}

main article {
  margin: 45px 0;
  border-radius: 20px;
  padding: 30px 3%;
}

main nav {
  display: flex;
  justify-content: center;
  margin: 10px 0 20px 0;
}

main nav,
footer {
  font-size: 0.8em;
  color: var(--color-font-small);
}

main nav p,
main nav ul {
  margin: 0;
}

main nav input {
  display: none;
}

main nav input:not(:checked) + ul {
  height: 0;
  overflow: hidden;
}

main nav label {
  margin-left: 40px;
  color: var(--color-button);
  cursor: pointer;
}

main nav label:hover {
  text-decoration: underline;
}

main nav ul li {
  padding: 0;
  list-style-type: disc;
}

section {
  margin: 20px 0 20px -1px;
  border-radius: 20px;
  border-left: 1px solid var(--color-border);
  padding: 1px 3%;
}

a {
  color: var(--color-button);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:not([target])::after {
  content: "→";
}

a[target="_blank"]::after {
  content: "↗";
}

a[href^="#"]::after {
  content: "↓";
}

a.to-top {
  background: var(--color-background);
  position: fixed;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: var(--color-border) 1px solid;
  border-radius: 30px;
  margin: 10px;
  text-decoration: none;
  display: none;
}

a.to-top::after {
  content: "↑";
}

a[href^="mailto"]::after {
  content: "✉";
}

a.error-link {
  pointer-events: none;
  text-decoration: line-through;
}

div.error-rc {
  margin: 0px calc(-1.5% - 1px) 10px calc(-1.5% - 1px);
  border-radius: 20px;
  padding: 1px 1.5%;
  border: 1px solid var(--color-errors);
}

div.error-bot {
  margin: 0px calc(-1.5% - 1px) 10px calc(-1.5% - 1px);
  border-radius: 20px;
  padding: 1px 1.5%;
  border: 1px dashed var(--color-errors);
}

div.error-rc::before {
  background: var(--color-background);
  display: table;
  margin: -10px 0;
  content: "The contained text does not apply until we return to rocketchat." !important;
  color: var(--color-errors);
  font-size: 0.8em;
}

div.error-bot::before {
  background: var(--color-background);
  display: table;
  margin: -10px 0;
  content: "The bot is down and unable to perform the described tasks, staff may do them manually." !important;
  color: var(--color-errors);
  font-size: 0.8em;
}

div.error-rc > *,
div.error-bot > * {
  text-decoration: line-through;
  opacity: .5;
}

header > a {
  display: inline-block;
  margin-bottom: 10px;
  text-decoration: none !important;
}

header > a::after {
  content: "" !important;
}

header > a img {
  width: 50px;
  height: 50px;
}

header > a h1 {
  min-height: 50px;
  line-height: 50px;
}

header > a img,
header > a h1 {
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-header);
  color: var(--color-heading);
  font-weight: bold;
}

h1,
h2 span {
  display: inline-block;
  background: linear-gradient(45deg, var(--color-heading), var(--color-button));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h1 {
  font-size: 2em;
}

h2 {
  margin: 0;
  font-size: 1.8em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.17em;
}

h5 {
  font-size: 1em;
}

h6 {
  font-size: .83em;
}

p,
li {
  line-height: 1.5;
}

li {
  padding: 5px;
}

.r-list {
  margin-left: 40px;
}

.r-list li {
  position: relative;
}

.r-list img {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 5px;
  left: -75px;
}

code {
  background: var(--color-code-background);
  color: var(--color-code);
  padding: 5px;
  border-radius: 5px;
  -webkit-user-select: all;
  user-select: all;
}

code.block {
  display: block;
  margin: 1em 0;
}

strong {
  color: var(--color-strong);
  font-weight: bold;
}

b {
  background: var(--color-number);
  padding: 0 0.3em;
  border-radius: 2px;
}

li p {
  margin: 10px 0;
}

li > p:first-child {
  margin-top: 0;
}

li > p:last-of-type {
  margin-bottom: 0;
}

/*js highlight*/
.js-on h2 span,
.js-on h3 span,
.js-on h3 span,
.js-on h4 span,
.js-on h5 span,
.js-on h6 span {
  cursor: pointer;
}

.highlight {
  box-shadow: inset var(--color-accent) 0px 0px 30px -10px;
}