/*
 * Globals
 */
.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.roboto-extra-bold {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.lexend-regular {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.lexend-bold {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.lexend-black {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom default button */
.btn {
      padding: .175rem 2rem;
      margin: 0 0 1rem 0;
}
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #fff;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: transparent;
  border: 3px solid #fff;
  border-radius: 0;
}

/* .home-title .btn-secondary,
.home-title .btn-secondary:hover,
.home-title .btn-secondary:focus  {
  border: 3px solid #473d45;
  color: #473d45;
} */


/*
 * Base structure
 */
html,
body {
  height: 100%;
  /* background-color: purple; */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  background-color: #473d45;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  color: #fff;
  text-shadow: none;
  box-shadow: none;
  background: url('../images/hero.jpg') bottom right no-repeat;
  background-size: auto 60%;
}

body#gallery,
body#reel,
body#advocacy {
  background-image: none;
}

.cover-container {
  width: 46em;
}

body#reel .cover-container,
body#advocacy .cover-container {
  width: 64rem;
}

h1, h2 {
  font-size: 4rem;
  color: #fff;
}

/*
 * Header
 */
.masthead {
  margin-bottom: 4rem;
}

.masthead-brand {
  margin-bottom: 0;
}

.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: 400;
  color: #fff;
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
  font-weight: 700;
}


/*
 * Cover
 */
.cover {
  padding: 0 1.5rem;
}
.home-title {
  position: relative;
  padding-right: 0;
  /* background: white;
  border: 8px solid #473d45;
  color: #473d45;
  padding: 1rem; */
}

.cover-heading {
  font-size: 3rem;
  color: inherit;
}
.lead {
  font-size: 1.25rem;
  color: inherit;
  padding-right: 0;
}

.bio-headshot {
  width: 25%;
  height: auto;
  float: left;
  margin-right: 1.5rem;
}

/*
 * Footer
 */
.mastfoot {
  padding: 1.5rem 0 .5rem;
}

.footer-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25rem;
  transition: transform .2s ease, opacity .2s ease;
}

.social-link:hover,
.social-link:focus {
  color: #fff;
  text-decoration: none;
  opacity: .8;
  transform: translateY(-2px);
}

.social-link svg {
  width: 1.2rem;
  height: 1.2rem;
}

@media (min-width: 768px) {
   body {
    background: url('../images/hero.jpg') top right no-repeat;
    background-size: auto 140%;
   }
   .masthead {
    margin-bottom: 14rem;
  }
  body#gallery .masthead,
  body#advocacy .masthead {
    margin-bottom: 2rem;
  }

  body#contact .masthead {
    margin-bottom: 4rem;
  }

  body#reel .masthead {
    margin-bottom: 5rem;
  }

  .home-title {
    position: relative;
    padding-right: 5rem;
    background: transparent;
    border: none;
    color: #fff;
  }
  .cover-heading {
    font-size: 5rem;
  }
  .lead {
    padding-right: 6rem;
  }
  .btn {
      padding: .175rem 2rem;
      margin: 0 1rem 0 0;
  }
}