/* Background for the entire page */
/* Body with flame and ice edges using gradients */
body {
  background: black;
  color: #f0f0f0;
  margin: 0;
  font-family: 'Georgia', serif;
  line-height: 1.6;
  padding: 20px;
  position: relative;
  overflow-y: auto;
}

/* Flames on the top-left and bottom-right */
body::before, body::after {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

/* Top-left flames (warm tones) */
body::before {
  top: 0;
  left: 0;
  background: radial-gradient(circle at top left, rgba(255,140,0,0.6), transparent 60%);
}

/* Bottom-right ice (cool tones) */
body::after {
  bottom: 0;
  right: 0;
  background: radial-gradient(circle at bottom right, rgba(173,216,230,0.6), transparent 60%);
}

/* Highlighted HTML sections like magical scrolls */
.highlighted-section {
  background-color: rgba(34, 34, 34, 0.85);
  border-left: 4px solid #ffd700;
  padding: 20px;
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

/* Headings with subtle glow for dragon magic */
h1, h2, h3, h4 {
  font-family: 'Cinzel', serif;
  color: #ffd700;
  text-shadow: 1px 1px 4px #ff4500, 0 0 8px #00f0ff;
}

/* Subtle hover effect for headings */
h2:hover {
  text-shadow: 2px 2px 6px #ff6347, 0 0 12px #87cefa;
  transition: all 0.3s ease-in-out;
}

a {
  color: #ffd700;
  text-shadow: 1px 1px 4px #ff4500, 0 0 8px #00f0ff;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

a:visited {
  color: #ffd700;
}

a:hover {
  color: #fff3a0;
  text-shadow: 2px 2px 6px #ff6347, 0 0 14px #87cefa, 0 0 20px #00f0ff;
}

.nav a {
  color: #ffd700;
  text-shadow: 1px 1px 4px #ff4500, 0 0 8px #00f0ff;
  text-decoration: none;
  cursor: default;
}

.nav a:hover {
  color: #ffd700;
  text-shadow: 1px 1px 4px #ff4500, 0 0 8px #00f0ff;
}