body {
    margin: 0;
}

#header {
    margin: 0 auto;
    max-width: 90ch;
}

#header>ul {
    display: flex;
    font-family: 'Noto Serif JP', serif;
    justify-content: space-between;
    padding: 0 12px;
}

#header>ul>li {
    list-style-type: none;
}

#header>ul>li>a {
    color: black;
    text-decoration: underline 0.15em rgba(0, 0, 0, 1);
    text-underline-offset: 0.2em;
    transition: text-decoration-color 300ms, text-underline-offset 300ms;
}

#header>ul>li>a:hover {
    text-decoration-color: rgb(147, 147, 150);
    text-underline-offset: 0.4em;
}

.article {
    color: black;
    max-width: min(90ch, calc(100vw - 16px));
    background-color: #f5f5f5;
    margin: 8px auto;
    display: block;
    padding: 8px 8px;
    text-decoration: none;
}

.desc,
.author {
    font-family: "Noto Serif JP", serif;
    margin: 0 0 8px 0;
    font-weight: 400;

}

.author {
    font-size: small;
}

.title {
    font-family: "PT Serif", serif;
    margin: 8px 0 8px 0;
    font-weight: 700;
    font-style: italic;
}