html, body{
  height: 100%;
  margin: 0;
  padding: 0;
  background: #020633; /* fallback */
}

/* Paint background on a fixed layer that always covers the viewport */
body{
  position: relative;
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(52,112,255,.25), transparent 60%),
    linear-gradient(180deg, #040b3f 0%, #03083a 55%, #020633 100%);
}

.bg-sand{ background: #ebe2dc; }

.article-body p{
  line-height: 22px;
  font-size: 16px;
}

@media screen and (max-width:767px) {
  .article-body{ word-break: break-word; }
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.otf");
}

/* ✅ FIX 1: `.body` -> `body` so it actually applies */
body {
  /* ✅ Mockup background */
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(52,112,255,.25), transparent 60%),
    linear-gradient(180deg, #040b3f 0%, #03083a 55%, #020633 100%);
  background-attachment: fixed;

  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  margin: 0;
  padding: 0;
  color: #ffffff; /* readable default on dark bg */
}

/* make box-sizing consistent and improve responsive defaults */
*, *:before, *:after { box-sizing: border-box; }

.header {
  align-items: center;
  border-bottom: 1px solid #fff;
  display: flex;
  justify-content: space-between;
  padding: 24px;
}

/* allow header contents to wrap on small screens */
.header { flex-wrap: wrap; gap: 12px; }

.logo {
  color: #FFCB40;
  font-size: 40px;
}

.logo-img {
  width: 144px;
  max-width: 100%;
  height: auto;
  display: block;
}

.img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}

.search input {
  background: #fff;
  border: 1px solid #fff;
  border-radius: 8px;
  color: #858585;
  font-size: 16px;
  outline: none;
  padding: 10px 16px;
  width: 240px;
  max-width: 100%;
}

.nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  margin: 40px 20px 0 40px;
}

.nav a, .privacy{
  background: #222;
  border-radius: 8px;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
  padding: 4px 16px;
  text-decoration: none;
}

.privacy {
  font-size: 10px;
  color: #51a2ff;
  background: transparent
}

.nav a.active,
.nav a:hover {
  background: #fff;
  color: #222;
}

.nav::-webkit-scrollbar { display: none; }

.footer {
  padding: 60px 0;
  text-align: center;
}

.footer ul {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  list-style: none;
  margin: 60px auto;
  max-width: 400px;
  padding: 0;
}

.footer ul li a {
  background: url("/img/twitch.png") no-repeat left top;
  background-size: 24px 24px;
  display: block;
  height: 24px;
  opacity: 0.8;
  width: 24px;
}

.footer ul li a:hover { opacity: 1; }
.footer ul li#tiktok a { background-image: url("/img/tiktok.png"); }
.footer ul li#discord a { background-image: url("/img/discord.png"); }
.footer ul li#threads a { background-image: url("/img/threads.png"); }
.footer ul li#snapchat a { background-image: url("/img/snapchat.png"); }
.footer ul li#linkedin a { background-image: url("/img/linkedin.png"); }
.footer ul li#instagram a { background-image: url("/img/instagram.png"); }
.footer ul li#twitter a { background-image: url("/img/twitter.png"); }
.footer ul li#facebook a { background-image: url("/img/facebook.png"); }

.footer #copyright {
  color: #ffffff50;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

@media screen and (max-width: 640px) {
  .search input { width: 100px; }
  .nav { margin: 20px 10px 0 20px; }
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ----------------------------
   ✅ RSTM container changes
   (matches the mockup)
   ---------------------------- */

/* This assumes your template uses <main id="rstm-app"> ... */
#rstm-app{
  min-height: 100vh;
  padding: 64px 16px 80px;
}

/* Center the column, keep content LEFT aligned */
#rstm-app .rstm-article{
  width: 100%;
  max-width: 720px;      /* adjust: 720 / 840 / 960 */
  margin: 0 auto;        /* centers container */
  text-align: left;      /* IMPORTANT: left align everything */
}

/* Keep text readable on dark bg (optional) */
#rstm-app .rstm-article{
  color: #ffffff;
}

/* ✅ Fix “distorted” lists when content is centered */
#rstm-app .rstm-article ul,
#rstm-app .rstm-article ol{
  display: inline-block;
  text-align: left;
  margin: 12px auto;
  padding-left: 1.2em;
  color: rgba(255,255,255,.85);
}

/* Optional: links */
#rstm-app .rstm-article a{
  color: #b7f7ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----------------------------
   Your #main rules (kept)
   but scoped to not fight RSTM
   ---------------------------- */

/* If you still use #main elsewhere, leave as-is. If RSTM uses #main,
   you can change #main to #rstm-app to apply these styles there. */

.w-3xl {
  max-width: 768px;
  width: 100%;
  box-sizing: border-box;
}

#main > div {
  width: 100%;
  padding: 1.5rem;
}

#main > div > div {
  margin-left: auto;
  margin-right: auto;
  max-width: 64rem;
}

#main img {
  height: 24rem;
  width: 100%;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
  object-fit: cover;
}