html {
  box-sizing: border-box;
  background: -webkit-linear-gradient(#F8E5CD  , #AB8C65    );
  background: -o-linear-gradient(#F8E5CD  , #AB8C65     );
  background: linear-gradient(#F8E5CD  , #AB8C65     );
  background-attachment:fixed;
}

body {
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   margin: 0;
   padding: 0;
}

.header {
  text-align: center;
  margin: 0px;
  padding: 5px;
  font-size: 22px;
  font-weight: bold;
  color: #FFFFF2 ;
  background-color: #826644  ;
}

.header-secondary {
  text-align: center;
  margin: 0px;
  padding: 5px;
  font-size: 20px;
  color: #FFFFF2;
  background-color: #2E4553  ;
}

.row {
   padding: 10px;
}

.btn {
   display: inline-block;
   padding: 6px 14px;
   margin-bottom: 0;
   font-size: 16px;
   text-align: center;
   text-decoration: none;
   vertical-align: middle;
   cursor: pointer;
   border: 1px solid transparent;
   border-radius: 4px;
}

.btn-primary {
   color: #fff;
   background-color: #AB8C65 ; /* AB8C65  */
   border-color: #6F4F27 ;
}

.btn-primary:hover {
   background-color: #6F4F27 ;
}

.btn-secondary {
   color: #fff;
   background-color: #435D6D  ; /* AB8C65  */
   border-color: #1C3747  ;
}

.btn-secondary:hover {
   background-color: #1C3747  ;
}

/* colors */
.red { background-color: #f44336; }
.green { background-color: #4CAF50; }
.blue { background-color: #2196F3; }
.yellow { background-color: #ffeb3b; }
.orange { background-color: #ff9800; }
.indigo { background-color: #3f51b5; }
.teal { background-color: #009688; }
.khaki { background-color: #f0e68c; }
.light-gray { background-color: #f1f1f1; }
