body {
    font-family: -apple-system, Helvetica, "Segoe UI", "YuGothic", "Yu Gothic Medium", Meiryo, "MS PGothic", sans-serif;
    line-height: 1.46;
    color: #292929;
    padding-bottom: 7em;
}

h3 { font-size: 1.7em; }

h4 {
    font-size: 1.6em;
    color: #da2a2a;
    border-left: 0.6em solid #eaeaea;
    padding-left: 0.3em;
}

#container { width: 100%; }

main, header, footer {
    margin: 0 auto;
    width: 84%;
    min-width: 480px;
    max-width: 720px;
}

@media screen and (max-width:480px) { 
    main, header, footer {
        width: 90%;
        min-width: 240px;
    }
}

header { margin-top: 0.8em; margin-bottom: 2.6em; }
footer { margin-top: 4em; }

header::after, footer::after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

a, a:link, a:visited {
    color: #0030ff;
    text-decoration: none;
}

a:hover, a:active {
    color: #ff0022; /* #4080ff */
    text-decoration: underline;
}

dl.toc {
    font-size: 0.9em;
}

dl.toc > dt {
    margin-top: 0.4em;
}

.construction {
    font-weight: bold;
    font-size: 4em;
    color: #de0000;
}

.gray { color: #5c5c5c; }
.gray-light { color: #909090; }
.gray-lighter { color: #b9b9b9; }
.green { color: #60bc0f }
.red { color: #e53e54; }
.lavender { color: #bc70eb; }

.code, .code-bold, .code-bold-1, .code-bold-2, .code-bold-3, .code-bold-4,
.code-invert, .code-yellow, .code-green, .code-pink, .code-orange
{
    font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    font-weight: 200;
    margin: 0.2em 0px;
    padding: 0.2em 0.4em 0 0.4em;
}

.code, .code-bold, .code-bold-1, .code-bold-2, .code-bold-3, .code-bold-4 {
    background-color: #ededed;
    color: #1a1a1a;
}
.code-invert { background-color: #4c4c4c; color: #ffffff; }
.code-yellow { background-color: #fffa66; color: #2a1717; }
.code-green { background-color: #8be56d; color: #0e150b; }
.code-pink { background-color: #ff95e3; color: #3d062f; }
.code-orange { background-color: #ffaf76; color: #1f0e0e; }

.code-bold { font-weight: bold; }
.code-bold-1 { font-weight: bold; font-size: 1.1em; }
.code-bold-2 { font-weight: bold; font-size: 1.2em; }
.code-bold-3 { font-weight: bold; font-size: 1.3em; }
.code-bold-4 { font-weight: bold; font-size: 1.4em; }


dl#describe-html > dt {
    margin-top: 0.6em;
    font-size: 1.3em;
    font-weight: 900;
}

dl#describe-html > dd {
    margin-top: 0.6em;
    margin-inline-start: 1.6em;
}

.border-gray {
    border: solid 1px #e2e2e2;
}

.note-inverse, .note {
    padding: 0.6em;
    max-width: 710px;
}

.note {
    background-color: #f7f7f7;
    color: #696969;
}

.note-inverse {
    background-color: #303030;
    color: #d6d6d6;
}

.nav-link {
    display: block;
    font-size: 1.1em;
    float: left;
    margin-right: 0.6em;
}

.btn-back {
    cursor: pointer;
}

.silence {
    font-weight: bold;
    margin-top: 0.4em;
    margin-left: 1em;
    letter-spacing: 0.6em;
}