body {
    margin: 0;
}

@media only screen and (max-width: 400px) {
    #start #more,
    #start #hint {
        font-size: 6vw;
    }
}

@media only screen and (max-width: 450px) {
    #main.orange {
        background-position: -440px 0px;
    }
}

#main {
    padding: 0 1em 1em 1em;
    border-width: 0px;
}

header h1 {
    width: 100%;
    margin-top: 3em;
}

#logos {
    position: absolute;
    top: 1em;
    left: 1.5em;
    width: auto;
}

#logos img {
    display: inline;
    height: 50px !important;
}

header nav ul {
    margin: 0.3em 0 3em 0;
}

header nav li {
    background-color: transparent;
    padding: 0;
}

header nav li a {
    padding: 0.5em;
}

header nav li.active {
    border-bottom: 0;
}

header nav li.active a {
    border-bottom: 3px solid;
}

header nav li:hover {
    background-color: transparent;
}

header nav li::after {
    content: "•";
    margin-left: 0.1em;
}

header nav li:last-child::after {
    content: none;
}

footer nav {
    font-size: 11pt;
}

@media only screen and (max-width: 530px) {
    header nav li {
        display: block;
    }

    header nav li::after {
        content: "";
    }

    header nav li a {
        padding: 0.1em 0 !important;
    }

    header nav li.active a {
        border-bottom: 0;
    }

    header nav li.active ::before {
        content: "• ";
    }

    header nav li:hover {
        opacity: 0.8;
    }
}

article {
    margin: 12em 0 0 0;
}

article .blog-post h2,
article .blog-post p.meta {
    font-size: 10pt;
}

@media only screen and (max-width: 432px) {
    header nav li a {
        padding: 0.5em 0.05em 0.5em 0;
    }
}