.contact-container {
  padding-top: 5px;
}

.staff-article {
  flex-direction: column;
  width: 100%;
  padding: 0px;
}
.staff-containers {
  width: 100%;
  height: 240px;
  overflow: hidden;
  padding: 0px;
}

.staff-member-divs {
  background: linear-gradient(
    180deg,
    rgba(111, 118, 122, 0.7) 0%,
    rgba(25, 94, 71, 0.7) 50%,
    rgba(62, 65, 67, 0.7) 100%
  );
  flex-direction: column;
  width: 100%;
  height: 100%;
  font-family: "Noto Sans Regular", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 1.1em;
  color: #ffffff;
  text-shadow: 0px -2px 1px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.staff-member-divs img {
  max-width: 160px;
  margin: -15px 0px -15px 0px;
  transition-duration: 0.3s;
}
.staff-member-divs img:hover {
  transform: scale(1.05);
  transition-duration: 0.3s;
}
.staff-name {
  font-size: 1.2em;
}
.staff-role {
  font-size: 0.95em;
}
.staff-contact {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9em;
  margin: 0px 5px;
}
.staff-contact:hover {
  color: rgba(212, 212, 212, 0.85);
}

.ashex {
  color: #fdfdc3;
  text-shadow: 0px 3px 2px rgba(129, 129, 103, 0.3);
}
.tokoni {
  color: #0004ff;
  text-shadow: 0px 3px 2px rgba(10, 6, 255, 0.3);
}
.ali {
  color: #faafbb;
  text-shadow: 0px 3px 2px rgba(172, 121, 129, 0.3);
}
.daniele {
  color: #40a83a;
}

.staff-separators {
  height: 240px;
  padding: 1px;
  z-index: 2;
}

.faq-article {
  flex-direction: column;
  padding-bottom: 40px;
}
.faq-article ul {
  list-style: none;
  margin: 5px 0px 0px 0px;
  width: 50%;
}

#contactForm {
  display: flex;
  flex-direction: column;
}
#contactForm input,
#contactForm textarea {
  background: #ebebeb;
  border: 2px solid #c4c4c4;
  border-radius: 5px;
  padding: 5px 10px;
  color: #000000;
  margin-top: 5px;
}
#contactForm label {
  font-size: 1.1em;
}
#contactForm input {
  font-size: 1em;
}
#contactForm textarea {
  font-size: 1.3em;
}
/* Submit button */
#contactForm button {
  background: linear-gradient(
    to bottom,
    rgba(230, 230, 230, 0.4) 10%,
    rgba(48, 70, 51, 0.3) 50%,
    rgba(22, 48, 35, 0.8) 50%,
    rgba(45, 78, 61, 0.8) 100%
  );
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3),
    inset 0px 2px 1px rgba(255, 255, 255, 0.3),
    inset 0px -2px 1px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.8);
  padding: 5px 0px 7px 0px;
  font-size: 1.2em;
  transition-duration: 0.2s;
}
#contactForm button:hover {
  filter: brightness(85%);
  transition-duration: 0.2s;
  text-decoration: underline;
}

.site-info-article {
  flex-direction: column;
  align-items: flex-start;
}
.site-info-article h3 {
  font-family: "Noto Sans Regular", Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 1.9em;
}
.site-info-article ul {
  margin: 10px 0px 5px 30px;
  font-family: "Noto Sans Regular", Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1em;
  color: #e6e6e6;
  text-shadow: 0px -2px 1px rgba(0, 0, 0, 0.25);
}

.changelog {
  width: 100%;
  height: 205px;
  background: rgba(134, 134, 134, 0.35);
  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.2),
    inset 0px -3px 5px rgba(255, 255, 255, 0.2),
    inset 0px 3px 5px rgba(172, 171, 171, 0.5);
  border-radius: 8px;
  margin-top: 20px;
  overflow-y: auto;
  scrollbar-color: #198f6b rgba(43, 43, 43, 0.5);
}
.changelog ul {
  list-style: none;
  margin: 15px 0px 15px 20px;
}
.changelog li {
  margin: 9px 0px;
}
.changelog strong {
  color: #24c494;
}

/* Responsiveness */
@media (max-width: 750px) {
  .staff-containers {
    display: block;
    height: 100%;
    overflow: auto;
  }
  .staff-member-divs {
    height: 220px;
  }
  .staff-separators {
    display: none;
  }
  .faq-article ul {
    width: 100%;
  }
  #contactForm button {
    font-size: 1.1em;
  }
}