:root {
  --shell-width: 1120px;
  --page-gap: 24px;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: #fff;
  line-height: 1.45;
  background-color: #000;
  background-image: radial-gradient(circle at 20% 10%, rgba(0, 168, 168, 0.22), transparent 38%), radial-gradient(circle at 80% 0%, rgba(0, 0, 168, 0.24), transparent 42%);
}

a {
  text-decoration: none;
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 15;
}

.site-nav ul {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.site-nav li {
  margin: 0 !important;
}

.site-nav a {
  padding: 1px 6px;
}

.site-banner {
  max-width: var(--shell-width);
  margin: 0 auto;
  padding: 56px 16px 0;
}

.site-banner-window {
  display: block;
  width: 100%;
  box-shadow: 12px 12px #000;
}

.site-brand {
  font-size: 1.35rem;
  letter-spacing: 0.03em;
}

.site-description {
  margin: 8px 0 4px;
}

.site-shell {
  max-width: var(--shell-width);
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.home-layout {
  display: grid;
  gap: var(--page-gap);
}

.page-intro,
.site-content-window,
.page-window,
.post-window,
.site-footer {
  display: block;
  width: 100%;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--page-gap);
}

.post-card {
  width: 100%;
  display: block;
}

.card-image-link {
  display: block;
  margin-bottom: 12px;
}

.card-image,
.hero-image,
.content-body img,
.post-content img {
  width: 100%;
  height: auto;
  border: 2px solid #000;
}

.card-title {
  margin: 0 0 10px;
  font-size: 1.08rem;
}

.card-title a:hover,
.content-body a:hover,
.post-content a:hover,
.footer-links a:hover {
  color: #0ff;
  text-decoration: underline;
}

.card-excerpt {
  margin: 0 0 14px;
  color: #f5f5f5;
}

.content-body {
  overflow-wrap: anywhere;
}

.content-body p,
.content-body ul,
.content-body ol,
.content-body blockquote,
.post-content p,
.post-content ul,
.post-content ol,
.post-content blockquote {
  margin-top: 0;
  margin-bottom: 14px;
}

.content-body h1,
.content-body h2,
.content-body h3,
.content-body h4,
.content-body h5,
.content-body h6,
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 1.2;
}

.post-meta-line {
  margin: 0 0 10px;
  color: #0ff;
}

.meta-separator {
  color: #fff;
  margin: 0 8px;
}

.tag-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 0;
}

.tag-chip {
  padding: 2px 8px;
  color: #000;
  background: #0ff;
  border: 2px solid #000;
}

.post-content pre,
.post-content code,
.content-body pre,
.content-body code {
  font-size: 0.88rem;
}

.post-content pre,
.content-body pre {
  overflow-x: auto;
  padding: 10px;
  border: 2px solid #00a8a8;
  background: #001313;
}

.post-content :not(pre) > code,
.content-body :not(pre) > code {
  padding: 1px 4px;
  color: #000;
  background: #ff0;
}

.post-content blockquote,
.content-body blockquote {
  border-left: 4px solid #0ff;
  padding: 8px 12px;
  margin-left: 0;
  background: rgba(0, 168, 168, 0.18);
}

.post-content table,
.content-body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
}

.post-content th,
.post-content td,
.content-body th,
.content-body td {
  border: 2px solid #000;
  padding: 6px;
}

.site-footer-wrap {
  max-width: var(--shell-width);
  margin: 0 auto;
  padding: 0 16px 30px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-copy {
  margin-top: 14px;
  margin-bottom: 0;
}

@media (max-width: 980px) {
  .post-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .site-banner {
    padding-top: 72px;
  }

  .site-nav ul {
    gap: 4px;
  }

  .site-nav a {
    padding: 1px 4px;
  }
}