/* CLEANUP NOTE: Removed declarations that browsers ignored anyway, so the look is unchanged:
   - "font-size: 36" on h1 (no unit, so invalid; the default heading size is used)
   - "text-decoration: double" on nav links (invalid on its own)
   - "background: color #f00" on nav links hover (invalid syntax)
   - the body:has(#dark-mode-toggle:checked) rule, which targeted an element that does not exist
   - the "Your styles go here" lesson note */

/* CHANGED: colours are now variables so light and dark mode can share the same rules.
   The :root values are the current light mode colours, so light mode looks the same as before.
   The [data-theme="dark"] values are PLACEHOLDERS. Replace them with your own colours. */
:root {
  --bg-color: #e06908;
  --text-color: #000000;
  --heading-color: rgb(93, 16, 165);
  --nav-bg: white;
  --link-color: rgb(67, 5, 238);
  --link-hover: rgb(230, 139, 3);
  --img-border: #0004ff;
  --toggle-bg: white;
  --toggle-text: #000000;
}

[data-theme="dark"] {
  /* CHANGED: first set of dark mode colours. These can be changed later. */
  --bg-color: #1b1b24;
  --text-color: #f0eef6;
  --heading-color: #c9a7ff;
  --nav-bg: #2a2838;
  --link-color: #9ec5ff;
  --link-hover: #ffb366;
  --img-border: #7f8cff;
  --toggle-bg: #2a2838;
  --toggle-text: #f0eef6;
}

body {
  font-family: Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  /* CHANGED: colours now come from the variables above */
  transition: background-color 0.3s, color 0.3s;
}

h1 {
  color: var(--heading-color);
}

nav {
  display: flex;
  gap: 20px;
  padding: 10px;
  align-items: center;
  background-color: var(--nav-bg);
}

nav a {
  color: var(--link-color);
  font-weight: bold;
  text-decoration: none;
}

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

/* CHANGED: pushes the toggle button to the right end of the nav bar */
.theme-toggle {
  margin-left: auto;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  background-color: var(--toggle-bg);
  color: var(--toggle-text);
  border: 1px solid var(--text-color);
  border-radius: 5px;
}

img {
  max-width: 200px;
  border-radius: 50%;
  border: 4px solid var(--img-border);
}

p {
  padding: 10px;
  line-height: 1.6;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

/* CHANGED: removed the body:has(#dark-mode-toggle:checked) rule. No element with that id exists,
   so the rule never ran. */