/* log some colors
orange #f15025;
black #353531;
navy blue #2d3142;
grey #cde0ce;
whitesmoke
 */
 /*
font-family: 'Indie Flower', cursive;
   */

   /*Start globals  */
body{
  font-family: 'Indie Flower',
   cursive;
}
 /*end globals  */
 /*Start header  */
  /* start navbar */
    .transparent{
      background: rgba(0,0,0,0.5);
    }
    .navbar-toggler-icon{
      border:5px solid black;
      padding: 30px;
      background-color: #f15025;
    }
      .navbar-brand{
        font-size: 30px;
      }
    .nav-link,
    .navbar-brand{
      color: #f15025 !important;
      border:none;
    }
    .nav-link:hover,
    .navbar-brand:hover, .navbar-toggler-icon:hover{
      color: whitesmoke !important;
    }
  /* end navbar */

header{
  height: 100vh;
  background: url('../imgs/header.jpg') fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
header .banner-center{
  height: 100vh;
  color: whitesmoke;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
 .banner-underline{
  width: 300px;
  border:3px solid  #f15025;
  margin: 0 auto 20px;
}
header a{
  font-size: 30px;
  width: 300px;
  margin: 0 auto;
  color: whitesmoke;
  border: 3px solid whitesmoke;
  border-radius: 20px;
  text-decoration: none;
  display: inline-block;
}
 header .banner-center a:hover,
 .banner a:focus{
   color: #f15025;
   background-color: whitesmoke;
 }
/* End header */
/* Start skills */
  /* start title */
    .title{
      margin: 20px auto;

    }
    .banner-underline{
      width: 150px;
      border:3px solid  #f15025;
      margin: 0 auto 20px;
    }
  /* end of titles */
  #skills{
      padding: 70px;
    margin-bottom: 10px;
    color:#2d3142;

  }
#skills .fa{
  font-size: 100px;
  margin-bottom: 10px;
}
#skills a{
  font-size: 20px;
  margin-bottom: 20px;
  color: whitesmoke;
  background-color: #f15025;
}
#skills a:hover{
  background-color: #cde0ce;
  color: #f15025;
}
/* End skills */
/*  About */
#about {
  background-color: #2d3142;
  color: whitesmoke;
  padding-top: 0px;
}
#about .pic{
  height: 600px;
  background: url('../imgs/about2.jpg');
  background-attachment: fixed;
  background-position:center;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: 600px solid transparent;
  border-left:50px solid #2d3142;
  }
#about .box{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width:970px) {
  #about{
    padding-top: 80px;
  }
  .box, .pic{
    width: 100%;
    border-bottom: none;
    border-left: none;
  }
}




/*  End about*/
/* start contact */
#contact{
  padding: 70px;
  background-color: whitesmoke;
}
#conntac .form-control{
  font-size: 20px;
  border-radius: 0 !important;
}
#contact button{
  background-color: #353531;
  font-size: 26px;
  color: #f15025;
  margin-bottom: 20px;
}
#contact button:hover{
  color: #353531;
  background-color:#f15025;
}
/* End contact */
#footer{
  padding: 40px;
  color: whitesmoke;
  background-color: #353531;
}
#footer .banner-underline{
  width: 200px;
}
#footer .footer-icons{
  font-size: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
}
#footer .footer-icons a{
 text-decoration: none;
 color: deepskyblue;
}
#footer .footer-icons a:hover{
  color: #f15025;
}
#footer .copyright{
  color:#cde0ce;
}