body {
  line-height:1.4;
  margin-top:0;
  margin-left:0;
  margin-right:0;
  //width:650px;
  //width:100%;
  display:grid;
  grid-template-columns:1 / -1;
  justify-items:center;
  justify-content:center;
}

body {
  width:300mm;
  height:100%;
  margin:0 auto;
  padding:0;
  font-size:12pt;
  background:rgb(204,204,204); 
}
* {
  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:0 0 0 0;
  padding:0 0 0 0;
  display:grid;
  column-gap:0.25cm;
  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;
  place-content:center;
  vertical-align:center;
  width:100%;
  object-fit:cover;
  object-position:center 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;
  column-gap:1cm;
  row-gap:0.25cm;
}
.writing-words-horiz {
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  column-gap:1cm;
  margin:0 0 0 0;
}
.writing-words-word {
  margin:0 0 0 0;
  display:grid;
  gap:1px;
  background-color:black;
  border:1px solid black;
}
.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;
  place-content:center;
  position:relative;
  white-space:preserve-spaces;
  width:100%
}
.writing-words-cell.pronunciation {
  font-variant:normal;
  font-size:0.4cm;
  height:0.5cm;
}
.writing-words-cell.input {
  color:#ccc;
}
.writing-words-cell.input.hidden {
  color:transparent;
}
.writing-words-cell-space {
  box-shadow:0 0 0 0 red !important;
  border-left:1px solid white;
  border-right:1px solid white;
  /*border-top:1px solid white;*/
  /*border-bottom:1px solid white;*/
}