html {
  background-color: #f2f3f4;
}

body {
  background-color: inherit;
}

.navbar {
  font-weight: 300;
  font-family: 'Open Sans';
  font-size: 130%;
}

a {
  color: #186318
}

.description {
  display: block;
  color: black;
  font-style: normal;
  font-size: 100%;
  font-weight: 50;
  line-height: 165%;
  font-weight: 150;
}

.subtext {
  color: black;
  font-weight: 50;
  text-align: center;
  font-size: 100%;

}

.container {
  width: 40em;
  width: auto;
  max-width: 680px;

}

.container-fluid {
  margin-top: 5%;
}

.front-img {
  max-width: 100%;
  height: auto;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 7%;
  color: black;
  font-weight: 300;
  position: relative;
  right: 3px;
}

.white-hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

.profile-pic {
  width: 40%;
  margin-bottom: 0%;
  margin-left: 2%;
  float: right;

}

.about-images {
  width: 100%;
  border-radius: 1%;
  margin-top: -2%;

}

@media (max-width: 575px) {
  body {
    background-size: 300%;
    background-position: left 65% bottom 0%;
  }
}