App.css

.App {
  text-align: center;
  width: 100vw;
  height: 100vh;
  font-family: arial;
}

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: black;
}

header {
  background-color: #fdf1e6;
  position: sticky;
  top: 0;
  box-shadow: 0px 0px 10px #414d52;
}

#headerContainer {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 80px;
}

#filterBackBar1 {
  background-color: #a2baab;
  text-align: left;
  border-top: 2px solid #414d52;
  gap: 20px;
  display: grid;
  grid-template-columns: auto 100px 240px auto;
  grid-template-rows: 35px;
  grid-row-gap: 0;
  grid-column-gap: 0;
}

#filterBackBar2 {
  background-color: #a2baab;
  text-align: left;
  border-top: 2px solid #414d52;
  gap: 20px;
  display: grid;
  grid-template-columns: auto 100px 240px auto;
  grid-template-rows: 35px 35px;
  grid-row-gap: 0;
  grid-column-gap: 0;
}

#FNFbox {
  color: #414d52;
}

#FNFtitle {
  margin: 50px auto 20px auto;
}

#FNFmessage {
  margin: auto 50px auto 50px;
}

#homeLink {
  font-weight: bold;
}

select {
  background-color: #fdf1e6;
  border: none;
  border-radius: 4px;
  font: inherit;
  font-size: smaller;
  color: #414d52;
  padding: 2px 2px 2px 5px;
  box-shadow: 0px 0px 2px #fdf1e6;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

#filterLabel {
  font-size: small;
  font-weight: bold;
  color: #414d52;
  margin: auto;
  line-height: 35px;
  display: none;
}

#topicFilter {
  grid-column: 2;
  grid-row: 1;
  width: 120px;
  margin: auto 0px auto 20px;
  text-align: left;
}

#topicSelector {
  margin: auto;
}

#topicSelector:focus,
#sortSelector:focus {
  outline-color: #414d52;
}

#backToArticles {
  grid-column: 1/3;
  margin: auto auto auto 20px;
  line-height: 25px;
  font-weight: bold;
  font-size: medium;
  color: #414d52;
}

#titleText {
  grid-column: 1;
  line-height: 80px;
  font-size: x-large;
  text-align: left;
  margin-left: 20px;
  color: #414d52;
}

.brandedButton {
  border: 2px solid #414d52;
  border-radius: 50%;
  cursor: pointer;
  background-color: #fdf1e6;
  color: #414d52;
}

#sortButton {
  grid-row: 1;
  grid-column: 4;
  margin: auto;
  width: 19px;
  height: 19px;
  background-color: #fdf1e6;
  border: none;
  box-sizing: border-box;
  border-radius: 4px;
  padding: auto;
  box-shadow: 0px 0px 2px #fdf1e6;
  text-align: center;
  color: #414d52;
}

#sortButton:hover {
  background-color: #a2baab;
  border: 1px solid #414d52;
}

.brandedButton:hover {
  background-color: #a2baab;
  box-shadow: 0px 0px 5px #414d52;
  font-weight: bold;
}

.topicButton {
  font-style: italic;
  line-height: 25px;
  padding: 0px 10px 0px 10px;
  margin: 2px 0px 2px 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: black;
}

.topicButton:hover {
  border: 2px solid #414d52;
  box-shadow: 0px 0px 5px #414d52;
  border-radius: 10px;
}

#authorSearchForm {
  grid-column: 3;
  grid-row: 1;
  margin: auto auto auto 0px;
}

#authorSearchField {
  width: 140px;
  margin: auto auto auto 0px;
  text-align: center;
  background-color: #fdf1e6;
  border: none;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  font-size: smaller;
  padding: 2px 2px 2px 5px;
  box-shadow: 0px 0px 2px #fdf1e6;
}

#authorSearchField:focus {
  outline-color: #414d52;
}

#authorFilterButton {
  font-weight: normal;
  margin-left: 10px;
  padding: 2px;
  border-radius: 4px;
  width: 50px;
}

#authorFilterButton:disabled {
  background-color: #f9f2ec;
  color: lightgray;
  border: 1px solid lightgray;
  box-shadow: none;
  font-weight: normal;
  cursor: auto;
}

#sortBar {
  grid-row: 2;
  grid-column: 1/5;
  border-top: 1px solid #414d52;
  height: 35px;
  background-color: #a2baab;
  display: grid;
  grid-template-columns: auto 90px 150px 30px auto;
  text-align: left;
}

@media (min-width: 550px) {
  #filterBackBar1 {
    grid-template-columns: auto 220px 240px auto;
    grid-template-rows: 35px;
  }

  #filterBackBar2 {
    grid-template-columns: auto 220px 240px auto;
    grid-template-rows: 35px;
  }

  #topicFilter {
    display: grid;
    grid-template-columns: 100px 100px;
  }

  #filterLabel {
    display: inline;
  }
}

@media (min-width: 930px) {
  #filterBackBar1 {
    grid-template-columns: auto 290px 220px 240px auto;
    grid-template-rows: 35px;
  }

  #filterBackBar2 {
    grid-template-columns: auto 290px 220px 240px auto;
    grid-template-rows: 35px;
  }

  #sortBar {
    border: none;
    grid-row: 1;
    grid-column: 2;
  }

  #topicFilter {
    grid-column: 3;
  }

  #authorSearchForm {
    grid-column: 4;
  }
}

#sortLabel {
  grid-row: 1;
  grid-column: 2;
  font-size: small;
  font-weight: bold;
  color: #414d52;
  margin: auto;
  line-height: 35px;
}

#sortSelector {
  grid-row: 1;
  grid-column: 3;
  width: 120px;
  color: #414d52;
  text-align: center;
  margin: auto 10px auto auto;
}

#loginAvatarContainer {
  justify-self: right;
  align-self: center;
  width: fit-content;
}

#loginButton,
#loggedInAvatar {
  grid-column: 2;
  width: 50px;
  height: 50px;
  margin: auto 20px auto auto;
}

#loginBox {
  margin: 20px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 30px;
}

#loginBoxLoading {
  margin: 20px;
}

#logoutButton {
  grid-column: 4/6;
  border-radius: 10px;
  margin: 2px 20px 2px auto;
  border: none;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #a2baab;
  font-size: medium;
  font-weight: bold;
  color: #414d52;
  cursor: pointer;
}

#logoutButton:hover,
#backToArticles:hover {
  color: white;
  text-shadow: 0px 0px 2px black;
}

.userCard {
  display: grid;
  grid-template-rows: 100px 25px;
  width: 110px;
}

.userCardAvatar {
  grid-row: 1;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.userCardUserName {
  grid-row: 2;
  display: none;
  overflow: hidden;
  line-height: 25px;
  font-size: small;
  font-weight: bold;
  font-style: italic;
}

.userCard:hover :nth-child(1) {
  box-shadow: 0px 0px 15px #414d52;
  border: 1px solid #414d52;
  cursor: pointer;
}

.userCard:hover :nth-child(2) {
  display: block;
  cursor: pointer;
}

#articleListBox {
  margin-top: 6px;
}

.articleListDarkBackground {
  background-color: #f9f2ec;
}

.articleListLightBackground {
  background-color: #f4f2f1;
}

.articleListItem {
  display: grid;
  grid-template-columns: 75px auto 150px;
  grid-template-rows: 30px 30px 30px;
  grid-template-areas:
    "articleImage articleTitle articleTitle"
    "articleImage articleTopic articleVotes"
    "articleImage articleAuthor articleDate";
  text-align: left;
  font-size: small;
  margin: 5px auto 5px auto;
  box-shadow: 0px 0px 2px black;
  max-width: 600px;
}

.articleListItemImage {
  grid-area: articleImage;
  height: 60px;
  width: 60px;
  border-radius: 5px;
  margin: auto;
  box-shadow: 0px 0px 2px black;
}

.articleTitleContainer {
  grid-area: articleTitle;
  overflow: hidden;
}

.articleTitle {
  font-size: medium;
  line-height: 30px;
  padding: 0px 10px 0px 10px;
  margin: 2px 0px 2px 2px;
}

.articleTopicContainer {
  grid-area: articleTopic;
}

.articleTopic {
  font-style: italic;
  line-height: 25px;
  padding: 0px 10px 0px 10px;
  margin: 2px 0px 2px 2px;
}

.articleAuthorContainer {
  grid-area: articleAuthor;
}

.articleAuthor {
  font-style: italic;
  line-height: 25px;
  padding: 0px 10px 0px 10px;
  margin: 2px 0px 2px 2px;
}

.articleVotes {
  grid-area: articleVotes;
  margin: 0px 10px 0px 0px;
  line-height: 25px;
  text-align: right;
}

.articleDate {
  grid-area: articleDate;
  margin: 0px 10px 0px 0px;
  line-height: 25px;
  text-align: right;
}

#articleView {
  display: grid;
  grid-template-columns: 120px auto 100px;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas:
    "articleViewImage articleViewTitle articleViewTitle"
    "articleViewImage articleViewTitle articleViewTitle"
    "articleViewImage articleViewAuthor articleViewVotes"
    "articleViewImage articleViewDate articleViewVoteControls"
    "articleViewBody articleViewBody articleViewBody";
  text-align: left;
  margin-top: 20px;
  font-family: Times New Roman;
}

#articleViewImage {
  grid-area: articleViewImage;
  width: 100px;
  aspect-ratio: 1/1;
  margin: 0px 20px 0px 20px;
  border-radius: 5px;
}

#articleViewTitle {
  grid-area: articleViewTitle;
  margin-left: 20px;
}

#articleViewAuthor {
  grid-area: articleViewAuthor;
  margin: 3px 0px 3px 20px;
}

#articleViewDate {
  grid-area: articleViewDate;
  margin: 3px 0px 3px 20px;
  font-style: italic;
}

#articleViewVotes {
  grid-area: articleViewVotes;
  text-align: right;
  margin-right: 20px;
}

#articleViewVoteControls {
  margin-right: 20px;
  display: flex;
  justify-content: flex-end;
}

.voteButton {
  width: 20px;
  height: 20px;
  background-color: #fdf1e6;
  border: 1px solid #414d52;
  border-radius: 5px;
  color: #414d52;
  cursor: pointer;
  margin: 0px 0px 0px 5px;
}

.voteButton:hover {
  background-color: #a2baab;
  box-shadow: 0px 0px 5px #414d52;
  font-weight: bold;
}

.voteButton:disabled {
  background-color: #f9f2ec;
  color: lightgray;
  border: 1px solid lightgray;
  box-shadow: none;
  font-weight: normal;
  cursor: auto;
}

#articleViewBody {
  grid-area: articleViewBody;
  margin: 20px;
  text-align: justify;
  text-justify: inter-word;
}

#bottomSpace {
  height: 30px;
}

#commentsBox {
  width: 100vw;
  min-height: 300px;
  background-color: #f4f2f1;
}

#commentLoadingSpinner {
  left: 50%;
  margin-left: -40px;
}

#commentsTitle {
  margin-top: 20px;
  text-align: center;
  font-size: medium;
  font-weight: bold;
  color: #414d52;
  font-family: arial;
}

#newCommentBox {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  max-width: 550px;
  width: calc(100vw - 20px);
  margin: 20px auto 10px auto;
}

.removeButton {
  margin: auto;
  border-width: 1px;
  border-radius: 5px;
  padding: 2px 4px 2px 4px;
}

.cancelRemoveButton {
  margin: auto;
  border-width: 1px;
  border-radius: 5px;
  padding: 2px 4px 2px 4px;
}

.removeButton:hover {
  background-color: pink;
  box-shadow: 0px 0px 3px red;
}

.commentDeleteFailLabel {
  font-family: arial;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
  color: red;
}

#errorBox {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  max-width: 550px;
  width: calc(100vw - 20px);
  margin: 0px auto 10px auto;
}

#errorMessage {
  margin-top: 10px;
  text-align: center;
  font-weight: bold;
  font-family: arial;
  font-size: small;
  color: #ff0000;
}

#newCommentLabel {
  font-family: arial;
  font-size: small;
}

#newCommentText {
  height: 80px;
  padding: 5px;
  margin: 15px 0px 15px 0px;
  border: 1px solid #414d52;
  border-radius: 10px;
  font-family: arial;
  resize: none;
}

#newCommentText:focus {
  outline-color: #a2baab;
}

#postNewCommentButton {
  margin: 0px auto 0px auto;
  border-radius: 5px;
  border: 1px solid #414d52;
  width: 100px;
}

.commentCard {
  display: grid;
  grid-template-columns: 40px auto 100px 100px;
  grid-template-rows: 40px auto 25px;
  grid-template-areas:
    "commentAvatar commentAuthor commentVoteControls commentVotes"
    "commentBody commentBody commentBody commentBody"
    "commentDate commentDate commentDate commentDate";
  background-color: #f9f2ec;
  border: 1px solid #a2baab;
  border-radius: 10px;
  margin: 10px auto 10px auto;
  box-shadow: 0px 0px 3px #414d52;
  width: calc(100vw - 20px);
  max-width: 550px;
}

.commentCardDelete {
  display: grid;
  grid-template-columns: 40px auto 100px 100px;
  grid-template-rows: 40px auto 25px;
  grid-template-areas:
    "commentAvatar commentAuthor commentVoteControls commentVotes"
    "commentBody commentBody commentBody commentBody"
    "commentDate commentDate commentDate commentDate";
  background-color: pink;
  border: 1px solid #a2baab;
  border-radius: 10px;
  margin: 10px auto 10px auto;
  box-shadow: 0px 0px 3px red;
  width: calc(100vw - 20px);
  max-width: 550px;
}

.commentAvatar {
  grid-area: commentAvatar;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin: auto;
}

.commentAuthor {
  grid-area: commentAuthor;
  line-height: 40px;
  font-style: italic;
}

.commentVotes {
  grid-area: commentVotes;
  align-self: end;
  justify-self: end;
  line-height: 40px;
  text-align: right;
  margin-right: 20px;
}

.commentVoteControls {
  display: flex;
  justify-content: flex-end;
  margin: auto 0px auto auto;
}

.commentBody {
  grid-area: commentBody;
  text-align: justify;
  margin: 10px;
}

.commentDate {
  grid-area: commentDate;
  text-align: right;
  margin: 0px 20px 0px 0px;
  font-size: small;
  color: #414d52;
}

#footerBox {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 30px;
  background-color: #fdf1e6;
  color: #414d52;
  box-shadow: 0px 0px 10px #414d52;
  display: grid;
  grid-template-columns: 20% auto 20%;
  font-size: small;
}

#pageNumberText {
  grid-column: 2;
  text-align: center;
  margin-left: 20px;
  font-weight: bold;
}

#footerRightText {
  font-weight: bold;
  grid-column: 3;
  text-align: right;
  margin-right: 20px;
  line-height: 28px;
}

@media (max-width: 500px) {
  #footerRightText {
    display: none;
  }
}

.pageNumberButton {
  width: 20px;
  height: 20px;
  margin: 5px;
}

.pageNumberButton:disabled {
  font-weight: bold;
  box-shadow: none;
  background-color: #414d52;
  color: white;
  cursor: default;
}

#articleLoadingText,
#loginLoadingText {
  margin-top: 30vh;
  color: #414d52;
  font-weight: bold;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #a2baab;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}