/* 
*/
h1 {
  font-size: 1.5em;
  color: navy;
}

h2 {
  color:royalblue;
}

h3 {
  color:green;
}

p {
  color: limegreen;
}

html {
  background-color: white;
  font-size: 20px;
}

ul {
  background: rgb(182, 169, 29);
  padding: 10px;
  border: 1px solid black;
}

dt {
  font-size: 1.2em;
}

dd {
  font-style: italic;
}

li {
  margin-left: 20px;
  list-style-type: none;
}

li.special {
  color: orange;
  font-weight: bold;
}

li em {
  color: rebeccapurple;
}

a:link {
  color: pink;
}

a:visited {
  color: green;
}

a:hover {
  text-decoration: palevioletred;
  color:coral;
}

/* selects any <span> that is inside a <p>, which is inside an <article>  */
article p span {
  color:darkred;
}

/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
h1 + ul + p {
  color:burlywood;
}

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: whitesmoke;
}

.rotated_box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: midnightblue;
}