.sub-page {
  //margin:2mm !important;
}
.main-page {
  //background-color:white !important;
}
.rosetta-reading {
  margin:0mm;
  /* ExplanationNote: even when printing with the option "Shrink to Print Area"
   * pixels too close to the border can get cropped.
   */
  padding:1mm;
  display:grid;
  ////column-gap:1mm;
  //row-gap:1mm;
  justify-content:space-evenly;
  //align-items:space-between;
  align-content:space-around;
}
.cards {
  border:1px solid #aaa;
  display:grid;
  gap:1px;
  align-content:center;
  background-color:#aaa;
  justify-content:center;
}
.cards.cards-front {
  background-color:transparent;
  border:1px solid transparent;
}
.card {
  display:grid;
  background-color:white;
  //border:5px solid green;
  justify-items:center;
  align-items:center;
}
.card-front {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  /* ExplanationNote: enough to fit two lines of french,
   * two lines of english
   * and two lines of chinese (with a bigger font to manually write over it).
   */
  padding-top:3mm;
  padding-bottom:3mm;
  padding-left:1mm;
  padding-right:1mm;
}
.card-front-french-english-mandarin {
  display:grid;
  grid-template-rows:2cm 2cm 4.2cm;
  align-items:start;
  justify-items:center;
}
.card-front > .separator {
  border-top:1px solid #999;
  width:100%;
}
.card-matter {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  align-content:space-around;
  column-gap:0.5cm;
}
.card-description {
  color:#999;
  font-family:monospace;
}
.card-picture {
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:flex-start;
  width:100%;
  height:100%;
  overflow:hidden;
}
.card-picture img {
  display:block;
  border:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  overflow:hidden;
}
.part {
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  margin:0 0 0 0;
  border:5px solid red;
}
.word {
  font-family:monospace;
  font-variant:small-caps;
  font-size:1.5cm;
  line-height:1.0;
}
.word .word-field {
  display:flex;
  flex-direction:row;
  justify-content:center;
}
.word .word-parts {
}
.word .word-parts .word-part {
}
.word .word-part.part-odd.word-part-2 {
  background:linear-gradient(to right,blue,green);
  background-clip:text;
  color:transparent;
}
.word .word-part.part-even.word-part-2 {
  background:linear-gradient(to right,green,blue);
  background-clip:text;
  color:transparent;
}

.word .part-even {
  color:blue;
}
.word .part-odd {
  color:green;
}
.word .word-ipas {
  color:#999;
  font-size:0.5cm;
  font-family:Arial;
  font-variant:normal;
}
.word .word-ipas .word-ipa {
}
.word .word-pinyins {
  color:#999;
  font-size:0.5cm;
  font-family:Arial;
  font-variant:normal;
}
.word .word-pinyins .word-pinyin {
}