@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Lato:wght@400;700&display=swap');

/* --- Body & General Styles --- */
body {
  /* A more modern font combo */
  font-family: 'Lato', sans-serif;
  line-height: 1.6; /* Adds breathing room between lines */
  
  /* A clean, light background is much easier to read */
  background-color: #f8f8f8; 
  color: #333; /* Dark gray text for good contrast */
  
  /* Add spacing around the entire page */
  margin: 0;
  padding: 30px;
}

/* --- Headings --- */
h1 {
  /* A punchy, bold font for the main heading */
  font-family: 'Poppins', sans-serif;
  font-weight: 700; /* 'normal' is usually too light for an h1 */
  text-align: center;
  
  /* Let's use that 'orange' as an ACCENT color! */
  color: #E65100; /* A strong, deep orange */
  
  /* A subtle shadow to make it "pop" */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  
  /* Add some space below the heading */
  margin-bottom: 40px; 
}

/* --- Paragraph Text --- */
p {
  /* Set a max-width for long text so it's easier to read */
  max-width: 750px;
  
  /* This centers the paragraph block on the page */
  margin-left: auto;
  margin-right: auto;
  
  /* Space between paragraphs */
  margin-bottom: 20px; 
}

/* --- Links (like you mentioned in the original comment!) --- */
a {
  color: #FF6D00; /* Use the bright orange for links */
  text-decoration: none; /* Remove the default underline */
  font-weight: bold;
  
  /* Adds a smooth animation to the color change */
  transition: color 0.3s ease;
}

/* This styles the link when you hover your mouse over it */
a:hover {
  color: #333; /* Change to the main text color on hover */
  text-decoration: underline; /* Add the underline back on hover */
}