/* general */
* { box-sizing:border-box; }
body { margin:0; font:14px sans-serif;}
a { color:#0d182b; text-decoration:underline; }

/* ruby */
ruby>rt { visibility:hidden; }
ruby:hover>rt { visibility:inherit; }
.ruby-never ruby:hover>rt { visibility:hidden; }
.ruby-always ruby>rt { visibility:inherit; }
/* Internet Explorer */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    ruby>rt { position:relative; bottom:5px; }
}

/* header */
header {
    background-color:#0d182b;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
header a, header a:hover { color:white; text-decoration:none; outline:none; }
header h1 { margin:0; font:28px sans-serif; letter-spacing:2px; word-spacing:2px; }
/* margin atop <a> (not padding in <h1>) for cross-browser consistency */
header h1 a, header h1 a:hover { display:inline-block; margin:10px 0 10px; padding:0 14px 18px; }
/* ruby toggle */
#ruby-toggles { margin:0 auto 1em auto; }
#ruby-toggles ul {
    list-style-type:none; margin:0; padding:0;
    display:flex; justify-content:space-between; width:15em;
}
#ruby-toggles input { display:none; }
#ruby-toggles img { height:60px; width:60px; padding:5px; border-radius:3px; }
#ruby-toggles :checked + img { padding:4px; border:1px solid white; }
#ruby-toggles :hover + img { padding:4px; border:1px solid #a1b9e8; }
#ruby-toggles-helper { color:white; text-align:center; margin:-.5em; }
/* navigation */
header nav { font-size:20px; }
header nav ul {
    list-style-type:none; margin:0; padding:0;
    display:flex; justify-content:space-around; width:400px;
}
@media (max-width:399px) {
    header nav ul { width:100vw; }
}
header nav li { display:inline-block; padding:10px; }
header nav a { color: #ccc; }

/* pagination */
main nav { font-size:x-large; }
main nav ul { list-style-type:none; padding:0; }
@media (max-width:639px) {
    main nav li { width:100%; text-align:center; }
}
@media (min-width:640px) {
    main nav ul { display:flex; }
    main nav li { width:10em; }
    main nav li:nth-child(2) { text-align:center; }
    main nav li:last-child { text-align:right; }
}

/* content */
main { display:block; max-width:660px; margin:0 auto; padding:0 10px; line-height:1.75; font-size:20px; }
main h2 { font-size:28px; color:#24447a; font-weight:bold; letter-spacing:4px; word-spacing:4px; margin:32px 0; }
@-moz-document url-prefix() {
    /* Only Mozilla Firefox does proper hyphenation */
    @media (min-width:30em) { p {text-align:justify;hyphens:auto;} }
}
.feed-icon { max-width:20px; }

/* stories */
article { margin-bottom:100px; overflow-wrap:break-word; }
article h3 { font:24px sans-serif; margin:0; color:#24447a; }
article h4 { font-size:large; margin:0 0 10px; }
article h4 a { font-family:mono; }
article img { margin-bottom: 12px; }
article img, audio, video { width:100%; }
article>p { cursor:default; margin-bottom:40px; }
article .links { width:100%; }
article .links td { width:33.33%; text-align:center; }
article .links td:first-child { text-align:left; }
article .links td:last-child { text-align:right; }

/* rikai */
#rikai {
    display:none;
    position: absolute; z-index: 1000001;
    background:#5c73b8; color:white;
    padding:6px 10px; width:600px; max-width:100%;
    max-height:600px; overflow: auto;
    border-radius:5px; box-shadow: 2px 2px 1px #64646464;
    box-sizing: border-box;
}
#rikai dl { margin:0; }
#rikai dt { font-size:18px; font-weight:normal; margin-bottom:5px; }
#rikai dt .kanji { color:#b7e7ff; margin-right:0.7em; }
#rikai dt .kana { color:#c0ffc0; margin-right:0.7em; }
#rikai ol { padding-left:18px; }

.key {
    display:inline-block; width:20px; height:18px;
    position: relative; top: -2px;
    margin-top: .5em; padding-top: 1px;
    color: #333; background-color: #eee;
    border-radius: 3px;
    box-shadow:
        inset 0 0 25px #eee,
        0 1px 0 #ccc,
        0 2px 0 #c9c9c9,
        0 2px 3px #333;
    text-shadow: 0px 1px 0px #f5f5f5;
}