:root {
  --accent: #82d99a;
  --background: #080c09;
  --color: #d8eadc;
  --border-color: rgba(130, 217, 154, 0.22);
  --terminal-dim: rgba(216, 234, 220, 0.56);
  --terminal-panel: rgba(10, 20, 12, 0.78);
  --terminal-amber: #d9bd77;
}

html {
  background: var(--background);
}

body {
  letter-spacing: 0;
  background:
    radial-gradient(circle at 50% 0, rgba(130, 217, 154, 0.045), transparent 34rem),
    linear-gradient(180deg, #09110b 0, var(--background) 38rem);
  color: var(--color);
  text-shadow: 0 0 0.35rem rgba(130, 217, 154, 0.1);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035) 0,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px,
      transparent 4px
    );
  opacity: 0.22;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  box-shadow: inset 0 0 8rem rgba(0, 0, 0, 0.68);
}

::selection {
  background: var(--accent);
  color: #041006;
  text-shadow: none;
}

.container {
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}

.container.full {
  max-width: 1040px;
}

.header {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 28px;
  padding-bottom: 18px;
}

.logo {
  border: 1px solid var(--accent);
  background: #041006;
  color: var(--accent);
  box-shadow: 0 0 1rem rgba(130, 217, 154, 0.1);
}

.logo::after {
  content: "_";
  display: inline-block;
  margin-left: 0.2rem;
  animation: terminal-cursor 1.1s steps(1, end) infinite;
}

@keyframes terminal-cursor {
  50% {
    opacity: 0;
  }
}

.header__logo::after {
  background: repeating-linear-gradient(
    90deg,
    var(--accent),
    var(--accent) 3px,
    transparent 3px,
    transparent 12px
  );
  opacity: 0.78;
}

.header .menu {
  color: var(--terminal-dim);
}

.header .menu__inner li a {
  color: var(--terminal-dim);
  text-decoration: none;
}

.header .menu__inner li a::before {
  content: "./";
  color: var(--accent);
}

.header .menu__inner li a:hover,
.footer a:hover,
a:hover {
  color: var(--accent);
}

.post {
  border-bottom-color: var(--border-color);
}

.post-title {
  --border: 1px solid var(--border-color);
  color: var(--accent);
  text-transform: none;
}

.post-title::before {
  content: "$ ";
  color: var(--terminal-amber);
}

.post-title::after {
  border-bottom: 1px dashed var(--border-color);
}

.post-meta,
.post-tags,
.footnotes,
.footer {
  color: var(--terminal-dim);
  opacity: 1;
}

.post-meta::before {
  content: "# ";
  color: var(--accent);
}

.post-content h1::before,
.post-content h2::before,
.post-content h3::before,
.post-content h4::before {
  color: var(--terminal-amber);
}

.post-content h1::before {
  content: "# ";
}

.post-content h2::before {
  content: "## ";
}

.post-content h3::before {
  content: ">>> ";
}

.post-content h4::before {
  content: "-- ";
}

.post-content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.22em;
}

pre,
.code-toolbar {
  border: 1px solid var(--border-color);
  background: var(--terminal-panel) !important;
  box-shadow: inset 0 1.6rem 0 rgba(130, 217, 154, 0.035);
}

pre::before {
  content: "stdout";
  display: block;
  margin: -10px -10px 14px;
  border-bottom: 1px solid var(--border-color);
  padding: 4px 10px;
  color: var(--terminal-dim);
  font-size: 0.78rem;
}

code,
kbd {
  border: 1px solid rgba(130, 217, 154, 0.24);
  background: rgba(130, 217, 154, 0.06);
}

blockquote {
  border: 1px solid var(--border-color);
  background: rgba(130, 217, 154, 0.035);
  box-shadow: inset 4px 0 0 var(--accent);
}

table,
th,
td {
  border-color: var(--border-color);
}

th,
mark {
  color: #041006;
  background: var(--accent);
}

.button {
  border: 1px solid var(--accent);
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  box-shadow: 0 0 1rem rgba(130, 217, 154, 0.08);
}

.button:hover {
  background: rgba(130, 217, 154, 0.1);
}

a.read-more,
a.read-more:hover,
a.read-more:active {
  color: var(--accent);
}

.pagination__title-h {
  background: var(--background);
  color: var(--terminal-dim);
}

.pagination__title-h::before,
.pagination__title-h::after {
  color: var(--accent);
}

.pagination__title-h::before {
  content: "[ ";
}

.pagination__title-h::after {
  content: " ]";
}

.footer {
  border-top: 1px solid var(--border-color);
  margin-top: 48px;
}

@media (prefers-reduced-motion: reduce) {
  .logo::after {
    animation: none;
  }
}

@media (max-width: 684px) {
  body::before {
    opacity: 0.2;
  }

  .container {
    border-left: none;
    border-right: none;
  }

  .post-title::before {
    display: block;
  }
}