body { /* targets the body element, styling the entire visible page at once */
  width: 100%; /* body spans the full width of its parent (the html element) */
  height: 100vh; /* 100vh = 100% of the viewport height, so the dark background covers the whole screen even on short pages */
  margin: 0; /* kills the browser's default 8px margin around the body, removing the white gap at the page edges */
  background-color: #1b1b32; /* dark navy page background */
  color: #f5f6f7; /* near-white default text color; inherited by every child element unless overridden */
  font-family: Tahoma; /* sets the typeface for all text on the page */
  font-size: 16px; /* base font size; other elements using rem units will calculate against this */
} /* closes the body rule */

h1, p { /* comma-separated selector applies these declarations to both h1 and p elements */
  margin: 1em auto; /* 1em top/bottom spacing, auto left/right which centers the block horizontally */
  text-align: center; /* centers the text inside the element */
} /* closes the h1, p rule */

form { /* targets the form element */
  width: 60vw; /* 60vw = 60% of the viewport width, so the form scales with the browser window */
  max-width: 500px; /* caps the width so it never gets uncomfortably wide on large monitors */
  min-width: 300px; /* floors the width so it never collapses too narrow on small screens */
  margin: 0 auto; /* no vertical margin, auto horizontal margin to center the form on the page */
  padding-bottom: 2em; /* breathing room below the submit button so it isn't flush against the page bottom */
} /* closes the form rule */

fieldset { /* targets every fieldset element */
  border: none; /* removes the browser's default box outline around fieldsets */
  padding: 2rem 0; /* 2rem top/bottom padding, 0 left/right; rem is relative to the root font size */
  border-bottom: 3px solid #3b3b4f; /* adds a subtle divider line under each group to visually separate sections */
} /* closes the fieldset rule */

fieldset:last-of-type { /* :last-of-type pseudo-class targets only the final fieldset among its siblings */
  border-bottom: none; /* removes the divider from the last group so the form doesn't end with a dangling line */
} /* closes the last-of-type rule */

label { /* targets every label element */
  display: block; /* makes labels full-width block elements so each one starts on its own line */
  margin: 0.5rem 0; /* small vertical gap between labels, no horizontal margin */
} /* closes the label rule */

input, /* first selector in the group: all input elements */
textarea, /* second selector: the bio text area */
select { /* third selector: the referrer dropdown */
  margin: 10px 0 0 0; /* 10px top margin only (top, right, bottom, left order) to push the field below its label text */
  width: 100%; /* fields stretch to fill the full width of the form */
  min-height: 2em; /* guarantees a comfortable tap/click height even for small fields */
} /* closes the shared input/textarea/select rule */

input, textarea { /* narrower group: only inputs and text areas get these colors, not the select dropdown */
  background-color: #0a0a23; /* very dark field background so it reads as an input well against the navy page */
  border: 1px solid #0a0a23; /* border matching the background, giving a flat borderless look */
  color: #ffffff; /* pure white text so typed characters stay legible on the dark field */
} /* closes the input, textarea rule */

.inline { /* class selector (note the leading dot) applied to the radio buttons and the terms checkbox */
  width: unset; /* unset cancels the width: 100% inherited from the input rule above, letting the box shrink to its natural size */
  margin: 0 0.5em 0 0; /* right margin only, creating a small gap between the box and its label text */
  vertical-align: middle; /* aligns the small box with the middle of the adjacent text instead of sitting on the baseline */
} /* closes the .inline rule */

input[type="submit"] { /* attribute selector targeting only inputs whose type attribute equals "submit" */
  display: block; /* makes the button a block element so margin: auto can center it */
  width: 60%; /* button spans 60% of the form's width */
  margin: 1em auto; /* 1em vertical spacing, auto horizontal to center the button */
  height: 2em; /* fixed button height */
  font-size: 1.1rem; /* slightly larger than base text so the button label stands out */
  background-color: #3b3b4f; /* muted purple-grey button fill */
  border-color: white; /* white outline making the button edge visible against the dark page */
  min-width: 300px; /* floor on button width so it stays tappable on narrow screens */
} /* closes the submit button rule */

input[type="file"] { /* attribute selector targeting only the profile picture file picker */
  padding: 1px 2px; /* tight padding so the native file button isn't stretched by the min-height set earlier */
} /* closes the file input rule */

a { /* targets every anchor (link) element on the page */
  color: #dfdfe2; /* light grey link color, replacing the browser default blue that clashes with the dark theme */
} /* closes the anchor rule */