/* ========================================== */
/* DAY 5 - Pure CSS Styling Rules             */
/* ========================================== */

/* 1. Target the entire body background of the browser window */
body {
  background-color: #e0f2fe; /* Gives the page a soft, modern light-blue background */
  font-family: 'Segoe UI', sans-serif; /* Swaps the clunky default font for clean modern text */
  display: flex; /* Special layout tool to help center our elements */
  justify-content: center; /* Centers our profile card horizontally */
  align-items: center; /* Centers our profile card vertically */
  height: 100vh; /* Tells the page to look at the full height of the Chromebook screen */
  margin: 0; /* Clears out any unwanted edge borders */
}

/* 2. Target the main profile box card container */
.profile-card {
  background-color: white; /* Makes the card itself pop out with a crisp white background */
  width: 400px; /* Locks the width so the card stays a perfect rectangle box */
  padding: 30px; /* Adds thick, breathing room padding inside the box borders */
  border-radius: 15px; /* Safely rounds off the sharp corners of our profile card box */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Adds a realistic 3D floating shadow below the card */
  text-align: center; /* Forces all titles and text inside the card to center automatically */
}

/* 3. Target specifically the primary h1 title */
h1 {
  color: #0369a1; /* Changes the title text to a rich sky-blue color code */
  font-size: 28px; /* Increases the size of the font to look like a clean title */
}

/* 4. Target the bullet point list properties */
ul {
  list-style-type: none; /* Deletes the default black bullet point circles */
  padding: 0; /* Strips out default left indentation spacing */
}

/* 5. Target individual list items inside our card */
li {
  font-weight: bold; /* Makes our tracking metrics look strong and dark */
  margin: 8px 0; /* Spaces each line tracking item out comfortably */
  color: #334155; /* Changes list font color to a subtle, professional dark grey */
}