@font-face {
  font-family: SourceHanSerif;
  src: local('SimSun'), local('STSong'), url('SourceHanSerifSC-Regular.otf');
  font-display: swap;
}


* { padding: 0; margin: 0; box-sizing: border-box; }

html, body { height: 100%; }

button {cursor: pointer; }

body { background-image: url("/img/texture.png"); background-color: #eee; font-family: "Helvetica Neue", "PingFang SC", Helvetica, Arial, "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", sans-serif; }

#app { max-width: 600px; height: 100%; margin: 0 auto; }

.header { padding-top: 20px; margin-bottom: 20px; }

.title { margin-bottom: 20px; font-size: 22px; color: #484848; text-align: center; }

.desc { margin-bottom: 20px; color: #898989; font-size: 16px; text-align: center; height: 40px; }

.couplet-button_group { position: relative; margin: 0 auto; max-width: 600px; width: 90%; height: 40px; font-size: 0; background-color: #fff; border-radius: 3px; overflow: hidden; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
.couplet-button_group::after { content: " "; display: table; clear: both; }
.couplet-button_group .couplet-input { width: 100%; padding-left: 10px; padding-right: 110px; height: 40px; line-height: 40px; background-color: #fff; border: none; font-size: 20px; }
.couplet-button_group .couplet-btn { position: absolute; top: 0; right: 0; width: 100px; height: 40px; line-height: 40px; background-color: #4CAF50; color: #fff; outline: none; border: none; font-size: 20px; }

.change-btn {background-color: #A4B912 !important;}

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content {
  padding: 0 50px;
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
  min-height: 160px;
  flex-grow: 2;
}

.ga-under-input {
  margin-left: 20px;
  margin-right: 20px;
}

#couplets_title {
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
  height: 60px;
  font-size: 20px;
  color: #6f6e6e;
  text-decoration: underline;
  text-align: right;
  cursor: pointer;
}

.couplet_contents {
  margin: 20px;
  font-size: 20px;
  color: #242424;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  background-color: #fefff6;
  padding: 20px;
  padding-bottom: 40px;
  border-radius: 5px;
  font-family: SourceHanSerif;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: red;
  background-image: url("/img/sajinzhi.jpg");
  text-underline-offset: 4px;
}

.ads {
  margin: 20px;
}

.couplet .desc {
  margin-right: 20px;
  display: none;
}

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { .content { min-height: 160px; } }
@media (device-height: 667px) and (-webkit-min-device-pixel-ratio: 2) { .content { min-height: 180px; } }
@media (device-height: 736px) and (-webkit-min-device-pixel-ratio: 2) { .content { min-height: 200px; } }
.couplet-text { margin-bottom: 10px; display: flex; }
.couplet-text .couplet-hd { width: 50px; }
.couplet-text .couplet-bd { flex: 1; }
.couplet-text span { margin-right: 5px; margin-bottom: 5px; display: inline-block; width: 34px; height: 34px; line-height: 34px; text-align: center; font-size: 24px; vertical-align: middle; background-image: url("/img/text-bg.png"); background-repeat: no-repeat; background-size: cover; }

.footer { position: fixed; bottom: 20px; left: 0; right: 0; width: 100%; text-align: center; }

.footer a { color: #333; }

.qc-code_box { margin: 0 auto; width: 100px; height: 100px; opacity: .4;}
.qc-code_box img { width: 100%; height: 100%; }

#loading { position: absolute; left: 50%; margin-left: -25px; height: 50px; width: 50px; border: 1px solid #000; border-right: 0; border-bottom: 0; border-radius: 50px; -webkit-transition: all 0.5s ease-in; -webkit-animation-name: rotate; -webkit-animation-duration: 1.0s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }

@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); } }

.article {
  padding: 30px;
}

.article div {
  margin: 20px;
}

.article img {
  width: 40%;
  margin-left: 30%;
}

.share_button {
  color: #009efd;
  text-decoration: underline;
}

#share_text {
}

.pop_up {
  animation: zoom-in-zoom-out 1.5s ease;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  40% {
    transform: scale(1.3, 1.3);
  }
  100% {
    transform: scale(1, 1);
  }
}

.like_button {
  float: right;
  background: none;
  font-size: 15px;
  color: #8a8a8a;
  font-weight: bold;
  border-style: groove;
  border-color: #ecebeb;
  border-width: 1px;
  padding: 2px 5px 2px 5px;
  border-radius: 4px;
}

.liked {
  color: #ea4848 !important;
  animation: zoom-in-zoom-out 0.6s ease;
}

#couplet-list-btn-group {
  width: 100%;
  display: flex;
  flex-direction: row;
  color: #3c3b3b;
}

.couplet-list-btn {
  margin-left: 20px;
  cursor: pointer;
}

#couplet-list-btn-group .active {
  font-weight: bolder;
}

#back_to_top {
  position: fixed;
  left: 20px;
  bottom: 20px;
  padding: 5px;
  font-weight: bold;
  color: #3c3b3b;
}