@font-face {
  src: url('/css/fonts/Tektur-Bold.woff2') format('woff2');
  font-family: Tektur;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html, body {
  margin: 0;
  padding: 0;
  color: #f6f6f6;
  font-family: system-ui, Tahoma, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.33;
}

html {
  background: #150E15 url('/css/images/bg.png?1') top left repeat-x;
  background-size: 8px 80px;
}

@media (min-resolution: 2x) {
  html {
    background-image: url('/css/images/bg@2x.png?1');
  }
}

@media (min-resolution: 3x) {
  html {
    background-image: url('/css/images/bg@3x.png?1');
  }
}

body {
  padding: 0 16px;
  background-repeat: no-repeat;
  background-size: 100% 64px;
}

header, main {
  max-width: 800px;
  margin: 0 auto;
}

header {
  padding: 48px 0;
  margin-bottom: 24px;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: Tektur, sans-serif;
  color: #fff;
}

article {
  position: relative;
}

article > a {
  color: #fff;
  text-decoration: none;
}

article > a:hover h1 {
  text-decoration: underline;
}

article p a, article h3 a, #TableOfContents a, table td a {
  color: inherit;
}

article p a:hover, article h3 a:hover {
  text-decoration: none;
}

article + article {
  margin-top: 48px;
}

article + article::before {
  content: '';
  position: absolute;
  left: 25%;
  right: 25%;
  top: -18px;
  height: 1px;
  background: rgba(128, 0, 128, 0.1);
}

article p a[href^="#"], #TableOfContents a[href^="#"] {
  text-decoration-style: dotted;
}

article p {
  margin: 16px 0;
}

article figure {
  margin: 16px 0;
}

h1 + p, h2 + p, h3 + p {
  margin-top: 8px;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

h2:not(:first-child) {
  margin-top: 36px;
}

h3:not(:first-child) {
  margin-top: 36px;
}

h4:not(:first-child) {
  margin-top: 32px;
}

main {
  padding-bottom: 48px;
}

blockquote {
  font-style: italic;
}

hr {
  position: relative;
  text-align: center;
  font-size: 14px;
  border: 0;
  color: #4f374f;
}

hr::before {
  content: '❦';
}

figure {
  margin: 0;
  text-align: center;
}

p + figure {
  margin-top: 16px;
}

figure > img {
  max-width: 100%;
}

video {
  max-width: 100%;
}

details {
  padding: 4px 8px;
  margin: 16px 0;
  border: 1px solid #2b0b2b;
  background: #2b0b2b55;
}

details > p:last-child {
  margin-bottom: 8px;
}

summary {
  margin: -4px -8px;
  padding: 4px 8px 6px 4px;
  cursor: pointer;
  background: #2b0b2b;
}

summary:hover {
  background: #421142;
}

pre {
  padding: 4px 8px;
  overflow: auto;
  background: #201720 !important; /* !important overrides `.highlight pre` inline styles */
  color: #bfbfbf;
}

.highlight pre code span[style*="background-color:#e5e5e5"] {
  background: rgba(113, 33, 113, 0.51) !important;
  margin: 0 -8px;
  padding: 0 8px;
}

article p > img:only-child {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

article table th {
  text-align: left;
}

article table th, article table td {
  vertical-align: top;
  padding: 16px 16px 0 0;
}

article table p:first-child {
  margin-top: 0;
}

article table p:last-child {
  margin-bottom: 0;
}

.meta {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
}

.outdated {
  background: #ffa5004f;
  padding: 16px;
  margin-bottom: 36px;
}

/* для главной */
article + .outdated {
  margin-top: 36px;
}

.outdated p:last-child {
  margin-bottom: 0;
}

.tldr {
  padding: 16px;
  margin: 24px 0;
  border: 2px solid #ffa5004f;
  background: none;
}

.tldr p:last-child {
  margin-bottom: 0;
}

article ul, article ol {
  padding: 0 0 0 32px;
}

.lost-img {
  padding: 16px;
  max-width: 480px;
  margin: 32px auto;
  background: #80808040;
  color: #808080;
  text-align: center;
}

.comments {
  margin-top: 48px;
}

.comment {
  margin-top: 24px;
}

.comment__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment__meta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.3);
}

.comment__meta p strong {
  color: #fff;
}

.comment__body p {
  margin-top: 8px;
  margin-bottom: 0;
}

.comment__lost-img {
  margin-left: 0;
  margin-right: 0;
}

.no-comments {
  margin-top: 24px;
}

.no-comments p {
  margin: 0;
  color: #ffa500c4;
}

.job {
  white-space: nowrap;
  color: #FFE7B1;
}

.job img {
  margin-bottom: -11px;
  margin-right: .05em;
}

.skill {
  white-space: nowrap;
}

.skill img {
  margin-right: .2em;
  margin-bottom: -2px;
}

.skill_type_strength, .attribute_type_strength {
  color: #cc250d;
}

.skill_type_flexibility, .attribute_type_flexibility {
  color: #387b36;
}

.skill_type_dexterity, .attribute_type_dexterity {
  color: #3863ac;
}

.skill_type_charisma, .attribute_type_charisma {
  color: #f4dd64;
}

.attribute {
  white-space: nowrap;
}

.attribute img {
  margin-bottom: -7px;
  margin-right: .2em;
}

.item {
  white-space: nowrap;
}

.item img {
  position: relative;
  top: -2px;
  margin-bottom: -11px;
  margin-right: .15em;
}

.set {
  display: flex;
  gap: 8px;
}

p + .set {
  /* TODO: too nasty here; you'd better move set name into the .set and set (haha) padding there */
  margin-top: -8px;
}

.set a {
  padding: 2px;
  background: #292029;
  border: 1px solid #3c2b3c;
}

.set a:hover {
  border: 1px solid #653f65;
}

.set a img {
  display: block;
  max-height: 36px;
  max-width: 100%;
}

/* only-child here overrides p > img styles; a bit nasty though =/ */
.inline-img, .inline-img:only-child {
  display: inline-block;
}

.event-currency-icon_type_flower {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
}

/* mathjax */
mjx-container {
  padding: 4px 0;
  overflow: auto;
}

.chat {
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 13px;
  background: #1D1C1C;
}

.chat__item {
  margin: 2px 0;
}

.chat__item_view_system {
  color: #ff0;
}

.chat__item_view_system .chat__meta {
  color: #ff0;
}

.chat__meta {
  font-weight: 600;
  color: #b7a97e;
}

/* emoticons */
.chat__item img {
  vertical-align: top;
  margin-top: -1px;
}