body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f8f9fa;
color: #333;
margin: 5vh 0 0;
}

main {
margin: 70px 10px;
}

#header {
position: absolute;
z-index: 10;
top: 0;
width: 100%;
height: 50px;
background-color: rgba(50,80,100,1);
line-height: 50px;
}

#header .title {
z-index: 1;
position: absolute;
top: 0;
bottom 0;
left: 80px;
position: absolute;
color: white;
font-size: 24pt;
font-weight: 900;
}

#header .home {
z-index: 2;
position: absolute;
height: 50px;
margin: 2px 15px;
transition: 100ms all ease;
}

#header img {
height: 45px;
filter: brightness(1.5) saturate(.7);
}

#header .home:hover {
transform: scale(1.1);
}

#header .home:hover ~ .title {
transform: translate(5px,0);
transition: 100ms all ease;
}

table {
border: none;
text-align: left;
}

tr a {
font-weight: 600;
color: black;
}

table img {
display: none;
}

td:nth-child(n + 2) {
width: 500px;
}

tr:nth-child(n+2) a:hover {
color: rgba(0,0,0,.5);
}

tr:nth-child(3) a {
color: rgba(255,255,255,1);
background-color: rgba(0,0,0,.2);
text-decoration: none;
padding: 4px;
border-radius: 3px;
}

tr:nth-child(3) > td:nth-child(n+3) {
display: none;
}

td:nth-child(n+5), th:nth-child(n+5), hr {
display: none;
}

th a {
font-weight: 700;
color: rgba(0,0,0,.5);
text-decoration: none;
}

footer {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 12px;
font-weight: 100;
}