body { margin: 0 }
html, body {
  font: 16px "Lucida Grande", Helvetica, Arial, sans-serif;
}

.ph, .col { overflow: hidden; position: absolute; }
.ph { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }

header.ph { height: 200px; top: 0; text-align: center; }
.body.ph { top: 200px; bottom: 50px; }
footer.ph { height: 50px; bottom: 0; text-align: center; }

h1 {
  font-family: 'Amatic SC', cursive;
  font-size: 4em;
}

h2, p.intro {
  font-family: 'Quicksand', sans-serif;  
}

footer {
  padding-top: 10px;
  text-align: center;
}

header {text-align: center;}

p {margin: 0;}

a {
  color: #00B7FF;
}

.ghostIcon { margin: 0 5px; }

.triangle-border {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  border: 1px solid #ccc;
  color: #333;
  background: #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  max-width: 400px;
}

.triangle-border.top:before {
  top: -11px;
  bottom: auto;
  border-width: 0 11px 11px;
}

.triangle-border:before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 30px;
  border-width: 20px 20px 0;
  border-style: solid;
  border-color: #ccc transparent;
  display: block;
  width: 0;
}

.triangle-border.top:after {
  top: -10px;
  bottom: auto;
  left:31px;
  border-width: 0 10px 11px;
}

.triangle-border:after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 37px;
  border-width: 13px 13px 0;
  border-style: solid;
  border-color: #fff transparent;
  display: block;
  width: 0;
}