@page {
    size: 210mm 297mm;
    margin: 0;
}
* { box-sizing: border-box; }  /* borders are included in elements sizes */
html {
    --scale: .5;
    background-color: #eee;
}
#main {
    background-color: #fafafa;
    margin:0 auto; width:230mm;
    padding:20px 10px;
    font-family: sans;
}
#controls {
    font-size:large; 
}
h1 {
    font-size: xx-large;
}
p {
    max-width:40em; margin:1em auto;
}
p::first-letter {
    font-size: 1.5em;
}
/* only Firefox does proper hyphenation */
@-moz-document url-prefix() {
    p{text-align:justify;hyphens:auto;}
}
#tabs {
    min-height:14em;
}

/* inspired from https://codepen.io/oknoblich/pen/tfjFl */
#tabs section {
    display: none;
    padding: 10px 0 0;
    border-top: 1px solid #ddd;
    line-height:1.8em;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
    display:block;
}
#tabs>input[type=radio] {
  display: none;
}

#tabs>label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #777;
  border: 1px solid transparent;
}

#tabs>label:hover {
  color: #000;
  cursor: pointer;
}

#tabs>input:checked + label {
  color: #000;
  border: 1px solid #ddd;
  border-top: 2px solid orange;
  border-bottom: 1px solid #fff;
}

textarea { display:block; resize:both; height:8em; width:40em; }
input[type=text] { width:100%; }
#repeat {
    width:5em;
}
#vigenere-showkey {
    position: relative;
    top: 3px;
}
#width-selector {
    display:block; margin:1em auto;
    width:210mm; padding-left:calc(210mm*(.5 + .25 / 2));
}


.page {
    background-color: white;
    margin:0 auto;border:1px dashed black;
    height:calc(297mm*var(--scale));width:calc(210mm*var(--scale));
    padding:calc(10mm*var(--scale)) calc(5mm*var(--scale));
    page-break-after: always;
}
.page table {
    margin:calc(9mm*var(--scale)) auto 0;
    border-collapse:separate;border-spacing:0;
    border:1px solid black;border-radius:3px;
    page-break-inside: avoid;
}
.page table:first-child {
    margin-top: 0;
}
.page td {
    box-sizing:border-box;
    height:calc(9mm*var(--scale));width:calc(9mm*var(--scale));
    font-family:sans-serif;font-size:calc(5.5mm*var(--scale));
    text-transform:uppercase;text-align:center;
}
.page td+td {
    border-left:calc(2px*var(--scale)) solid black;
}
.page tr+tr>td {
    border-top:calc(2px*var(--scale)) solid black;
}
@media print {
    body,#main{
        margin:0;padding:0;
        background:none;border:none;
        --scale:1;
    }
    .page {
        height:calc((297mm - 20mm)*var(--scale));width:calc(210mm*var(--scale));
        border: none;
        margin: 0;
    }
    #controls{display:none;}
}
@media screen {
    #pages {
        text-align: center;
    }
    .page {
        display: inline-block;
        margin:.4em;
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ */
    #width-selector {
        display: none;
    }
    .page {
        height:297mm !important;
        width:210mm !important;
        margin:10mm 10mm !important;
    }
    table {
        margin:10mm auto !important;
    }
    td {
        height:calc(10mm - 2px) !important;
        width:calc(10mm - 2px) !important;
        font-size:20pt !important;
    }
    td+td {
        border-left:2px solid black !important;
    }
    tr+tr>td {
        border-top:2px solid black !important;
    }
}