.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: #fff;
}

.navbar img{
  width: 10rem;
}

.navbar .nav-link{
  text-transform: uppercase;
  color: #000;
  border-bottom: 2px solid #ff990000;
}

.navbar .nav-link:hover{
  border-bottom: 2px solid #ff9900ff;
  color: #ff9900;
}

.nav-contact{
  color: #000;
}

.nav-contact img{
  width: 3rem;
  margin-top: 5px;
}

.nav-contact a{
  color: #000;
  font-size: 1.3rem;
}

#home h1{
  font-size: 2.5rem;
}

#home h1 span, #projects h2 span, #about-list h2 span, #about-bio h2 span{
  color: #ff9900;
}

#home a{
  background-color: #ff9900;
  color: #fff;
}

#home a:hover{  
  background-color: #000;
}

#services{
  background-color: #000;
}

#services .section-header{
  color: #ff9900;
}

#services .section-header::before{
  color: #ff9900;
  content: '―';
  margin-right: 8px;
}

#services .section-header::after{
  color: #ff9900;
  content: '―';
  margin-left: 8px;
}

#services{
  color: #fff;
}

#services img{
  width: 3.5rem;
}

#services h3{
  font-family: "Moderustic", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 1.1rem;
}

#projects .card{
  background-color: #000;
}

#projects .card-title{
  color: #fff;
}

#about-list{
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('../assets/about/1.jpg'); 
  background-repeat: no-repeat; 
  background-size: cover;
  background-position: center;
  color: #fff;
}

#contact{
  background-color: #fff;
}

#contact img{
  width: 10rem;
}

#contact a, #contact{
  color: #000;
}

@media (min-width: 992px){
  .nav-contact img{
    width: 2rem;
    margin-top: 5px;
  }

  .nav-contact a{
    color: #000;
    font-size: 1.1rem;
  }

  .featured{
    font-size: 1.3rem;
  }
}

@media (min-width: 1200px){
  .featured{
    font-size: 1.3rem;
  }
}