p.pinyin {
  ruby-position: over;
  font-family:
    方正准圆 GB18030L2,
    sans-serif;
  line-height: 2;
  text-align: justify;
  font-weight: normal;
  font-style: normal;
  font-size: 18pt;
  margin-bottom: 2px;
  widows: 1;
}

.green {
  color: #2aa738;
}
span.red,
ruby.red {
  color: #ff0000;
}

rt {
  font-family:
    pinyin,
    sans-serif,
    华文细黑,
    等线,
    微软雅黑 Light,
    微软雅黑,
    Arial,
    Arial Unicode MS;
  font-size: 0.6em;
  margin-bottom: 2px;
  letter-spacing: 0;
}
ruby.red {
  color: #ff0000;
}
ruby {
  letter-spacing: 0.2em;
  font-family:
    方正准圆 GB18030L2,
    sans-serif;
}

@font-face {
  font-family: "方正准圆 GB18030L2";
  src:
    local("FZZhunYuanGB18030L2-Regular"),
    url("pic/FZZhunYuanGB18030L2-Regular.TTF") format("truetype");
}
@font-face {
  font-family: "pinyin";
  src:
    local("pinyin"),
    url("pic/pinyin2.ttf") format("truetype");
}

/* cust */
.main-content {
  margin: 16px;
}

.main-content h1 {
  text-align: center;
  margin-bottom: 16px;
}

p.pinyin {
  margin-bottom: 16px;
}

p.pinyin:hover {
  padding: 16px 16px 0;
  background: var(--green);
}