html {

font-size: 100%;
@media (max-width: $breakpoint-small) {
  font-size: 80%;
}
@media (max-width: $breakpoint-medium) {
  font-size: 90%;
}

}

body {

color: #555;
font-family: "Droid Serif", serif;
line-height: $base-line-height;

}

p, h1, h2, h3 {

margin-top: 0;

}

p {

font-size: $body-font-size;
margin-bottom: $vertical-rhythm;
@media (max-width: $breakpoint-small) {
  font-size: $body-font-size * $small-ratio;
}

}

h1, h2, h3 {

color: #333;
font-family: "Oxygen", sans-serif;
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.5em;

}

h1 {

font-size: $heading-font-size * ($type-ratio * 2);
@media (max-width: $breakpoint-small) {
  font-size: $heading-font-size * $type-ratio;
}

}

h2 {

font-size: $heading-font-size * $type-ratio;
@media (max-width: $breakpoint-small) {
  font-size: $heading-font-size * ($type-ratio * $small-ratio);
}

}

h3 {

font-size: $heading-font-size;
@media (max-width: $breakpoint-small) {
  font-size: $heading-font-size * $small-ratio;
}

}