html {
    background-color: #444;
}
body {
    margin: 0;
    padding: 0 7px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 1em; /* to be inherited - for the @media query to work */
    color: #fff;
}
#showwidth {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 3px;
    & div:has(#bigdivwidth) {
        text-indent: 1em;
    }
}
@media (max-width: 740px) {
    body {
        font-size: 80%;
    }
}
@media (max-width: 590px) {
    body {
        font-size: 57%;
    }
}
@media (max-width: 1010px) {
    footer span {
        display: inline-block;
    }
}
@media (min-width: 1600px) {
    body {
        font-size: 120%;
    }
}
label[for="lang-select"] {
    position: absolute;
    top: 0;
    right: 5px;
    font-size: 0.5em;
    font-weight: 500;
}
label[for="speed"] {
    position: absolute;
    top: 0;
    right: 92px;
    font-size: 0.5em;
    font-weight: 500;
}
select {
    font-size: 1.1em;
    background-color: #888;
    position: absolute;
    top: 0.7em;
    right: 5px;
    border: 0;
    margin: 0;
    padding-left: 4px;
}
input[type="range"] {
    position: absolute;
    top: 2em;
    right: 90px;
    width: 100px;
    border: 0;
    margin: 0;
    padding-left: 4px;
}
header {
    text-align: center;
    position: sticky;
    top: 0;            
    background-color: #444;
    padding: 0;
}
h2 {
    margin: 0;
    padding: 12px 0;
    color: #2ee634;
}
input[type="number"] {
    width: 12vw;
    text-align: center;
    font-size: 1.1em;
    font-weight: 700;
    color: #15e826;
    background-color: #777;
    border: 0;
    margin: 0;
    padding: 0;
 }
table {
    width: 100%;
    table-layout:fixed;
    color: #c8f7cc;
    padding-bottom: 4px;
}
#bigDiv {
    container-type: inline-size; /* see @container with width condition */

    position: absolute;
    box-sizing: border-box;
    
    display: grid; /* flex cannot center content vertically within the items height */
    grid-template-rows: 2.5fr 1.5em 1fr 5.5fr;
    /*align-items: center;*/
    justify-items: center;

    transform: rotateX(-90deg); /* init as invisible item */
    background-color: #c8f7cc;
    padding: 1em;
    z-index: 1;
    color: #444;
    & h3 {
        margin: 0;
        max-width:80%;
        font-size: 2.5em;
        font-weight: 700;
        align-self: end;
        text-align: center;
     }
    & .subtext {
        align-self: center;
    }
    & .comment {
        overflow: auto;
        padding: 0;
        font-size: 1.1em;    
        font-weight: 500;
        max-width: 70%;
        text-align: justify;
    }
}
@container (min-width: 1600px) {
    .comment {
        max-width: 50% !important;
    }
}
@container (max-width: 400px) {
    .comment {
        max-width: 90% !important;
    }
}
main {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 10vw;
    & div {
        box-sizing: border-box;
        text-align: center;
        display: grid;
        grid-template-rows: auto 1fr;
        width: 100%;
        font-size: 0.8em;
        border: 1px solid grey;
        margin: 0;
        padding: 0 4px 4px;
    }
}
p {
    margin: 0;
    padding: 3px 0;
}
img {
    place-self: center;                     /* center grid item vertically and horizontally */
    /* calculate the hight -> the best available option
        height of parent (grid-auto-rows 10vw) -> 10vw
        - line-height of the preceding <p>
            font-size 0.8em * 1.3 (~ for Verdana p default elements)
        - padding top and bottom of the preceding p element (padding: 3px 0) -> 6px
        - padding bottom of the parent div (padding: 0 4px 4px) -> 4px
        - border of the parent div (1px ..., border-box) -> 2px
        - margin of the parent div which is 0 
        - another 3 px for a little bottom margin for the centered img -> 2px
    */
    max-height: calc(10vw - 1.1em - 6px - 8px);
}
@media print {
    img {
        border: 1px solid grey;        
    }
}
footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.7em;
    font-style: italic;
    color: #c8f7cc;
    padding: 6px;
    & p:last-of-type {
        text-align: right;
    }
}
.invisible {
    display: none;
}