:root {
  --top-primary-bg-color: #0053dab3;
  --top-secondary-bg-color: #000ed8b3;
  --middle-bg-color: #080032b3;
  --bottom-bg-color: #000000b3;
  --primary-color: #fff700;
  --secondary-color: #ffffff;
}

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

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

#gallery_showcase {
  display: flex;
  flex-wrap: wrap;
}

.image_preview {
  width: 200px;
  height: 200px;
  margin: 2px;
}

#art-enthusiast {
  width: 150px;
  height: 150px;
}

.image_preview * {
  width: 100%;
  height: 100%;
}

.image_preview img {
  width: fit-content;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

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

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

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

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

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