body { margin-top:30px; font: normal 16px Helvetica, Verdana; color: #333; }
h1 { font-family: "Courier New"; }
p { font-weight: bold; }
.directions { display: block; margin-bottom: 10px; font-size: 80%; }
.wrapper { width: 50%; min-width: 300px; background: #eee; text-align: center; padding: 20px; margin: 0 auto; box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 10px 0 -5px #eee, 0 10px 1px -4px rgba(0,0,0,0.15), 0 20px 0 -10px #eee, 0 20px 1px -9px rgba(0,0,0,0.15); }
#grades, #avg_grades { font: normal 20px "Courier New"; }
#final_grade { font: bold 72px Helvetica, Verdana; }
.green { color: green; }
.teal { color: teal; }
.blue { color: blue; }
.orange { color: orange; }
.red { color: red; }


#article {
    padding: 5% 10% 1%;
}

#article p {
    font-weight: lighter;
}