@import url(https://fonts.googleapis.com/css?family=Voltaire);

html,
body {
  scroll-behavior: smooth;
  height: 100%;
  width: 100%;
  font-family: Arial, sans-serif;
}

body {
  padding-top: 50px;
}

.text-purple {
  color: var(--purple);
}

/* use special fonts in certain elements */
h1,
h2,
h3,
h4,
.lead,
.btn,
.navbar a {
  text-transform: uppercase;
  font-family: 'Voltaire', Arial, sans-serif;
  letter-spacing: 2px;
}

h1 {
  font-size: 48px;
}

/* make images gray */
img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  /* Firefox 10+, Firefox on Android */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(100%);
  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.icon-bar {
  background-color: #fff;
}

.scroll-down a,
.scroll-top a {
  color: #ffffff;
}

.scroll-down {
  position: fixed;
  bottom: 20%;
  right: 0;
  color: #f9f9f9;
}

.scroll-top {
  background-color: #dbdbdb;
}

.header .btn-lg {
  font-size: 28px;
  border-color: #eeeeee;
  padding: 15px;
  background-color: transparent;
  color: #ffffff;
}

.header .btn-lg:hover {
  background-color: #eeeeee;
  color: #777777;
}

.navbar a {
  color: #fff;
  font-size: 18px;
}

.navbar-bold.affix {
  background-color: #d46054;
}

.navbar-bold {
  background-color: #f68076;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.navbar-bold li a:hover,
.navbar-bold li.active {
  background-color: #d46054;
}

.header h1 {
  font-size: 70px;
  -webkit-text-stroke: 1px rgba(f, f, f, 0.1);
  color: #431a6d;
  color: #fff;
  margin-left: -5px;
  margin-bottom: 5px;
  margin-top: 5px;
  text-transform: uppercase;
}

@media (max-width: 992px) {
  .header h1 {
    font-size: 50px;
  }
}

.header .lead {
  color: #d46054;
  font-size: 25px;
}

.header {
  min-height: 85%;
  background: #f68076 url('https://www.bootply.com/assets/example/pt_topo_l.png') repeat center center fixed;
}

/* use alt in navbar and header for different color */
.alt {
  background-color: #6E28C9;
}

.alt .lead {
  color: #3B0496;
}

.alt.affix {
  background-color: #4C06AB;
}

.alt li a:hover,
.alt li.active {
  background-color: #5D17BA;
}

.blurb {
  padding: 120px 0;
  background-color: #fefefe;
}

.blurb .panel {
  background-color: transparent;
}

.bright {
  background: #dbdbdb url('https://www.bootply.com/assets/example/pt_topo.png') repeat center center fixed;
  color: #777;
}

.callout {
  color: #ffffff;
  background: #333 url('https://www.bootply.com/assets/example/pt_topo_l.png') repeat center center fixed;
}

.call-to-action {
  background: #eeeeee;
  padding: 50px 0;
}

.call-to-action .btn {
  margin: 10px;
}

footer {
  padding-top: 100px;
}