:root {
  --top-primary-bg-color: #e6ac00b3;
  --top-secondary-bg-color: #e66800b3;
  --bottom-bg-color: #0a0a60b3;
  --primary-color: #000000;
  --secondary-color: #ffffff;
}

* {
  color: var(--primary-color);
}

#headerList a {
  background-color: var(--top-secondary-bg-color);
}

main {
  display: grid;
  grid-template-areas:
    "header header"
    "section section"
    "footer footer";
  gap: 3px;
  height: calc(100vh - 6px);
}

header {
  background-color: var(--top-primary-bg-color);
  grid-area: header;
}

section {
  background-color: var(--top-primary-bg-color);
  display: flex;
  grid-area: section;
}

section div {
  width: 50%;
}

#comic-images-collection {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  padding: 3px;
  align-content: flex-start;
}

.comic-poster {
  width: 30%;
  height: fit-content;
}

@media (max-width: 700px) {
  .comic-poster {
    width: 60%;
  }
}

#comic-images-collection a {
  height: fit-content;
  background-color: var(--top-secondary-bg-color);
}

#comic-images-collection img {
  width: fit-content;
  height: 150px;
}

footer {
  background-color: var(--bottom-bg-color);
  grid-area: footer;
}

footer * {
  color: var(--secondary-color);
}