main {
  margin-bottom: 0rem;
  padding-bottom: 0rem;
}

#backgroundImg {
  z-index: -5;
  width: 100%;
  object-fit: cover;
  position: fixed;
  /* filter: brightness(20%) saturate(0%); */
  background: none;
}

header {
  /* margin-bottom: 2rem; */
  height: 25vh;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: rgba(0, 132, 132, 0.893);
}

header img {
  margin: 0px;
  object-fit: cover;
  width: 100%;
  height: 25vh;
  filter: brightness(40%) saturate(45%);
}

header h1 {
  text-align: center;
  margin-bottom: 2rem;
  z-index: 3;
  position: absolute;
  width: 100%;
  justify-content: center;
}

h1 {
  margin-bottom: 1rem;
  width: 100%;
}

/*custom bullet points*/
dd {
  display: list-item;
  list-style-type: "✓";
  padding-inline-start: 1ch;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

.x {
  list-style-type: "✗";
}

#guh {
  width: 25%;
  height: auto;
  float: right;
  margin-left: 2rem;
  display: flex;
  flex-flow: column-reverse;
  align-items: center;
}

#guh img {
  width: 100%;
}

/* #guh figcaption{
    position: absolute;
    z-index: 2;
    margin-bottom: 1rem;
    display: none;
    
}

#guh:hover img{
    filter: brightness(50%);

}

#guh:hover figcaption{
    display: block;
} */

#random-photo img {
  width: 25%;
  height: auto;
  float: left;
  margin-right: 2rem;
}

#onfloor {
  display: grid;
  grid-template-columns: auto 1fr; /* Text takes more space, image only as much as needed */
  grid-template-areas: "image text";
  margin-bottom: 2rem;
  grid-gap: 2rem;
  margin-top: 2rem;
}

#onfloor .text {
  grid-area: text;
  justify-self: right;
  flex-flow: column;
  align-items: center;
}
#onfloor h3 {
  grid-area: title;
  display: flex;
  align-items: left;
  text-align: left;
}
#onfloor img {
  grid-area: image;
  justify-self: center; /* Aligns the image to the left */
  width: auto;
  height: 200px;
}

#offfloor {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "text image";
  grid-gap: 2rem;
}

#offfloor .text {
  grid-area: text;
  justify-self: right;
  text-align: right;
  flex-flow: column;
}
#offfloor .text p {
  text-align: right;
}
#offfloor h3 {
  grid-area: title;
  text-align: right;
  align-items: right;
}
#offfloor img {
  grid-area: image;
  justify-self: center; /* Aligns the image to the left */
  width: auto;
  height: 200px;
}

@media (min-width: 1600px) {
  #benefitsPic {
    width: 20%;
  }
}

/*Mobile View*/
@media (max-width: 700px) {
  #benefits-pic-slot,
  #random-photo {
    text-align: center;
  }

  #benefitsPic {
    width: 70%;
    float: none;
    margin-bottom: 2rem;
  }

  #random-photo img {
    width: 70%;
    float: none;
    margin-bottom: 2rem;
  }

  #onfloor {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "text"
      "image";
    /* margin-bottom: 2rem; */
    grid-gap: 2rem;
    /* margin-top: 2rem; */
  }

  #offfloor {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "text"
      "image";
    grid-gap: 2rem;
  }

  #offfloor .text p,
  h3 {
    grid-area: text;
    justify-self: left;
    text-align: left;
    flex-flow: column;
  }
}

#siteNav #membershipButton h3 {
  color: rgb(0, 255, 255);
}

#siteNav #membershipButton:hover h3 {
  color: white;
}

#siteNav .dropdown:hover #membershipButton h3 {
  color: white;
}