:root {
  /* 🎨 Custom Color Palette */
  --olive-green: #587D71;
  --wine-red: #852E2F;
  --pale-linen: #F7F2EB;
  --dusty-mauve: #A8898E;
  --charcoal: #2E2E2E;

  /* Backgrounds & Text */
  --main-bg-color: var(--pale-linen);
  --text-color: #F7F2EB;
  --text-highlight: var(--wine-red);
  --link-color: var(--olive-green);
  --link-hover-color: var(--dusty-mauve);

  /* Fonts */
  --font-main: 'Libre Baskerville', serif;
  --font-accent: 'Pacifico', cursive;

  --font-heading: 2rem;
  --font-subheading: 1rem;
  --font-body: 1rem;

  --row-gap: 3rem;
  --side-margin: 3rem;
}

* {
  box-sizing: border-box;
}


/* Base Styles */
html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  min-height: 100vh; /* <-- allows for scroll */
  background: linear-gradient(to right, #587D71 0%, #852E2F 60%); /* Olive to Wine Red */
  overflow-x: hidden;
  font-family: var(--font-main);
  font-size: var(--font-body);
  color: var(--text-color);  
}



/* Typography */
h1, h2, h3 {
  font-family: var(--font-accent);
  color: #F7F2EB;
}

a {
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover-color);
}

/* Buttons */
button {
  background-color: var(--wine-red);
  color: var(--pale-linen);
}

button:hover {
  background-color: var(--dusty-mauve);
  color: var(--charcoal);
}