html {
    font-size: calc(1em + 1vw);
}

@media screen and (min-width: 1024px) {
    html {
        font-size: 20px;
    }
}

body {
    margin: 0;
    width: 100%;
    height: 100%;
}

a, a:visited {
    color: #555;
    border-bottom: 1px dashed #999;
    text-decoration: none;
}

a:hover {
    opacity: 0.7;
}

header {
    display: flex;
    align-items: center;
    height: 3em;
    padding: 0 .5em;
    box-shadow: 1px 3px 3px 0 #bbb;
}

@media screen and (max-width: 767px) {
    header {
        height: 4em;
    }
}

header > a {
    display: flex;
    align-items: center;
    border-bottom: none;
}

header .icon {
    background: url(/img/icon.png);
    background-size: 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    margin-right: 1em;
}

header .title {
    display: inline-flex;
}

main {
    height: calc(100% - 3em);
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Avenir, Palatino, Georgia, Verdana, Helvetica, Arial, sans-serif;
    padding: 0 2em;
}

main .content {
    display: flex;
    flex-direction: column;
    text-align: justify;
    line-height: 1.5em;
    letter-spacing: .04em;
}

main .content code, .codehilite {
    font-size: .85em;
}

h1 {
    font-size: 2em;
    line-height: 1.2em;
}

h2 {
    font-size: 1.5em;
    line-height: 1.1em;
}

.published-date {
    font-size: 0.75em;
    opacity: .75;
    margin-top: -1em;
    margin-bottom: 2em;
}

@media screen and (max-width: 1024px) {
    main .content, main .title {
        width: 100%;
    }
}

@media screen and (min-width: 1024px) {
    main .content, main .title {
        max-width: 768px;
    }
}

.codehilite {
    padding: 0 .5em;
    overflow: auto;
}