* {
  box-sizing: border-box; /* Sets format for structure of page */
}

a {
  color: white;
}

h1 {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  color: white;
  text-align: center;
  font-size: 300%;
}

h2 {
  color: white;
  text-align: center;
}

nav { /* Sets style for the navigation bar. Also, any name here will work; just make sure to define it in HTML */
  float: left;
  width: 20%;
}

img {
  background-color: black;
  border-radius: 50px;
}

ul { /* Sets style for bullet points */
  font-size: 25px;
  list-style-type: none; /* Hides the "bullet point" */
  margin: 0;
  padding: 0;
  width: 20%;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li selected { /* Sets style for current superhero on navigation bar. Also, any name here will work; just make sure to define it in HTML */
  color: limegreen;
  text-decoration: none;
  background-color: black;
  display: block;
  padding: 8px 16px;
}

li a { /* Sets style for any list item that has a hyperlink (a href=) */
  color: white;
  text-decoration: none; /* Hides the typical underline for hyperlinks */
  background-color: black;
  display: block;
  padding: 8px 16px;
}

li a:hover { /* ":hover" sets style for when a cursor hovers over an element; in this case a list item that has a hyperlink */
  background-color: dimgrey;
  color: black;
}

content { /* Sets style for content on webpage. Also, any name here will work; just make sure to define it in HTML */
  float: left;
  padding: 20px;
  width: 80%;
  font-size: 32px;
  color: palegoldenrod;
}