// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 300 to 800

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

.moderustic-medium {
  font-family: "Moderustic", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.moderustic-bold {
  font-family: "Moderustic", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.navbar{
  background-color: #394f98;
}

.navbar .nav-link{
  color: #eeeeee;
}

#home a{
  background-color: #394f98;
  color: #ffffff;
}

#home a:hover{
  background-color: #5887B5;
}

#header-text{
  width: 360px;
}

#services img{
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#gallery{
  background-color: #293847;
  color: #ffffff;
}

#gallery img{
  transition: all .2s ease-in-out;
}

#gallery img:hover{
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

#contact{
  background-color: #dddddd;
}

#contact a{
  color: #000000;
}

@media (min-width: 992px){
  #header-text{
    width: 600px;
  }

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

  #header-text h2{
    font-size: 2.4rem;
  }

  #header-text h3{
    font-size: 2rem;
  }

  #header-text p{
    font-size: 1.6rem;
  }

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