.paragraph {
  margin-bottom: 1em;
  line-height: 1.8;
}

.sentence {
  font-weight: normal;
  margin-bottom: 0.5em;
  font-size: 20pt
}

@media only screen and (min-width:768px) and (-moz-min-device-pixel-ratio:2),
only screen and (min-width:768px) and (-webkit-min-device-pixel-ratio:2),
only screen and (min-width:768px) and (min--moz-device-pixel-ratio:2),
only screen and (min-width:768px) and (min-device-pixel-ratio:2),
only screen and (min-width:768px) and (min-resolution:2dppx),
only screen and (min-width:768px) and (min-resolution:192dpi) {
  .sentence {
    margin-bottom: 0.5em;
    font-weight: 300;
    font-size: 26pt
  }
}

.selected {
  background-color: lightblue;
  font-weight: bold;
}

.sentence:hover {
  background-color: #ddd;
  color: #333;
  /* Change color to black on hover */
}

.word {
  cursor: ointer;
  position: relative;
}

.word:hover {
  /* background-color: #eee; */
  color: #5f95e9;
}

.word:hover::after {
  content: attr(data-pinyin);
  /* Display the value of data-pinyin attribute */
  position: absolute;
  top: -1.35em;
  /* Position the pinyin slightly above the word */
  left: 0;
  white-space: nowrap;
  font-size: 0.6em;
  font-weight: normal;
  /* Make the pinyin smaller */
  color: #888;
  /* color: #505050'; */

  /* Set a light grey color for the pinyin */
}

#word-meaning .hanzi {
  color: #3e99ed;
  font-weight: bold;
}

#word-meaning .pinyin {
  color: #df3142;
  /* font-size: 0.8em; */
  /* text-transform: uppercase; */
}

#word-meaning .meaning {
  color: black;
}

/* .du-footer-fixed-bottom {
  z-index: 5;
  position: fixed;
  background-color: #fafafa;
  border-top: 1px solid grey;
  height: 235px;
  bottom: 0;
  left: 0;
  right: 0
} */

.playback-speed {
  border-radius: 5px;
  background-color: var(--button-background-color);
  border: none;
  padding-top: 7.5px;
  padding-bottom: 7.5px;
  padding-left: 0;
  padding-right: 10px;
  color: var(--button-text-color);
  cursor: inherit;
  animation: none;
  -webkit-animation: none;
  user-select: inherit;
  font-size: .8em;
}

/* @media (max-width: 767px) {
  .playback-speed {
    font-size: .8em;
  }
} */

.timer {
  padding: 5px;
  font-size: .8em;
}