:root {
  --page-bg: #f1cd93;
  --panel-bg: #e4bc7c;
  --accent: #ffa200;
  --text: black;
  --muted: #666;
  --breadcrumb: #6e6e6e;
  --code-bg: #f0f0f0;
  --pre-bg: #f6f6f6;
  --blog-card-width: 800px;
  --post-card-width: 800px;
  --tile-border-size: 6px;
}

@font-face {
  font-family: "pixel7";
  src: url("/fonts/mini_pixel-7.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--page-bg);
  font-family: pixel7, sans-serif;
  line-height: 1;
}

body p {
  display: inline-block;
  margin: 0;
  font-size: 50px;
  line-height: 40px;
}

p.notfound-message {
  font-size: 70px;
  line-height: 1.1;
}

.topnav {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  background-color: var(--panel-bg);
}

.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.left,
.right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.left {
  align-items: flex-start;
}

.right {
  align-items: flex-end;
  text-align: right;
  white-space: nowrap;
}

.navbar-img {
  width: auto;
  height: 50px;
}

.nav-links {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links li {
  display: flex;
  align-items: center;
}

.nav-links a {
  display: flex;
  align-items: center;
  color: black;
  font-size: 20px;
  text-decoration: none;
}

.nav-links a:hover {
  text-decoration: underline;
}

.nav-links img {
  display: block;
}

.pixel-art {
  image-rendering: pixelated;
}

.notfound-img {
  display: block;
  margin-top: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.tilingBox,
.tiledBox {
  border: calc(var(--tile-border-size) * 8) solid transparent;
  border-image-source: url("/ImageAssets/BgTiles/bgTiles.png");
  border-image-slice: 6 fill;
  border-image-repeat: stretch;
  image-rendering: pixelated;
  padding: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.tilingBox {
  width: var(--blog-card-width);
}

.tiledBox {
  width: min(var(--post-card-width), calc(100vw - 32px));
  margin: 16px auto;
  text-align: left;
}

/* Ensure the article fills the tiled box so centered headings align visually */
.tiledBox .blog-post {
  flex: 1 1 100%;
  width: 100%;
}

.blog-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-list a {
  color: inherit;
  text-decoration: none;
}

h2 {
  margin: 0;
  padding: 0;
  color: var(--accent);
  line-height: 1;
  font-size: 50px;
}

.tags {
  margin: 0;
  color: var(--accent);
  font-size: 25px;
  line-height: 0.6;
}

.blurb {
  margin: 4px 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.2;
}

.breadcrumb,
#breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  color: var(--breadcrumb);
  font-size: 40px;
  font-weight: 500;
}

.breadcrumb a {
  color: inherit;
  text-decoration: underline;
}

.breadcrumb a:last-of-type {
  color: black;
  font-weight: 600;
}

.blog-post,
.articleBody {
  color: var(--text);
  font-size: 25px;
  line-height: 1.5;
}

.blog-post h2,
.articleBody h2 {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 0.5rem;
  color: var(--accent);
  font-size: 50px;
  text-align: center;
}

.blog-post h5,
.articleBody h5 {
  font-size: 16px;
  line-height: 1;
  margin: 0 0 0.25rem;
  font-weight: normal;
  color: black;
}

.blog-post p,
.articleBody p {
  margin: 0 0 1rem;
  font-size: 25px;
  line-height: 1.4;
display: block;
}

.blog-post pre,
.articleBody pre {
  margin: 0 0 1rem;
  padding: 8px;
  overflow: auto;
  background: var(--pre-bg);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  font-size: 0.9rem;
}

.blog-post code,
.articleBody code {
  padding: 2px 4px;
  background: var(--code-bg);
  border-radius: 3px;
  font-family: monospace;
  font-size: 10px
}

.articleBody p,
.articleBody pre {
  margin: 4px 0 0;
  padding: 0;
  line-height: 1.2;
  color: black;
}