/* ----------------------------------------------------------------------------------------------------------
*                                       INDEX (style.css)
* -----------------------------------------------------------------------------------------------------------
*
* || TYPOGRAPHY
*
* || NAVBAR
* || MISC
* || BANNER
* || MEETINGS
* || MEMBERS
* || FOOTER
* || COLOR PALETTE
* || MEDIA QUERIES
*
*
/* ---------------------------------------------------------------------------------------------------------- */
/* || TYPOGRAPHY
/* ---------------------------------------------------------------------------------------------------------- */

* {
  font-family: "Montserrat", sans-serif;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.4rem;
}

h4 {
  font-size: 1.2rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------------------------------------- */
/* || NAVBAR
/* ---------------------------------------------------------------------------------------------------------- */

.navbar {
  letter-spacing: 2px;
}

.navbar-brand {
  font-size: 1.4rem;
  letter-spacing: 3px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

/* ---------------------------------------------------------------------------------------------------------- */
/* || MISC
/* ---------------------------------------------------------------------------------------------------------- */

main {
  min-height: 100vh;
}

/* ---------------------------------------------------------------------------------------------------------- */
/* || BANNER
/* ---------------------------------------------------------------------------------------------------------- */

.carousel-item {
  height: 400px;
  /* height: calc(100vh - 59.6px); */
  background: #000;
}

.carousel-item img {
  object-fit: cover;
  object-position: center right;

  height: 100%;
}

.carousel-caption {
  z-index: 2;

  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
}

.carousel-caption h3 {
  padding-bottom: 10px;

  line-height: 1;
}

.carousel-caption p {
  margin: auto;
  width: 100%;

  line-height: 1.5;
}

.carousel-inner::before {
  /* this creates the dark overlay */
  z-index: 1;

  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  box-shadow: inset 2000px 2000px #000000af;
}

/* Banner alternative */

.banner {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;

  margin-top: 60px; /* accounts for navbar */
  box-shadow: inset 2000px 2000px #000000b0; /* helps font over picture */
  height: 400px;

  background-image: url("images/forest-edited.jpg");
  background-size: cover;
  background-position: center;

  font-weight: 600;
}

#banner p {
  padding-top: 20px;
}

/* ---------------------------------------------------------------------------------------------------------- */
/* || MEETINGS
/* ---------------------------------------------------------------------------------------------------------- */

.card {
  padding: 10px;

  font-size: 80%;
}

.card-body i {
  padding: 10px 10px 10px 0;

  color: #457373;
  color: #734545;
}

.card-title {
  margin-bottom: 20px;
}

.card-text {
  margin: 20px 0;
}

#meetings-container {
  background-color: #457373;
  color: #fff;
}

/* ---------------------------------------------------------------------------------------------------------- */
/* || MEMBERS
/* ---------------------------------------------------------------------------------------------------------- */

#members-container {
  word-break: break-word;
}

#members-container h3 {
  border-bottom: 1px solid #00000034;
}

#members-container .row {
  padding: 20px 0;
}

.member-title {
  color: #457373;
}

.member-districts h5 {
  padding: 20px 0;
}

/* ---------------------------------------------------------------------------------------------------------- */
/* || FOOTER
/* ---------------------------------------------------------------------------------------------------------- */

footer {
  border-top: 1px solid #00000010;

  font-size: 0.9rem;
  color: #0000009f;
}


/* Mascot! Not sure where we're at with including this, the footer may be a good place. I scanned him the best
     I could and made an attempt at some color correction, he's a little fuzzy though */
.mascot-container {
  border: 3px solid #000000b9;
  height: 100px;
  width: 67px;
}

.mascot-container img {
  max-height: 100%;
  object-position: cover;
}

/* ---------------------------------------------------------------------------------------------------------- */
/* || COLOR PALETTE
/* ---------------------------------------------------------------------------------------------------------- */

.bgclr-seagreen {
  background: #457373;
}

.clr-seagreen {
  color: #457373;
}

.bgclr-darkseagreen {
  background: #142222
}

.clr-white {
  color: #fff;
}

.bgclr-salmon {
  background: #734545;
}

.clr-salmon {
  color: #734545;
}


/* ---------------------------------------------------------------------------------------------------------- */
/* || MEDIA QUERIES
/* ---------------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 900px) {
  .carousel-caption p {
    width: 60%;
  }
}