.header {
    width:40%;
    height:10%;
    background-color:lightgray;
    padding:1.5em;
}

.header-left {
    text-align:left;
    width:40%;
    margin-left:10%;
    float:left;
}

.header-right {
    margin-top:3%;
    margin-left:50%;
    text-align:left;
    width:40%;
}

main {
    width:30%;
    
}

.grade-main {
    margin-left:5%;
    width:30%;
    align-content:center;
}

#main-left {
    float:left;
    margin-left:10%;
    width:40%;
    text-align:center;
}

#main-right {
    margin-left:50%;
    width:40%;
    text-align:center;
}

.review-info {
    display:inline;
    margin-left:10%;
}

a + div {
    display:inline;
    opacity:0%;
    transition:opacity 0.5s;
}

#grade-averager {
    text-align:left;
    width:75%;
    margin-left:12.5%;
}

a:hover + div {
    display:block;
    opacity:100%;
}

#grade-list {
    text-align:center;
    border:1px solid black;
    table-layout:auto;
}

#grade-table {
    text-align:center;
    border:1px solid black;
    table-layout:fixed;
    width:100%;
}

.grade-table-header {
    font-size:18px;
}

th, td {
    border:1px solid black;
}

#clear-table {
    margin-left:35%;
    width:30%;
}

#subject-form {
    display:none;
}