body {
  background:rgb(204,204,204);
  display:grid;
  font-size:12pt;
  grid-template-columns:1 / -1;
  height:100%;
  justify-content:center;
  justify-items:center;
  line-height:1.4;
  margin:0 auto;
  padding:0;
  width:300mm;
}
* {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
}
.main-page {
  margin:10mm auto;
  background-color:white;
  box-shadow:0 0 0.5cm rgba(0,0,0,0.5);
}
.sub-page {
  padding:1cm;
}
.page-PageSizeA4-PageOrientationPortrait {
  height:297mm;
  width:210mm;
}
.page-PageSizeA4-PageOrientationLandscape {
  height:210mm;
  width:297mm;
}
@page {
  margin:0;
}
@media print {
  .main-page {
    padding:0;
    margin:0;
    border:initial;
    border-radius:initial;
    width:initial;
    min-height:initial;
    box-shadow:initial;
    background:white;
    page-break-after:always;
  }
}

.rosetta {
  margin:0mm;
  /* ExplanationNote: even when printing with the option "Shrink to Print Area"
   * pixels too close to the border can get cropped.
   */
  padding:1.5mm;
  display:grid;
  column-gap:5mm;
  row-gap:1mm;
  justify-content:space-evenly;
  align-items:flex-start;
  align-content:space-around;
}
.rosetta-cell {
  /* ExplanationNote: by default, a grid item cannot be smaller than the size of its content.
   * Change that.
   */
  min-height:0;
  min-width:0;
  overflow:hidden;
}
.rosetta-cell-picture {
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:flex-start;
  width:100%;
  height:100%;
}
.rosetta-cell-picture img {
  display:block;
  border:0;
  width:100%;
  object-position:right center;
  overflow:hidden;
}
.rosetta-cell-picture .rosetta-cell-picture-description {
  margin-left:0.2cm;
  margin-right:0.2cm;
  font-family:monospace;
  font-variant:small-caps;
  font-size:14pt;
}

.rosetta-cell.writing-words {
  height:100%;
}
.writing-words {
  margin-top:0;
  margin-bottom:0;
  margin-left:0;
  margin-right:0;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-end;
  align-content:flex-start;
  row-gap:1mm;
}
.writing-words-horiz {
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  margin:0 0 0 0;
}
.writing-words-word {
  margin:0 0 0 0;
  display:grid;
  gap:1px;
  background-color:#aaa;
  overflow: hidden; /* ExplanationNote: avoid rounded borders to be cropped by background-color: */
  border:1px solid #aaa;
  border-top-left-radius:3mm;
  border-top-right-radius:3mm;
}
.writing-words-word:last-child {
  margin-right:0;
}
.writing-words-cell {
  display:grid;
  background-color:white;
  font-family:monospace;
  font-variant:small-caps;
  justify-self:center;
  margin-left:0;
  margin-right:0;
  padding-left:0;
  padding-right:0;
  align-content:center;
  justify-content:center;
  position:relative;
  white-space:preserve-spaces;
  width:100%
}
.writing-words-cell.pronunciation {
  font-variant:normal;
  font-size:0.4cm;
  height:0.5cm;
  color:#888;
}
.writing-words-cell.input {
  color:#ccc;
}
.writing-words-cell.input.hidden {
  color:transparent;
}