body {
  background-color: hsl(0, 0%, 92%);
  font-family: verdana;
  margin:0;
}

h1 {
  font-size: 40px;
  margin: 20px;
}

h2 {
  font-size: 30px;
  margin: 20px;
  text-align: center;
}

h3 {
  font-size: 20px;
  margin: 5px;
  text-align: center;
}

/* series blocks */
.grid-container {
  display: grid;
  margin: 20px;
  gap: 15px;
  grid-template-columns: 24% 24% 24% 24%;
}
.series-block {
  background-color: hsl(0, 0%, 20%);
  color: white;
  max-width: 100%;
  height: auto;
  text-align: center;
}
.series-block:hover {
  background-color:hsl(0, 100%, 40%);
}
.series-block > p {
  line-height: 0.01;
  font-weight: bold;
}
.series-block > a {
  display: block;
  color: white;
  font-weight: bold;
  text-decoration: none;
  padding: 15px;
}
.series-block > a:hover {
  background-color:hsl(0, 100%, 30%);
  color: white;
}

/* navigation bar */
table {width:100%;border-spacing:15px;}

tr {border-bottom: 1px solid #ddd;}

tr:hover {background-color:#D6EEEE;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {float:left;}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {background-color:#111111;}

/* logo banner */
.logo-banner {
  background-color:hsl(0, 100%, 40%);
}

/* comic description box */
.description {
  width:700px;
  margin-left:auto;
  margin-right:auto;
  margin-top: 25px;
  margin-bottom: 25px;
  border-style:solid;
  border-width:2px;
  border-radius:12px;
  text-align:center;
  background-color: hsl(0, 0%, 80%);
  padding: 20px;
}

/* footer */
footer {
 margin:20px;
}