/* Part 2: Universal Selector */

/* Select all elements */
* {
  outline: 1px solid hsl(250 100% 50% / 0.2);
  box-sizing: border-box;
}

/* Select all elements inside the article with id="universal" */
#universal * {
  background: silver;
}

/* Part 1: Type Selectors */

/* body padding + pink background */
body {
  padding: 10px 25px;
  background: pink;
}

/* main max width */
main {
  max-width: 1500px;
}

/* section layout + outline */
section {
  max-width: 1000px;
  margin: auto;
  outline: 2px solid black;
}

/* ordered + unordered lists */
ol,
ul {
  list-style: decimal;
  padding: 20px;
}

/* h1 through h6 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1.5em;
  font-weight: 700;
  color: #555;
  padding: 30px 0 10px;
}

/* paragraphs + list items */
p,
li {
  line-height: 1.2em;
  margin: 7px 0 3px;
}

/* header background */
header {
  background: orange;
}

/* article background */
article {
  background: silver;
}

/* article list items background */
article li {
  background: lightgreen;
}

/* h1 special styling */
h1 {
  color: gold;
  background: black;
  text-align: center;
  font-size: 3em;
}

/* h2 special styling */
h2 {
  background: yellow;
  padding-left: 35px;
}

/* span in the sentence in Part 1 (article id="type") */
#type span {
  color: rebeccapurple;
  background: white;
}

/* span in Universal Selector article */
#universal span {
  background: red;
}

/* paragraphs in Part 1 article */
#type p {
  font-weight: bold;
}

/* h2, p, and ol left margin */
h2,
p,
ol {
  margin-left: 15px;
}

/* header list items inline-block */
header li {
  display: inline-block;
}

/* Part 3: Pseudo Selectors */

/* nav links: no underline, white text, red background */
nav a {
  text-decoration: none;
  color: white;
  background: red;
  margin: 10px;
  padding: 10px 20px;
  display: inline-block;
}

/* hover state */
nav a:hover {
  background: green;
}

/* odd list items in articles */
article li:nth-child(odd) {
  background: lightblue;
}

/* Part 4: Media Queries */

@media all and (max-width: 600px) {
  nav li {
    display: block;
  }
}