/* Tutorial 2 – Format background & text */
body {
  background-color: #F5F5F5;   /* very light gray */
  color: #333333;              /* dark charcoal */
  font-family: sans-serif;
}

/* Tutorial 2 – Headings color (Slate Blue) */
h1, h2, h3, h4, h5, h6 {
  color: #2E4057;
}

/* Tutorial 2 – Alternating section backgrounds */
section:nth-of-type(odd) {
  background-color: #FFFFFF;   /* white */
}
section:nth-of-type(even) {
  background-color: #FAF3DD;  /* soft cream */
}

/* Tutorial 2 – Pseudo‑classes for links */
a:link    { color: #117A65; }   /* teal */
a:visited { color: #0E6655; }   /* darker teal */
a:hover   { text-decoration: underline; }
a:active  { opacity: 0.7; }

/* Tutorial 2 – Basic button styling */
button {
  background: none;
  border: 2px solid #117A65;
  color: #117A65;
  padding: 0.5em 1em;
  cursor: pointer;
  border-radius: 4px;
}
button:hover,
button:focus {
  color: #0E6655;
  border-color: #0E6655;
}

/* Tutorial 2 – Pseudo‑element */
h1::after {
  content: " 🐾";
}

/* Tutorial 2 – Contextual/attribute selector */
a[title] {
  font-style: italic;
}

/* Tutorial 7 – Focus: valid inputs/fields */
input:focus:valid,
textarea:focus:valid,
select:focus:valid {
  outline: 3px solid #117A65; /* teal */
}

/* Tutorial 7 – Focus: invalid inputs/fields */
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
  outline: 3px solid #E74C3C; /* red */
}