* { margin: 0; padding: 0; box-sizing: border-box; }

body { background: #1c1c1c; text-align: left; padding: 0 10px 40px 10px; }
body, h1, h2 { font-family: sans-serif; color: #eee; font-size: 14px; line-height: 22px; font-weight: normal; }

img { border: 0; max-width: 100%; height: auto; vertical-align: bottom; }
span { color: #777; }
h1 { padding: 40px 0 5px 0; }

nav { display: flex; flex-wrap: wrap; }
nav a { color: #777; text-decoration: none; padding: 2px 7px; border: 1px solid #2e2e2e; margin: 0 5px 5px 0; }
nav a:hover, nav a:focus { color: #eee; }
nav a:focus { outline: 3px solid #777; }
nav .current { color: #eee; border-color: #eee; }
a span, h1 span { padding-left: 5px; }
h1 a { color: #eee; text-decoration: none; }
h1 a:hover, h1 a:focus { color: #eee; text-decoration: underline; outline: 0; }

.sub { position: sticky; background: #1c1c1c; top: -30px; z-index: 1; padding: 40px 0 5px 0; }

.home section { display: flex; flex-wrap: wrap; padding-top: 40px; }
.home .section { width: 170px; padding-bottom: 40px; }
.home .section-large { width: 270px; }
.home h2 { padding-bottom: 5px; }
.home nav { display: flex; flex-direction: column; align-items: flex-start; }
.home nav a { display: block; }
.home nav a:hover, .home nav a:focus { color: #eee; }
.home nav a span { color: #777; display: none; }
.home nav a:hover span, .home nav a:focus span { display: inline-block; }

.year section { display: flex; flex-wrap: wrap; padding-top: 40px; }
.year .site { margin: 0 1px; position: relative; padding-bottom: 60px; }
.year .site h2 { padding-top: 5px; }
.year .site p { position: absolute; top: 226px; left: 0; color: #777; }
.year .site img { width: 365px; height: 200px; background: #2e2e2e; color: #2e2e2e; }

.index .section { padding: 40px 0 5px 0; font-size: 50px; line-height: 60px; }
.index section { max-width: 900px; }
.index .site { cursor: pointer; padding: 5px 0; position: relative; border-bottom: 1px solid #2e2e2e; display: flex; justify-content: flex-start; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; }
.index .site h2 { flex: 0 0 335px; }
.index .site span { flex: 0 0 50px; }
.index .site p { color: #777; align-items: flex-start; }
.index .site.open { height: 245px; }
.index .site img { display: none; width: 365px; height: 200px; background: #2e2e2e; position: absolute; top: 35px; left: 0; }
.index .site .show { display: block; }

@media (max-width: 900px) {
    .index .site p { width: 100%; }
    .index .site.open { height: 262px; }
    .index .site img { top: 53px; }
}