:root {
  --top-primary-bg-color: #000000;
  --top-secondary-bg-color: #000000;
  --middle-bg-color: #080032b3;
  --bottom-bg-color: #000000b3;
  --primary-color: rgb(0, 255, 0);
  --secondary-color: rgb(0, 209, 255);
}

body {
  background-image: url("../assets/background3.png");
  background-repeat: repeat;
  image-rendering: pixelated;
}

* {
  color: var(--primary-color);
  font-family: "Pixelify Sans", sans-serif !important;
}

ul {
  list-style: none;
}

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

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

#quotesbottom a {
  color: var(--secondary-color);
}

main {
  display: grid;
  grid-template-areas:
    "header header"
    "section section"
    "footer footer";
  height: calc(100vh - 6px);
  grid-template-rows: min-content auto auto;
}

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

section {
  width: 80vw;
  display: flex;
  padding: 3px;
  margin: 3px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--top-primary-bg-color);
  grid-area: section;
}

#journalsArea,
#wholeQuote {
  width: 50%;
}

@media (max-width: 530px) {
  #journalsArea {
    width: 100%;
  }
  #wholeQuote {
    width: 90%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  section {
    display: inline-block;
  }
}

footer {
  margin: 3px;
  background-color: var(--top-primary-bg-color);
  grid-area: footer;
}

.journal-link {
  width: fit-content;
}