/* ------------------------------
   Theme tokens
-------------------------------- */

:root {
  --bg: #fff;
  --text: #111;
  --muted: #444;
  --rule: #ddd;
}

html[data-theme="dark"] {
  --bg: #111;
  --text: #f2f2f2;
  --muted: #bbb;
  --rule: #333;
}

/* ------------------------------
   Base / Reset
-------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  color: var(--text);
}

body {
  margin: 0;
  padding: 1.25rem;
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto,
        Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* ------------------------------
   Sticky footer layout
-------------------------------- */

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  max-width: 42rem;
  flex: 1;
}

/* ------------------------------
   Typography
-------------------------------- */

h1 {
  font-size: 1.6rem;
  margin: 0 0 0.5rem 0;
}

h2 {
  font-size: 1.05rem;
  margin: 1.25rem 0 0.25rem 0;
}

p {
  margin: 0 0 1rem 0;
}

small {
  color: var(--muted);
}

/* ------------------------------
   Links
-------------------------------- */

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

a:hover {
  text-decoration: none;
}
..rainbow-link {
  font-weight: 600;
  text-decoration: underline;
  color: #7c6cff;
}
.rainbow-link:hover {
  background: linear-gradient(
    90deg,
    #ff004c,
    #ff7a00,
    #ffd400,
    #00d084,
    #00a3ff,
    #8a2be2,
    #ff004c
  );
  background-size: 200% 100%;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  animation: rainbowShift 1.5s linear forwards;
}

@keyframes rainbowShift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* ------------------------------
   Lists
-------------------------------- */

ul {
  margin: 0;
  padding-left: 1.1rem;
}

li {
  margin: 0.45rem 0;
}

/* ------------------------------
   Horizontal Rule
-------------------------------- */

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 1rem 0;
}

/* ------------------------------
   Images
-------------------------------- */

img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: 4px;
}

/* ------------------------------
   Footer (sticky, centered copyright)
-------------------------------- */

/* Keep footer from inheriting main's max-width, but still align padding */
.site-footer {
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  font-size: 0.95rem;
  color: var(--muted);
  text-align: center;
}

/* Center just the copyright */
.site-footer .copyright {
  margin: 0;
}

/* ------------------------------
   Utility (optional)
-------------------------------- */

.meta {
  color: var(--muted);
}

/* ------------------------------
   Brand emphasis
-------------------------------- */

.brands {
  opacity: 0.8;
  transition: opacity 0.25s ease;
}

/* Dark mode: slightly quieter */
html[data-theme="dark"] .brands {
  opacity: 0.65;
}


/* ------------------------------
   Button styling (optional but nice)
-------------------------------- */

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid var(--rule);
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  border-color: var(--muted);
}