body.art {
  background-color: #785c51; //custom: Rocks-pink; rgb(120, 82, 91)

  //#1f1e23; //custom: Mountain-near
  //#7b7d94 Clouds-bluegray
  //#1f1e23; custom: Mountain-near rgb(31, 30, 35)
  //#fdd1a2; custom: Clouds-horizon
  font-family: "Roboto", sans-serif;
  color: #e2eaf7; // custom: Clouds-above
}

.site-header-art {
  background-color: rgba(53, 74, 91, 0.8); /* love! this is a homemade color... */
  margin-bottom: none;
  width: 101vw;
  margin-left: -8px;
  margin-top: -8px;
}

nav ul li a:hover {
  background-color: rgba(31, 30, 35, 0.5); //override site default-- "Mt-near"
}

.a-page {
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(120, 82, 91, 0.5)), url("../images/IMG_3087.JPG");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 100%vw;
}

.a-pagetitle {
  background-color: rgba(120, 82, 91, 0.95); //rgba(255, 255, 255, 0.85);
  color: #fff;
  font-size: 3rem;
  font-weight: 300;
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
  margin: 40px;
}

.art-container {
  margin: 20px;
  margin-bottom: 70px;
}

.agroup {
  background-color: rgba(255, 255, 255, 0.95);
  margin-top: 80px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0.5rem;
  align-items: center;
  min-width: 20rem;
  color: black;
}

.a__photo {
  display: flex;
  overflow: hidden;
  justify-content: center;
  padding-top: 20px;
}
.a__photo__caption {
  text-align: center;
  margin-bottom: 4rem;
}
.a__photo img {
  display: cover;
  width: 90%;
  margin: 2%;
  border: 2px solid lightgray;
}

.a__photo-travel {
  justify-content: center;
}
.a__photo-travel img {
  width: 80%;
}

.a__site-bg {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: -30px;
}

.a__title {
  color: #2f5572; //mainBlue
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  margin: 20px;
}

.a__subtitle {
  color: hsl(21, 32%, 30%); //Orchard Brown
  font-weight: 400;
  font-size: 0.9375rem;
  margin: 0.25rem 0 1rem 0;
  text-align: center;
}

.a__body {
  padding: 4rem;
}

.agroup h2 {
  color: #2f5572; //mainBlue
}

/* Responsive Layout Adjustments */

@media only screen and (min-width: 501px) {
  .a__photo img {
    width: 80%;
  }
  .a__body {
    //padding: 10rem;
    max-width: 400px;
    //align-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  .agroup {
    max-width: 450px;
  }
}

@media only screen and (min-width: 801px) {
  .a__photo img {
    width: 60%;
  }
  .a__body {
    //padding: 10rem;
    max-width: 600px;
    //align-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  .agroup {
    max-width: 700px;
  }
}

@media only screen and (min-width: 1101px) {
  .a__photo img {
    width: 45%;
    font-size: larger;
  }

  .a__body {
    //padding: 10rem;
    max-width: 900px;
    //align-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  .agroup {
    max-width: 1000px;
  }
}