.ibm-plex-sans-regular {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-sans-medium {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ibm-plex-sans-bold {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.topper{
  background-color: #022b3a;
}

.topper a{
  color: #bfdbf7;
}

.navbar{
  background-color: #ffffff;
}

.navbar-brand{
  font-size: 1.4rem;
}

#home a{
  background-color: #022b3a;
  color: #ffffff;
  font-size: 1.3rem;
}

#home a:hover{
  background-color: #1f7a8c;
}

#about{
  background-color: #e1e5f2;
}

#about h3{
  font-size: 1rem;
}

#about h3::before{
  content: '\2014';
}

#about h4{
  font-size: 1.5rem;
}

#about p, #services ul{
  font-size: 1.1rem;
}

#about img{
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#services{
  background-color: #1f7a8c;
  color: #ffffff;
}

#services ul li{
  margin-bottom: 5px;
}

#gallery{
  background-color: #eeeeee;
}

#contact{
  background-color: #022b3a;
  color: #bfdbf7;
}

#contact ul{
  font-size: 1.1rem;
}

#contact a{
  color: #bfdbf7;
}

@media (min-width: 576px){
  .navbar-brand{
    font-size: 1.6rem;
  }

  #header-text{
    width: 470px;
  }

  #header-text h1{
    font-size: 3rem;
  }

  #header-text h2, #header-text a{
    font-size: 2rem;
  }

  #contact li{
    font-size: 1.2rem;
  }

  #about p{
    font-size: 1.3rem;
  }
}

@media (min-width: 992px){
  #header-text p{
    font-size: 1.6rem;
  }

  #about p{
    font-size: 1.1rem;
    line-height: 2;
  }

  #services ul{
    font-size: 1.4rem;
}