.badge-html { background-color: #E34F26; color: white; }
.badge-bootstrap { background-color: #7952b3; color: white; }
.badge-tailwind { background-color: #38bdf8; color: white; }
.badge-nextjs { background-color: #000000; color: white; }
.badge-wordpress { background-color: #21759b; color: white; }
.badge-php { background-color: #3343ba; color: white; }




header.masthead {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 56px);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 1)), url(../img/bg4.jpg); 
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

header.masthead hr {
  margin-top: 30px;
  margin-bottom: 30px;
}

header.masthead h1 {
  font-size: 2rem;
}

header.masthead p {
  font-weight: 300;
}

@media (min-width: 768px) {
  header.masthead p {
    font-size: 1.15rem;
  }
}

@media (min-width: 992px) {
  header.masthead {
    height: 100vh;
    min-height: 650px;
    padding-top: 0;
    padding-bottom: 0;
  }
  header.masthead h1 {
    font-size: 2.3rem;
  }
}

@media (min-width: 1200px) {
  header.masthead h1 {
    font-size: 3rem;
  }
}