@font-face {
  font-family: 'Bazar';
  src: url('http://portfolio.queenofwhisks.com/demo/font/deco/Bazar.eot?#iefix') format('embedded-opentype'),  url('http://portfolio.queenofwhisks.com/demo/font/deco/Bazar.woff') format('woff'), url('http://portfolio.queenofwhisks.com/demo/font/deco/Bazar.ttf')  format('truetype'), url('http://portfolio.queenofwhisks.com/demo/font/deco/Bazar.svg#Bazar') format('svg');
  font-weight: normal;
  font-style: normal;
}
html {
  font-size: 10px;
}
body {
  font-size: 1.6rem;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
h1 {
  font-size: 72px;
  line-height: 1.0;
  text-align: center;
  margin: 0;
  padding: 2.4rem 0;
}
/* http://www.midwinter-dg.com/permalink-7-great-css-based-text-effects-using-the-text-shadow-property_2011-03-03.html */
.retromatic {
  background: #393d48;
  color: #d7ceb2;
  font-family: Bazar, serif;
  font-variant: small-caps;
  letter-spacing: 1rem;
  text-shadow: 3px 3px 0 #2c2e38, 5px 5px 0 #5c5f72;
}
.retromatic:before {
  content: '\02606\000A0';
}
.retromatic:after {
  content: '\000A0\02606';
}

.san-francisco {
  background: #000;
  color: #f9e983;
  font-family: Futura, 'Futura PT', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}
.san-francisco span {
  border: 0.3rem solid #b4b084;
  -webkit-text-stroke-color: #d49111;
  display: block;
  padding: 1rem;
  width: 44rem;
  margin: 0 auto;
}
.san-francisco .large {
  border-width: 3px 3px 0;
  font-size: 285%;
  -webkit-text-stroke-width: 3px;
}
.san-francisco .small {
  border-width: 0 3px 3px;
  -webkit-text-stroke-width: 2px;
}
.cards {
  font-family: Futura, 'Futura PT', sans-serif;
  text-transform: uppercase;
  overflow: hidden;
}
.cards span {
  display: block;
  float: left;
  margin: 1rem;
  padding: 0.25em 0;
  width: 1em;
}
.cards span:nth-child(1) {
  background: hsla(30, 100%, 50%, 1.0);
  -webkit-transform: rotate(5deg);
}
.cards span:nth-child(2) {
  background: hsla(30, 100%, 50%, 1.0);
  -webkit-transform: rotate(10deg);
}
.cards span:nth-child(3) {
  background: hsla(30, 100%, 50%, 1.0);
  -webkit-transform: rotate(15deg);
}
.cards span:nth-child(4) {
  background: hsla(30, 100%, 50%, 1.0);
  -webkit-transform: rotate(20deg);
}
.cards span:nth-child(5) {
  background: hsla(30, 100%, 50%, 1.0);
  -webkit-transform: rotate(25deg);
}
.cards span:nth-child(6) {
  background: hsla(30, 100%, 50%, 1.0);
  -webkit-transform: rotate(30deg);
}
.cards span:nth-child(7) {
  background: hsla(30, 100%, 50%, 1.0);
  -webkit-transform: rotate(35deg);
}