.article-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 600px;
}
.article-content .header {
  position: relative;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 100%;
}
.article-content .header .title-art {
  position: absolute;
  top: 50%;
  padding: 16px;
  font-family: AnonymousPro, serif;
  font-weight: bold;
  font-size: 100px;
  line-height: 84px;
  width: 900px;
  max-height: 340px;
  overflow: hidden;
  color: #242424;
}
.article-content .header .title-art.mobile {
  display: none;
  z-index: -1;
  top: 0;
  right: 0;
  writing-mode: vertical-rl;
  width: auto;
  font-size: 34px;
  line-height: 34px;
}
.article-content .header .title-art-left {
  right: 100%;
  transform: scale(-1, 1) translateY(-50%);
}
.article-content .header .title-art-right {
  transform: translateY(-50%);
  left: 100%;
}
.article-content .header h1 {
  margin-bottom: 20px;
  font-family: SourceCodePro, sans-serif;
  font-size: 50px;
  font-weight: bold;
  line-height: 50px;
  color: #fff;
}
.article-content .header .article-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.article-content .header .article-info .status {
  font-family: AnonymousPro, serif;
  font-size: 18px;
  color: #616161;
}
.article-content .header .article-info .creator {
  display: flex;
  align-items: center;
  gap: 10px;
}
.article-content .header .article-info .creator .wb {
  text-align: right;
  font-family: AnonymounsPro, serif;
  font-size: 16px;
  color: #c6c6c6;
}
.article-content .header .article-info .creator .author-image {
  width: 60px;
  height: 60px;
  background-image: url("/images/portrait_gray.jpeg");
  background-size: 140%;
  background-position: 50% 60%;
  background-repeat: no-repeat;
}
.article-content .content {
  margin-top: 30px;
  margin-bottom: 30px;
  width: 600px;
  color: #fff;
}
.article-content .content .tiptap {
  min-height: 300px;
}
.article-content .content p code,
.article-content .content h1 code,
.article-content .content h2 code,
.article-content .content h3 code {
  padding: 1px 4px;
  font-family: Sen, sans-serif;
  font-family: AnonymousPro, monospace;
  font-weight: bold;
  background-color: #dfdfdf;
  color: #0c0c0c;
  border-radius: 2px;
}
.article-content .content p code::before, .article-content .content p code::after,
.article-content .content h1 code::before,
.article-content .content h1 code::after,
.article-content .content h2 code::before,
.article-content .content h2 code::after,
.article-content .content h3 code::before,
.article-content .content h3 code::after {
  content: "`";
  color: #0c0c0c;
}
.article-content .content h1,
.article-content .content h2,
.article-content .content h3 {
  margin-bottom: -2px;
  font-family: Sen, sans-serif;
}
.article-content .content h1:not(:first-child),
.article-content .content h2:not(:first-child),
.article-content .content h3:not(:first-child) {
  padding-top: 18px;
}
.article-content .content h1 {
  font-size: 36px;
}
.article-content .content h2 {
  font-size: 30px;
}
.article-content .content h3 {
  font-size: 24px;
}
.article-content .content p {
  margin-top: 18px;
  margin-bottom: 18px;
  line-height: 1.5;
  font-family: Sen, sans-serif;
  font-size: 18px;
}
.article-content .content p.is-empty {
  margin: 0;
  height: 10px;
}
.article-content .content ol,
.article-content .content ul {
  border-color: red;
  margin-top: 18px;
  margin-bottom: 18px;
}
.article-content .content ol ol, .article-content .content ol ul,
.article-content .content ul ol,
.article-content .content ul ul {
  margin-top: 6px;
  margin-bottom: 6px;
}
.article-content .content ol li,
.article-content .content ul li {
  margin-bottom: 6px;
}
.article-content .content ol li p,
.article-content .content ul li p {
  margin: 0;
}
.article-content .content pre {
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 16px 20px;
  line-height: 1.3;
  background: #101010;
  white-space: pre;
  overflow-x: scroll;
}
.article-content .content pre code {
  padding: 0;
  font-family: SourceCodePro, monospace;
  font-family: AnonymousPro, monospace;
  font-size: 18px;
  color: #fff;
}
.article-content .content img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}
.article-content .content a {
  position: relative;
  text-decoration: none;
  color: #F2AF29;
}
.article-content .content a::before {
  content: "://";
}
.article-content .content a:after {
  position: absolute;
  top: 100%;
  left: 0;
  content: "";
  width: 0%;
  transition: width 0.2s ease;
  height: 2px;
  background-color: #F2AF29;
}
.article-content .content a:hover {
  cursor: pointer;
}
.article-content .content a:visited {
  color: #F2AF29;
}

@media (max-width: 700px) {
  .article-content {
    padding: 0 30px;
    box-sizing: border-box;
    width: 100%;
  }
  .article-content .header .title-art {
    display: none;
  }
  .article-content .header .title-art.mobile {
    display: block;
  }
  .article-content .header h1 {
    font-size: 44px;
    line-height: 44px;
  }
  .article-content .content {
    width: 100%;
  }
}
@media (max-width: 500px) {
  .article-content .header h1 {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 10px;
  }
  .article-content .header .article-info {
    flex-direction: column;
  }
  .article-content .header .article-info .status {
    align-self: flex-start;
    margin-bottom: 10px;
  }
  .article-content .header .article-info .creator {
    align-self: flex-end;
  }
  .article-content .header .article-info .creator .author-image {
    width: 50px;
    height: 50px;
  }
  .article-content .content h1 {
    font-size: 30px;
  }
  .article-content .content h2 {
    font-size: 24px;
  }
  .article-content .content h3 {
    font-size: 20px;
  }
}
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

code.hljs {
  padding: 3px 5px;
}

/*!
  Theme: Grayscale Dark
  Author: Alexandre Gavioli (https://github.com/Alexx2/)
  License: ~ MIT (or more permissive) [via base16-schemes-source]
  Maintainer: @highlightjs/core-team
  Version: 2021.09.0
*/
/*
  WARNING: DO NOT EDIT THIS FILE DIRECTLY.

  This theme file was auto-generated from the Base16 scheme grayscale-dark
  by the Highlight.js Base16 template builder.

  - https://github.com/highlightjs/base16-highlightjs
*/
/*
base00  #101010  Default Background
base01  #252525  Lighter Background (Used for status bars, line number and folding marks)
base02  #464646  Selection Background
base03  #525252  Comments, Invisibles, Line Highlighting
base04  #ababab  Dark Foreground (Used for status bars)
base05  #b9b9b9  Default Foreground, Caret, Delimiters, Operators
base06  #e3e3e3  Light Foreground (Not often used)
base07  #f7f7f7  Light Background (Not often used)
base08  #7c7c7c  Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
base09  #999999  Integers, Boolean, Constants, XML Attributes, Markup Link Url
base0A  #a0a0a0  Classes, Markup Bold, Search Text Background
base0B  #8e8e8e  Strings, Inherited Class, Markup Code, Diff Inserted
base0C  #868686  Support, Regular Expressions, Escape Characters, Markup Quotes
base0D  #686868  Functions, Methods, Attribute IDs, Headings
base0E  #747474  Keywords, Storage, Selector, Markup Italic, Diff Changed
base0F  #5e5e5e  Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?>
*/
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

code.hljs {
  padding: 3px 5px;
}

.hljs {
  color: #b9b9b9;
  background: #101010;
}

.hljs::selection,
.hljs ::selection {
  background-color: #464646;
  color: #b9b9b9;
}

/* purposely do not highlight these things */
/* base03 - #525252 -  Comments, Invisibles, Line Highlighting */
.hljs-comment {
  color: #525252;
}

/* base04 - #ababab -  Dark Foreground (Used for status bars) */
.hljs-tag {
  color: #ababab;
}

/* base05 - #b9b9b9 -  Default Foreground, Caret, Delimiters, Operators */
.hljs-subst,
.hljs-punctuation,
.hljs-operator {
  color: #b9b9b9;
}

.hljs-operator {
  opacity: 0.7;
}

/* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */
.hljs-bullet,
.hljs-variable,
.hljs-template-variable,
.hljs-selector-tag,
.hljs-name,
.hljs-deletion {
  color: #7c7c7c;
}

/* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */
.hljs-symbol,
.hljs-number,
.hljs-link,
.hljs-attr,
.hljs-variable.constant_,
.hljs-literal {
  color: #999999;
}

/* base0A - Classes, Markup Bold, Search Text Background */
.hljs-title,
.hljs-class .hljs-title,
.hljs-title.class_ {
  color: #a0a0a0;
}

.hljs-strong {
  font-weight: bold;
  color: #a0a0a0;
}

/* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */
.hljs-code,
.hljs-addition,
.hljs-title.class_.inherited__,
.hljs-string {
  color: #8e8e8e;
}

/* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */
/* guessing */
.hljs-built_in,
.hljs-doctag,
.hljs-quote,
.hljs-keyword.hljs-atrule,
.hljs-regexp {
  color: #868686;
}

/* base0D - Functions, Methods, Attribute IDs, Headings */
.hljs-function .hljs-title,
.hljs-attribute,
.ruby .hljs-property,
.hljs-title.function_,
.hljs-section {
  color: #686868;
}

/* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */
/* .hljs-selector-id, */
/* .hljs-selector-class, */
/* .hljs-selector-attr, */
/* .hljs-selector-pseudo, */
.hljs-type,
.hljs-template-tag,
.diff .hljs-meta,
.hljs-keyword {
  color: #747474;
}

.hljs-emphasis {
  color: #747474;
  font-style: italic;
}

/* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?> */
/*
  prevent top level .keyword and .string scopes
  from leaking into meta by accident
*/
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-meta .hljs-string {
  color: #5e5e5e;
}

/* for v10 compatible themes */
.hljs-meta .hljs-keyword,
.hljs-meta-keyword {
  font-weight: bold;
}

.divider {
  width: 150px;
  height: 20px;
  background-image: url("/images/divider.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 500px) {
  .divider {
    width: 117px;
    height: 16px;
  }
}
.footer-cc {
  font-family: AnonymousPro, monospace;
  font-size: 14px;
}

.article-cc {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}
.article-cc .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  margin-bottom: 60px;
  width: 600px;
}
.article-cc .nav-container .logo-container {
  display: flex;
  align-items: center;
  gap: 6px;
}
.article-cc .nav-container .logo-container .logo {
  width: 24px;
  height: 24px;
  background-image: url("/images/logo.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.article-cc .nav-container .logo-container .mark {
  width: 30px;
  height: 14px;
  background-color: #252525;
  mask: url("/images/cnj.svg");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}
.article-cc .nav-container nav {
  display: flex;
  gap: 20px;
}
.article-cc .nav-container nav a {
  font-family: Sen, sans-serif;
  font-size: 16px;
  text-decoration: none;
  color: #bbb;
}
.article-cc .nav-container nav a:visited {
  color: #bbb;
}
.article-cc .nav-container nav a:hover {
  color: #fff;
}
.article-cc .mobile-nav-container {
  display: flex;
  justify-content: space-between;
  margin: 30px 0;
  padding: 0 30px;
  box-sizing: border-box;
  width: 100%;
  display: none;
}
.article-cc .mobile-nav-container .logo-container {
  display: flex;
  align-items: center;
  gap: 6px;
}
.article-cc .mobile-nav-container .logo-container .logo {
  width: 24px;
  height: 24px;
  background-image: url("/images/logo.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.article-cc .mobile-nav-container .logo-container .mark {
  width: 30px;
  height: 14px;
  background-color: #252525;
  mask: url("/images/cnj.svg");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}
.article-cc .mobile-nav-container button {
  width: 30px;
  height: 30px;
  background-image: url("/images/menu.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
}
.article-cc .mobile-nav-container button:hover {
  cursor: pointer;
}
.article-cc .mobile-nav-container nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 60px 0 40px 40px;
  box-sizing: border-box;
  background-color: #000;
  right: -100%;
  transition: right 0.2s ease;
}
.article-cc .mobile-nav-container nav.active {
  right: 0;
}
.article-cc .mobile-nav-container nav a {
  text-decoration: none;
  font-family: Sen, sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}
.article-cc .mobile-nav-container .page-fade {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6666666667);
  display: none;
}
.article-cc .mobile-nav-container .page-fade.active {
  display: block;
}
.article-cc .article-content {
  margin-top: 30px;
}
.article-cc .links-section {
  display: flex;
  margin: 60px 0;
}
.article-cc .links-section.anim-color-active a.articles,
.article-cc .links-section.anim-color-active a.about {
  color: #F2AF29;
  color: #fff;
}
.article-cc .links-section.anim-color-active a.articles:visited,
.article-cc .links-section.anim-color-active a.about:visited {
  color: #F2AF29;
  color: #fff;
}
.article-cc .links-section.anim-color-active a.articles:hover,
.article-cc .links-section.anim-color-active a.about:hover {
  color: #aaa;
}
.article-cc .links-section.anim-color-active a.projects,
.article-cc .links-section.anim-color-active a.services {
  color: #D62839;
  color: #fff;
}
.article-cc .links-section.anim-color-active a.projects:visited,
.article-cc .links-section.anim-color-active a.services:visited {
  color: #D62839;
  color: #fff;
}
.article-cc .links-section.anim-color-active a.projects:hover,
.article-cc .links-section.anim-color-active a.services:hover {
  color: #aaa;
}
.article-cc .links-section a {
  display: block;
  text-decoration: none;
  color: #bbb;
  transition: color 0.4s ease;
}
.article-cc .links-section a:visited {
  color: #bbb;
}
.article-cc .links-section a:hover {
  color: #ccc;
}
.article-cc .links-section .art {
  opacity: 0.1;
}
.article-cc .links-section .left-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.article-cc .links-section .left-block .articles-cc {
  position: relative;
  line-height: 82px;
}
.article-cc .links-section .left-block .articles-cc .articles {
  font-family: AnonymousPro, monospace;
  font-size: 100px;
  font-weight: bold;
  text-align: right;
}
.article-cc .links-section .left-block .articles-cc .articles.art {
  position: absolute;
  top: 0;
  left: calc(-100% - 30px);
  font-weight: normal;
  transform: scale(-1, 1);
}
.article-cc .links-section .left-block .services-cc {
  position: relative;
  margin-top: 10px;
}
.article-cc .links-section .left-block .services-cc .services {
  font-family: SourceCodePro, monospace;
  font-size: 60px;
  font-weight: bold;
  text-align: right;
}
.article-cc .links-section .left-block .services-cc .services.art {
  position: absolute;
  top: 0;
  left: calc(-100% - 10px);
  font-weight: normal;
  transform: scale(-1, 1);
}
.article-cc .links-section .right-block {
  position: relative;
  margin-top: 10px;
  margin-left: 10px;
  width: 140px;
}
.article-cc .links-section .right-block .links-cc {
  display: flex;
}
.article-cc .links-section .right-block .art-cc {
  position: absolute;
  top: 0;
  right: -100%;
  display: flex;
  transform: scale(-1, 1);
}
.article-cc .links-section .right-block .about,
.article-cc .links-section .right-block .projects {
  font-family: AnonymousPro, monospace;
  font-size: 60px;
  font-weight: bold;
  writing-mode: vertical-rl;
}
.article-cc .links-section .right-block .about.art,
.article-cc .links-section .right-block .projects.art {
  font-weight: normal;
}
.article-cc .links-section.mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  display: none;
}
.article-cc .links-section.mobile .top-block {
  margin-bottom: 15px;
  writing-mode: vertical-rl;
}
.article-cc .links-section.mobile .top-block .articles {
  font-family: AnonymousPro, monospace;
  font-weight: bold;
  font-size: 38px;
  text-align: center;
}
.article-cc .links-section.mobile .top-block .articles.art {
  transform: scale(-1, 1);
}
.article-cc .links-section.mobile .bottom-block {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: SourceCodePro, monospace;
  font-weight: bold;
  font-size: 22px;
}
.article-cc .links-section.mobile .bottom-block .left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.article-cc .links-section.mobile .bottom-block .right {
  width: 22px;
  writing-mode: vertical-lr;
}
.article-cc .footer {
  margin-top: 30px;
  margin-bottom: 30px;
}

@media (max-width: 800px) {
  .article-cc .links-section .left-block .articles-cc .articles {
    font-size: 80px;
    line-height: 68px;
  }
  .article-cc .links-section .left-block .services-cc .services {
    font-size: 50px;
  }
  .article-cc .links-section .right-block {
    width: 120px;
  }
  .article-cc .links-section .right-block .about,
  .article-cc .links-section .right-block .projects {
    font-size: 50px;
  }
}
@media (max-width: 700px) {
  .article-cc .nav-container {
    margin: 40px 0;
    padding: 0 30px;
    box-sizing: border-box;
    width: 100%;
  }
}
@media (max-width: 600px) {
  .article-cc .links-section.desktop {
    display: none;
  }
  .article-cc .links-section.mobile {
    display: flex;
  }
}
@media (max-width: 500px) {
  .article-cc .nav-container {
    display: none;
  }
  .article-cc .mobile-nav-container {
    display: flex;
  }
  .article-cc .links-section {
    margin: 40px 30px;
  }
  .article-cc .article-content {
    margin-top: 0;
  }
}

/*# sourceMappingURL=article.css.map */