body {
    background-color: #e9e9e9;
}

.class {
    border: 1px solid #333;
    margin-bottom: 10px;
}

.current-grade {
    font-size: 10rem;
    text-align: center;
    line-height: 10rem;
    background-color: #e1e1e1;
    padding: 5px 0 40px 0;
    border-left: 1px solid rgba(33,33,33,.2);
}

.assignments {
    border-top: 1px solid rgba(33,33,33,.2);
    color: #777;
}

.assignment {
    padding: 2px 8px;
    background-color: rgba(255,255,255,.4);
    border-bottom: 1px dashed rgba(0,0,0,.1);
}

.missing {
    background-color: rgba(200,0,0,.1);
    color: #400;
}

.not-graded {
    color: #003;
}

.assignment .info {
    float: right;
    width: 13%;
    text-align: center;
    border-left: 1px solid rgba(55,55,55,.1) ;
}

.tardies {
   position: absolute; 
   top: 0;
   right: 0;
   color: white;
   padding: 4px 8px;
   background-color: red;
   font-size: .8em;
}

h3 {
    padding: 0 8px;
    margin: 0;
    font-size: 4rem;
    line-height: 4.5rem;
    white-space: nowrap;
}

.relative {
    position: relative;
}

.grade-summary {
    position: absolute;
    width: 100%;
    bottom: 0;
    border-top: 1px solid rgba(0,0,0,.1);
}

.grade-summary .third {
    width: 33%;
    float: left;
    padding: 4px 0;
    text-align: center;
}

.teacher {
    font-size: 3rem;
    color: #333;
}

.teacher span:first-child {
    background-color: rgba(0, 64, 208, 0.15);
}

.teacher span:last-child {
    background-color: rgba(208, 60, 23, 0.15);
}

h4 {
    padding: 0 12px;
    color: #333;
}