body.dev {
  background-color: #1f1e23; //custom: Mountain-near

  //#785c51; custom: Rocks-pink;
  //#7b7d94 Clouds-bluegray
  //#1f1e23; custom: Mountain-near
  //#fdd1a2; custom: Clouds-horizon
  font-family: "Roboto", sans-serif;
  color: #e2eaf7; // custom: Clouds-above
}

.site-header-dev {
  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: #1f1e23; //override site default
}

.d-page {
  background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url("../images/chars.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 100%vw;
}

.d-pagetitle {
  background-color: rgba(31, 30, 35, 0.85); // custom: #1f1e23;
  font-size: 2.55rem;
  font-weight: 300;
  text-align: center;
  padding-top: 3rem;
  //min-width: 300px;
  //padding-left: 2rem;
  padding-bottom: 3rem;
  margin: 40px;
}

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

.dgroup {
  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;
}

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

@media only screen and (min-width: 501px) {
  .d__photo img {
    width: 80%;
  }
}

@media only screen and (min-width: 801px) {
  .d__photo img {
    width: 60%;
  }
}

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

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

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

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

.d__subtitle {
  color: hsl(21, 32%, 30%); //Orchard Brown
  font-weight: 400;
  font-size: 0.9375rem;
  text-align: center;
  margin-left: 4rem;
  margin-right: 4rem;
}

.d__body {
  padding: 4rem;
}

.dgroup h2 {
  color: #2f5572; //mainBlue
  border: 3px solid maroon;
}

.dgroup pre {
  background-color: #ddd;
}