@import url('https://fonts.googleapis.com/css2?family=Iosevka+Charon:wght@400;500;700&family=Iosevka+Charon+Mono:wght@400;500;700&display=swap');

.center-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 640px;
}

/* Base page typography + layout */
html, body {
    margin: 0;
    padding: 4px;
    color: #000000;
    line-height: 1.7;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #f5f5f7;
    overflow-x: hidden;
    font-size: 16px;
}

/* Mobile-first typography scale */
@media (min-width: 600px) {
    html { font-size: 17px; }
}

@media (min-width: 900px) {
    html { font-size: 18px; }
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Iosevka Charon", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}

/* Prevent text & images from forcing horizontal scroll on small screens */
p, li, h1, h2, h3, a {
    overflow-wrap: break-word;
    word-break: break-word;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

main {
    max-width: 1100px;
    margin: 0 auto;
}

p, li {
    line-height: 1.7;
    margin: 0 0 0.75rem 0;
    font-family: "Iosevka Charon Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

main {
    padding: var(--content-padding);
}

main > *:not(.container) {
    margin-bottom: 1.25rem;
}

main h1, main h2, main h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

/* Color and utility token definitions */
#lion { color: #125C0D; font-style: italic; }
#fancy { color: #A328EB; font-weight: bold; }
#sassy { color: #B0B0B0; text-decoration: underline; }
#speed { color: #999999; font-weight: lighter; }
#wolf { color: #19C7D1; }
#castle { color: #F0B607; }
#cruel { color: #000000; }
#blood { color: #ED2B2B; }
#iron { color: #C9C9C9; }
#angry { color: #C70000; }
#ultra { color: #0F56D1; }
#stinky { color: #8BD92B; }
#nerd { color: #FF0000; }
#heresy { color: #D1C10F; }
#heretic { color: #B83218; }
#fire { color: #36B336; }
#raven { color: #591669; }
#who { color: #38C9A0; }
#primarch { color: #F7B92A; font-size: 24px; text-align: center; }
#title { text-align: center; font-size: 32px; color: #4A90E2; font-weight: bold; }
ul li { margin-bottom: 8px; }
main p { line-height: 1.7; font-size: 18px; color: #000000; }
#official-website { display: block; margin-top: 10px; font-size: 24px; color: #FFC35E; text-decoration: none; }
#official-website:hover { color: #4A90E2; text-decoration: underline; }

/* Fluid layout variables */
:root {
    --nav-width: clamp(160px, 18vw, 260px);
    --gutter: clamp(12px, 2vw, 24px);
    --content-padding: 4px;
    --card-padding: clamp(12px, 2vw, 20px);
}
.center-heading{
    text-align: center;
}
.card {
    padding: var(--card-padding);
}
.column-list{
    column-count: 3 ;
    column-gap: 15px;
    list-style-type: none;
    text-align: center;
}
.padded-img{
    padding: 10px;
    border: 5px solid darkblue;
}

/* Vertical navigation (shared) */
.vertical-nav {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--nav-width);
    height: 100vh;
    background: #111;
    padding-top: 12px;
    box-sizing: border-box;
    z-index: 1075;
}
.vertical-nav a {
    display: block;
    color: #fff;
    padding: 10px 14px;
    text-decoration: none;
    font-weight: 600;
}
.vertical-nav a:hover {
    background: #222;
    color: #ffcc00;
}
.with-vertical-nav main {
    margin-left: calc(var(--nav-width) + 12px);
    padding: var(--content-padding);
    box-sizing: border-box;
}

/* Fluid layout helpers */
/* Apply border-box globally for predictable sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Make all images responsive/scalable */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Main content should be fluid but respect the nav area */
.with-vertical-nav main {
    margin-left: calc(var(--nav-width) + 12px);
    padding: var(--content-padding);
    max-width: none;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--content-padding);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: start;
}
.column {
    min-width: 0;
}

/* Responsive breakpoints: 3 -> 2 -> 1 columns; still works at narrow widths (>=350px)
   Using minmax(0,1fr) keeps columns flexible while preventing overflow. */
@media (max-width: 900px) {
    .container { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

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

@media (max-width: 350px) {
    .container { grid-template-columns: 1fr; gap: 12px; }
    .with-vertical-nav main { padding: 12px; }
    .nav-toggle { top: 8px; padding: 6px 8px; font-size: 16px; }
    .nav-close { top: 6px; right: 6px; font-size: 20px; padding: 4px 6px; }
    .vertical-nav { width: var(--nav-width); }
    main p { font-size: 16px; }
}

/* (normalized above) */

.column-list{
    column-count: 3;
    column-gap: 15px;
    list-style-type: none;
    text-align: center;
}

@media (max-width: 900px) {
    .column-list { column-count: 2; }
}

@media (max-width: 600px) {
    .column-list { column-count: 1; }
    .with-vertical-nav main { margin-left: 0; }
    .center-img { max-width: 100%; }
}

/* Active link style */
.vertical-nav a.active {
    background: #333;
    color: #ffd24d;
    box-shadow: inset 3px 0 0 0 #ffcc00;
}

/* Backdrop for small-screen nav */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
    z-index: 1050;
    pointer-events: none;
}
body.nav-open .nav-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
@media (min-width: 601px) {
    .nav-backdrop { display: none; }
}

/* When user closes nav on larger screens */
body.nav-closed .vertical-nav {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}
body.nav-closed .with-vertical-nav main {
    margin-left: 0;
}

/* Nav toggle (hamburger) */
.nav-toggle {
    display: block;
    position: fixed;
    left: calc(var(--nav-width) + 12px);
    top: 12px;
    z-index: 1100;
    background: #111;
    color: #fff;
    border: 0;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 18px;
    transition: left 0.25s ease;
}

/* Move the toggle to the left when nav is closed so the button follows content */
body.nav-closed .nav-toggle {
    left: 12px;
}

/* When nav is explicitly open, keep toggle offset to the right of the nav */
body.nav-open .nav-toggle {
    left: calc(var(--nav-width) + 12px);
}


/* Responsive behaviour: collapse nav on small screens */
@media (max-width: 600px) {
    .nav-toggle { left: 12px; }

    .vertical-nav {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: var(--nav-width);
    }

    body.nav-open .vertical-nav {
        transform: translateX(0);
    }

    /* When nav is hidden, content should not be shifted */
    .with-vertical-nav main {
        margin-left: 0;
        padding: 16px;
    }

    /* When nav is open on small screens, nudge content to the right */
    body.nav-open .with-vertical-nav main {
        margin-left: var(--nav-width);
    }
}

/* Center all footers site-wide */
footer {
    text-align: center;
    padding: 1rem 0;
}

footer a#official-website {
    display: inline-block;
    margin-top: 0.25rem;
}