/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ======== ROOT COLORS & FONTS ======== */
:root {
  --bg-dark: #0a0a0c;
  --bg-panel: #131316;
  --ivory: #f0eade;
  --gold: #d4af37;
  --gold-deep: #a98624;
  --gold-soft: rgba(212, 175, 55, 0.2);
  --border-gold: rgba(212, 175, 55, 0.45);
  --shadow-gold: rgba(212, 175, 55, 0.25);

  /* Gothic Headings */
  --font-gothic: "Cinzel", "Goudy Old Style", serif;
  --font-main: "Georgia", serif;
}

/* ======== GLOBAL ======== */
html {
background-image: url("sigiltexture2.png");
}
body {
  background: var(--bg-dark);
  color: var(--ivory);
  font-family: var(--font-main);
  margin: 50px;
  padding: 10px;
  border: 6px solid var(--gold-deep);
  border-radius: 12px;
  position: relative;
  overflow-x: hidden;
}

/* ======== AMBIENT CANDLELIGHT GLOW ======== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 80%,
    rgba(212, 175, 55, 0.15),
    transparent 60%
  );
  animation: candleFlicker 4s infinite ease-in-out alternate;
}

@keyframes candleFlicker {
  0% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(1.03); }
  100% { opacity: 0.18; transform: scale(1.01); }
}

/* ======== GOLD FILIGREE BORDER DECORATIONS ======== */
.filigree {
  border: 2px solid var(--border-gold);
  padding: 1.5rem;
  margin: 2rem 0;
  position: relative;
  border-radius: 8px;
  background: var(--bg-panel);
  box-shadow: 0 0 25px var(--shadow-gold);
}

/* filigree corner ornaments */
.filigree::before,
.filigree::after {
  content: "✥";
  font-size: 1.5rem;
  color: var(--gold);
  position: absolute;
}

.filigree::before {
  top: -14px;
  left: 12px;
}

.filigree::after {
  bottom: -14px;
  right: 12px;
}

/* ======== HEADERS (Gothic Serif) ======== */
h1, h2, h3 {
  font-family: var(--font-gothic);
  color: var(--gold);
  letter-spacing: 1px;
  text-shadow: 0 0 10px var(--shadow-gold);
}

h1 {
  text-transform: uppercase;
  font-size: 2.4rem;
}

h2 {
  font-size: 1.8rem;
  border-bottom: 1px solid var(--border-gold);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

/* ======== NAVIGATION ======== */
nav a {
  color: var(--ivory);
  font-weight: bold;
  font-family: var(--font-gothic);
  margin: 0 0.75rem;
  text-decoration: none;
  position: relative;
}

nav a:hover {
  color: var(--gold);
}

nav a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.3s;
}

nav a:hover::after {
  width: 100%;
}

/* ======== UI ELEMENTS ======== */

/* Gold Button */
.button {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  border: 2px solid var(--gold);
  color: var(--gold);
  background: transparent;
  font-family: var(--font-gothic);
  letter-spacing: 1px;
  text-decoration: none;
  transition: 0.25s;
  border-radius: 4px;
}

.button:hover {
  background: var(--gold);
  color: var(--bg-dark);
}

/* Gold Card */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border-gold);
  padding: 1.5rem;
  margin: 1.5rem 0;
  border-radius: 6px;
  box-shadow: 0 0 20px var(--shadow-gold);
}

/* Section Banner */
.banner {
  padding: 1rem;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold-soft),
    transparent
  );
  text-align: center;
  font-family: var(--font-gothic);
  font-size: 1.4rem;
  color: var(--gold);
  margin: 2rem 0 1rem;
}

/* Links */
a {
  color: var(--gold);
}

a:hover {
  color: var(--gold-deep);
}

/* Footer */
footer {
  margin-top: 2rem;
  padding: 1.5rem 0;
  text-align: center;
  color: var(--ivory);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  background: #0d0d10;
}