/* Define your base font-size here; most elements will inherit this. */
html {
    font-size: 62.5%;     /* 1em = 10px */
    line-height: 1.8;    /* 24px (This is now our magic number (font-size x line-height); all subsequent margin-bottoms and line-heights want to be a multiple of this number in order to maintain vertical rhythm.) */
    font-family: 'Prata', serif;
}

body {
	font-size: 1.6em;
}

/* Common margin-bottom for vertical rhythm. */
h1,h2,h3,h4,h5,h6,
ul,ol,dl,
fieldset,
p,
table,
pre,
hr {
    margin-bottom: 12px;
}

h1 {
	color: #333;
}

/* These handle massive type, for less frequently occuring bits of text (e.g. in mastheads and banners). */
.giga {
    font-size:80px;
    font-size:5rem;     /* 80px */
    line-height:1.2;    /* 96px */
}
.mega {
    font-size:64px;
    font-size:4rem;     /* 64px */
    line-height:1.125;  /* 72px */
}
.kilo {
    font-size:48px;
    font-size:3rem;     /* 48px */
    line-height:1;      /* 48px */
}

/* Define headings and their associated classes here. */
h1,.alpha {
    font-size:1.5em;     /* 32px */
    line-height:1.5;    /* 48px */
}
h2,.beta {
    font-size:1.2em;    /* 24px */
    line-height:1.3;      /* 24px */
}
h3,.gamma {
    font-size:20px;
    font-size:1.25rem;  /* 20px */
    line-height:1.2;    /* 24px */
}
h4,.delta {
    font-size:18px;
    font-size:1.125rem; /* 18px */
    line-height:1.333;  /* 24px */
}
h5,.epsilon {
    font-size:16px;
    font-size:1rem;     /* 16px */
    line-height:1.5;    /* 24px */
}
h6,.zeta {
    font-size:16px;
    font-size:1rem;     /* 16px */
    line-height:1.5;    /* 24px */
}

/* Smaller-than-body-copy sizes here. */
small,.milli {
    font-size:12px;
    font-size:0.75rem;  /* 12px */
    line-height:2;      /* 24px */
}