:root {
  --top-primary-bg-color: #3c007cb3;
  --top-secondary-bg-color: #090058b3;
  --middle-bg-color: #080032b3;
  --bottom-bg-color: #000000b3;
  --bg-color: #0b091e;
  --primary-color: #fff700;
  --secondary-color: #ffffff;
}

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

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

#comicTitle {
  width: 100%;
  text-align: center;
}

.journal-entry {
  background-color: white;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 40vw;
}

.journal-entry * {
  color: black;
}

.journal-entry h1,
.journal-entry h2,
.journal-entry h3,
.journal-entry .date,
.journal-entry .image_credit {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

.journal-image {
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: fit-content;
  display: block;
}

@media (max-width: 786px) {
  .journal-entry {
    width: 100%;
  }
}

@media (max-width: 350px) {
  .journal-image {
    width: 100%;
  }
}

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

#journal-format {
  background-image: url("assets/journal-page-wallpaper.png");
}

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

#transcript {
  background-color: var(--bottom-bg-color);
  color: var(--secondary-color);
}

#transcript * {
  color: var(--secondary-color);
}

#comic-pages-navigation,
#gallery-pages-navigation {
  display: flex;
}

#comic-pages-navigation #last-page {
  margin-right: auto;
}

#gallery-pages-navigation #last-page {
  margin-left: auto;
}

#comic-pages-navigation #next-page {
  margin-left: auto;
}

#gallery-pages-navigation #next-page {
  margin-right: auto;
}

@media (max-width: 630px) {
  main {
    grid-template-areas:
      "header header"
      "section section"
      "aside aside"
      "footer footer";
  }
}

#comic-image {
  width: 100%;
  height: fit-content;
}

#picture,
.picture {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: fit-content;
  max-width: 100%;
}

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

section {
  background-color: var(--middle-bg-color);
  grid-area: section;
}

aside {
  background-color: var(--middle-bg-color);
  height: auto;
  grid-area: aside;
}

aside * {
  max-width: 100%;
  display: inline-block;
  word-wrap: break-word;
}

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

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