/* ===========================
   Base HTML & Body Styles
   Sets full height, removes default margins, applies theme colors and font
=========================== */
html, body {
  height: 100%;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
}

body {
  padding-top: 0;
}

/* ===========================
   Main Page Title (h1)
   Large responsive font, gradient text with animated shine effect
=========================== */
h1 {
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);

  /* Gradient text effect */
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.4) 100%
  );
  background-size: 300% 100%;
  background-position: 0% 0%;

  /* Make gradient apply to text only */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Shine animation */
  animation: shine 4s linear infinite;

  margin-bottom: 40px;
  user-select: none;
}

/* Keyframes for gradient "shine" animation */
@keyframes shine {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ===========================
   Section Titles
   Smaller headings used for subsections
=========================== */
.section-title {
  font-size: 1.5rem;
  margin-bottom: 20px;
}