body,
html {
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  /*backgrung imagge from css-tricks.com*/
  background: url(header.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*body {

  background-image: url(header.jpg);
  background-size: 100%;
  */

 h1{
  font-size: 3rem;
  color: rgb(233, 235, 236);
   /* position: flex;
    top: 22%;
    width: 100%;
    text-align: center;
    font-size: 3rem;
    color: white;
    margin-top: 22%;
    text-decoration: underline;
   
    transition: 1s ease-in-out;
    */

}
/*
.btn{
  position: flex;
  margin-top: 10%;
  margin-left: 40%;
  transition: 1s ease-in-out;

}
*/
 hr{
   border-color: coral;
   border-width: 3px;
   max-width: 56px;
 }

 .buffer {
   height: 150px;
 }
 .btn {
   font-weight: 700;
   /*to make button more circular*/
   border-radius: 300px;
   text-transform: uppercase;
 }
.btn-xl{
  padding: 1rem 2rem;
}

.btn-primary {
  background-color: rgb(185, 64, 48);
  border-color: rgb(185, 64, 48);
}
.btn-primary:hover{
  background-color: coral;
  border-color:coral;
  border-width: 4px;
}