br {
    display: none;
}

.figure, .responsive-img {
    @media only screen and (max-width: 600px) {
        width:90%;
    }
    display:grid;
    grid-row-gap:10px;
    grid-template-columns:1fr;
    text-align:center;
}

/* Photographs used to be 50% of the window, flush against its left edge and hard
   up against the paragraph above and the one below. They are figures: centred in
   the column, capped at a page-sized width rather than a screen-sized one, and
   given room to read as a break in the text. */
.lama-img {
    border-radius: 6px;
    display: block;
    height: auto;
    margin: 18px auto;
    max-width: min(620px, 100%);
}

@media only screen and (max-width: 600px) {
    .lama-img {
        margin: 12px auto;
    }
}

/* Some lessons wrap the photograph and its caption in a `.figure` block, and the
   image inside it carries no class of its own. It is a figure all the same. */
.figure img,
.responsive-img img {
    border-radius: 6px;
    display: block;
    height: auto;
    margin: 12px auto;
    max-width: min(620px, 100%);
}

/* A mark inside a sentence - the ཨ, the sun-and-moon sign - is an image as well,
   and has to stay on the line it belongs to. The old rule set `height: ", "`,
   which is not a length, so it did nothing at all. */
.inline-figure {
    display: inline;
    /* hang.png is 545x1059: a Tibetan letter drawn at poster size, sitting in the
       middle of a sentence. It is set to the height of the line it interrupts. */
    height: 1.15em;
    margin: 0 2px;
    vertical-align: -0.15em;
    width: auto;
}

.title,
.yuanwen,
.subtitle {
    font-family: 'heiti, hei';
    font-weight: bold;
}

span.yuanwen {
    font-family: kaiti, kai;
}

.jiaozheng,
.jisong,
.zang,
.dingli {
    font-family: kaiti, kai;
}

/* .title,
.dingli,
.jisong,
th,
.ks,
.js,
.author,
.sikaoti,
.subtitle,
.center,
.zhushi,
[align='center'] {
    text-indent: 0;
} */

.title {
    font-weight: 700;
    line-height: 2.5;
    text-align: center;
}

.jisong {
    justify-self: center;
    text-align: center;
    font-weight: bold;
}

.kepan p { 
    color: gray;
    font-family: 'microsoft yahei';
}

.dingli {
    display: grid;
    justify-self: center;
    text-align: center;
    width: 100%;
}

.author {
    text-align: center;
    line-height: 1.3;
    font-family: kaiti;
}

.ks {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    justify-self: stretch;
}

.double p {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
}

.center {
    text-align: center;
}

.zang {
    color: #666;
}

.han {
    padding-left: 15px;
    font-family: source-regular, DengXian;
    font-weight: normal;
}

.note {
    /* color: gray; */
    text-align: center;
    border-bottom: 1px dotted;
    font-weight: bold;
}

.note-right {
    color: gray;
    text-align: right;
}

.subtitle {
    font-weight: bold;
    padding: 1rem 0;
}

.sikaoti {
    display: grid;
    grid-row-gap: 10px;
    line-height: 1.3;
    margin-left: 37px;
    @media only screen and (max-width: 600px) {
        margin-left:0;
    }
}

.zhushi {
    position: relative;
    font-family: source-regular, DengXian;
    color: #c74f4d;
    border-bottom: 1px dotted #c74f4d;
}


span.zhushi[tip]:hover::after {
    content: attr(tip);
    border: #c0c0c0 1px dotted;
    padding: 5px 5px 5px 5px;
    display: block;
    color: #000;
    background-color: #f6e0c4;
    border: 1px solid #f5bea6;
    z-index: 100;
    left: 0px;
    margin-top: 10px;
    width: 250px;
    position: absolute;
    top: 10px;
    text-decoration: none;
}

.zhuyin {
    position: relative;
    border-bottom: 1px dotted #c74f4d;
}

span.zhuyin[tip]:hover::after {
    content: attr(tip);
    border: #c0c0c0 1px dotted;
    padding: 5px 5px 5px 5px;
    display: block;
    color: #000;
    background-color: #f6e0c4;
    border: 1px solid #f5bea6;
    z-index: 100;
    left: 0px;
    margin-top: 10px;
    width: 250px;
    position: absolute;
    top: 10px;
    text-decoration: none;
}