body {
    margin:0;
    padding:0;
}
main {
    overflow:auto;
}
header.menu nav, main#content {
    max-width: 1000px;
    min-width: 480px;
    margin: 0 auto;
}
header.menu {
    position:relative;
    background: rgb(250,250,250);
    box-shadow: 0 0 4px black;
    background:lightblue;
}
header.menu nav ul {
    padding:0;
    margin:0;
    list-style-type:none;
    display:flex;
    text-align:center;
}
header.menu nav ul li {
    flex: 1 1 100%;
    background-image: linear-gradient(to bottom, transparent 51%, cyan 50%, cyan 95%, blue 95%);
    background-size: 100% 200%;
    transition: all .25s ease-in-out;
}
header.menu nav ul li:hover {
    background-position: bottom center;
}
header.menu nav ul li a {
    display:block;
    padding:8px;
    color:black;
    text-decoration:none;
}
main#content {
    padding:8px;
    box-sizing: border-box;
    box-shadow: 0 -16px 16px black;
}
h2 {
    text-align:center;
    border-bottom:1px solid black;
    margin-bottom:8px;
}
section.files {
    display:flex;
    flex-wrap:wrap;
}
section.files article {
    margin:8px;
    border:1px solid lightgrey;
    border-radius:8px;
    box-shadow:0 0 8px black;
    flex-grow:1;
}
section.files article h3 {
    text-align:center;
    margin-top:0;
}
section.files article h3 a {
    color:black;
    text-decoration:none;
    padding-top:1em;
    display:block;
    border-bottom:1px solid lightgrey;
}
section.files article h3 a:hover {
    text-decoration:underline;
}
section.files article ul {
    padding:0 40px;
}
img {
    border-radius:8px;
    border:1px solid black;
    float:right;
    margin-top:8px;
}
a {
    color:rgb(0,0,200);
}
a:hover {
    color:blue;
}
@media only screen and (max-device-width: 480px) {
    main#content, header.menu nav {
        min-width:auto;
    }
    header.menu nav ul {
        flex-direction:column;
        box-shadow: 0 0 8px black;
    }
    header.menu nav ul li {
        border-bottom:1px solid grey;
    }
    section.files {
        display:block;
    }
    img {
        float:none;
    }
}
