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

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

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

.social-link {
  height: 50px;
  width: 50px;
  image-rendering: pixelated;
  margin: 3px;
}

.social-link img {
  height: 100%;
  width: 100%;
}

.journal-entry a {
  width: fit-content;
  display: block;
}

.journal-entry p {
  width: fit-content;
}

#max-stiner-quote {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.514);
}

main {
  display: grid;
  grid-template-areas:
    "header header"
    "article article"
    "section aside"
    "footer footer";
  gap: 3px;
}

#pfp {
  width: 120px;
  height: fit-content;
}

#pfp-image-text * {
  width: 100%;
  display: block;
}

#main-h1 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#socials {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 630px) {
  main {
    display: block;
  }
  aside {
    display: flex;
  }
  #socials {
    justify-content: center;
  }
}

#footer-typewriter-drawing {
  image-rendering: crisp-edges;
  height: fit-content;
  width: 150px;
}

.section-link-title {
  width: fit-content;
  display: block;
}

.section-link-title * {
  width: fit-content;
}

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

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

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

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

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

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

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

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

.art-showcase {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.art-box {
  margin: 5px;
  width: 100px;
  height: 100px;
  background-color: var(--top-secondary-bg-color);
}

.art-box * {
  width: 100%;
  height: fit-content;
}

.comics-showcase {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.comic_box {
  margin: 2px;
  width: 180px;
  height: 270px;
  text-align: center;
  background-color: var(--top-secondary-bg-color);
}

@media (max-width: 388px) {
  .comic_box {
    width: 150px;
  }
}

@media (max-width: 329px) {
  .comic_box {
    width: calc(50% - 4px);
  }
}

.comic-episode-title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  height: fit-content;
}

.comic_box img {
  width: 100%;
  height: fit-content;
}