@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Lexend:wght@700&display=swap');

   *, *::before, *::after { box-sizing: border-box; }

   html {
        background-color: #0f1428;
        background-image:
             linear-gradient(180deg, transparent 0px, transparent 400px, #0f1428 700px),
             url('https://www.hytale.com/static/images/backgrounds/content-upper-new-1920.jpg');
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100% auto;
   }

   body {
        font-family: 'Nunito Sans', sans-serif;
        font-size: 18px;
        background: none;
        color: #c3dbea;
        margin: 0 auto;
        padding: 0;
        max-width: 1100px;
        min-height: 100vh;
   }

   a { text-decoration: none; font-weight: 700; color: #d4a035; }
   a:hover { color: #e8b84b; text-decoration: underline; }

   /* ---- Header / Logo ----------------------------------------- */

   header { overflow: hidden; }

   @keyframes logo-float {
      0%   { transform: translateY(0); }
      40%  { transform: translateY(-12px); }
      100% { transform: translateY(0); }
   }

   header #logo {
        margin: 2em 0 1.5em;
        text-align: center;
   }

   header #logo a {
        display: inline-block;
   }

   header #logo img {
        max-height: 35em;
        max-width: 80%;
        filter: drop-shadow(0 4px 24px #00000099);
        transition: filter 0.15s;
        animation: logo-float 8s ease-in-out infinite;
   }

   header #logo a:hover img {
        filter: drop-shadow(0 4px 32px #479db866) brightness(1.05);
   }

   /* ---- Nav ---------------------------------------------------- */

   header nav {
        margin: 0 auto 1.5em;
        background-color: #15243a;
        border: 3px solid #2f4a6a;
        border-radius: 8px;
        box-shadow: 0 4px 20px #00000099, 0 0 0 1px #0a1828;
        max-width: calc(min(900px, 100vw - 20px));
        position: relative;
   }

   header nav::before,
   header nav::after {
        content: '';
        position: absolute;
        top: -3px;
        width: 16px;
        height: 16px;
        background: url('https://www.hytale.com/static/images/container-corner.png') no-repeat 100% 100%;
        pointer-events: none;
        z-index: 1;
   }
   header nav::before { left:  -3px; transform: scale(-1); }
   header nav::after  { right: -3px; transform: scaleY(-1); }

   header nav ul::before,
   header nav ul::after {
        content: '';
        position: absolute;
        bottom: -3px;
        width: 16px;
        height: 16px;
        background: url('https://www.hytale.com/static/images/container-corner.png') no-repeat 100% 100%;
        pointer-events: none;
        z-index: 1;
   }
   header nav ul::before { left:  -3px; transform: scaleX(-1); }
   header nav ul::after  { right: -3px; }

   header nav ul {
        margin: 0;
        padding: 0 16px;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
   }

   header nav ul li { margin: 0; }

   header nav ul li a {
        display: inline-block;
        color: #9eb2c0;
        padding: 13px 18px;
        font-weight: 600;
        font-size: 0.88em;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        transition: color 0.15s, background 0.15s;
   }

   header nav ul li a:hover {
        color: #ebf7ff;
        background: #ffffff0d;
        text-decoration: none;
   }

   header nav ul li.active {
        background: linear-gradient(180deg, #2c6a9a, #1a4a78 6px, #0e2d54, #060f1e 120px);
        box-shadow: inset 0 1px 0 #ffffff22;
   }

   header nav ul li.active a,
   header nav ul li.active a:hover {
        color: #ebf7ff;
        background: transparent;
        text-shadow: 0 1px 4px #000a;
   }

   /* ---- Article ------------------------------------------------ */

   article {
        max-width: calc(min(900px, 100vw - 20px));
        margin: 0 auto 48px;
        padding: 0 20px;
        background: none;
        border: none;
        box-shadow: none;
        min-height: 40vh;
        position: relative;
   }

   /* Corner spans unused in open layout */
   article .c { display: none; }

   /* Title sits freely on the page */
   article > h1 {
        font-family: 'Lexend', sans-serif;
        font-size: 1.6em;
        letter-spacing: 0.06em;
        text-align: center;
        color: #ebf7ff;
        text-shadow: 0 0 32px #479db866, 0 2px 6px #0008;
        padding: 0 0 0.6em;
        margin: 0;
        position: relative;
   }

   /* Small glowing diamond centred above the rule */
   article > h1::before {
        content: '◆';
        display: block;
        font-size: 0.38em;
        color: #5da3d5;
        text-shadow: 0 0 10px #5da3d5bb;
        letter-spacing: 0;
        margin-bottom: 0.5em;
   }

   /* Ornamental gradient rule below the title */
   article > h1::after {
        content: '';
        display: block;
        height: 1px;
        margin-top: 0.55em;
        background: linear-gradient(90deg,
             transparent 0%,
             #7a4a08 25%,
             #c47a10 45%,
             #e8950a 50%,
             #c47a10 55%,
             #7a4a08 75%,
             transparent 100%
        );
        box-shadow: 0 0 8px #e8950a88;
   }

   /* Breathing room between divider and first content element */
   article > h1 + * { margin-top: 2em; }

   article h2 {
        font-family: 'Lexend', sans-serif;
        font-size: 1.15em;
        color: #b7cedd;
        margin: 1.4em 0 0.4em;
        letter-spacing: 0.03em;
   }

   article h2 + p.subheading {
        margin-top: -4px;
        color: #7db9e5;
        font-style: italic;
   }

   article p { margin: 0.75em 0; line-height: 1.7; color: #b5c7d4; }
   article hr {
        border: none;
        height: 1px;
        margin: 2em 0;
        background: linear-gradient(90deg,
             transparent 0%,
             #7a4a08 25%,
             #c47a10 50%,
             #7a4a08 75%,
             transparent 100%
        );
        box-shadow: 0 0 6px #e8950a66;
   }
   article img { max-width: 100%; border-radius: 2px; }
   article ul, article ol { color: #b5c7d4; line-height: 1.75; }
   article strong { color: #d1dde4; }

   article a {
        color: #d4a035;
        font-style: italic;
        text-decoration-color: #7a4a0888;
        text-decoration-thickness: 1px;
        padding: 0 2px;
   }
   article a:hover { color: #e8b84b; text-decoration: underline; }

   article h1 a { color: inherit; font-style: normal; text-decoration: none; padding: 0; }
   article h1 a:hover { color: inherit; text-decoration: none; }

   /* ---- Buttons ----------------------------------------------- */

   .button {
        display: inline-block;
        font-family: 'Lexend', sans-serif;
        font-size: 0.82em;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #2a1a00;
        text-shadow: 0 1px 0 #ffffff44;
        background: linear-gradient(180deg, #ffe98d, #e19f27 50%, #c47a10);
        border: none;
        border-radius: 2px;
        padding: 10px 20px;
        margin: 10px 0;
        box-shadow: 0 3px 10px #00000066, inset 0 1px 0 #ffffff55;
        position: relative;
        transition: filter 0.15s;
   }
   .button::before,
   .button::after {
        content: '';
        position: absolute;
        top: -1px;
        width: 10px;
        height: 10px;
        background: url('https://www.hytale.com/static/images/button-corner.png') no-repeat 100% 100%;
        pointer-events: none;
   }
   .button::before { left:  -1px; transform: scale(-1); }
   .button::after  { right: -1px; transform: scaleY(-1); }
   .button:hover { filter: brightness(1.15); color: #1a0e00; text-decoration: none; }

   /* ---- Pagination -------------------------------------------- */

   .pagination {
        display: flex;
        margin: 10px auto;
        max-width: calc(min(900px, 100vw - 20px));
        border-radius: 2px;
        overflow: hidden;
        gap: 2px;
   }
   .pagination > .spacer { flex: 1 0 auto; }
   .pagination > .button { margin: 0; border-radius: 0; }

   /* ---- Responsive -------------------------------------------- */

   @media (max-width: 640px) {
        body { font-size: 16px; }
        article { padding: 0 12px; }
        article > h1 { font-size: 1.25em; }
        header nav ul li a { padding: 11px 12px; font-size: 0.8em; }
        header #logo img { max-height: 12em; }
   }