* { margin: 0; padding: 0; border: 0; box-sizing: border-box; }
html {font-size:0.81rem}
.personenTitle {
    font-size: 1.3rem; 
    margin-top: 0.52rem;
    margin-left: 2px; 
    color: maroon;
    z-index: 2;
    position: sticky;
/*    padding-top: 0.45rem;
    top: 0;
    z-index: 2;
    background-color: #e6f5ff;
    padding-bottom: 6px;
    border-bottom: 2px solid maroon; 
    */
}


#title { font-size: 100%;}
#titlePersonen {font-size: 1.6rem; font-weight: bold};
.return {font-size: 100%; font-weight: bold; color: navy; }
.headerbreak {margin-top: 5px;}

/*.sectionbreak {margin-top: 6px; font-weight: bold; font-size: 1.25rem; color: navy } */
.sectionbreak {margin-top: 4px;  font-size: 1.25rem; color: navy }

.bodybreak {margin-top: 3px; }
#Click {margin-top: 0.4em;}
button, input, select, textarea {font: inherit;}
#wordDropdown { height: calc(100% - 140px); border-width: 2px;}
#randomSelectButton { margin-top: 0.3em; width:85%; font-size: 1.1rem;}
.sizeOfLabels {font-size: 1.19rem; display: block; margin: 1px auto; }
#find-as-you-type { font-size: 1.4rem;  margin: 2px auto; border-width: 2px;}
.bookTitle {color: darkblue; font-weight:bold; font-size: 1.23rem;}

body {
    font-family: Arial, Verdana, sans-serif;
    background-color: #e6f5ff;
    /* space for the fixed header                  */
    border-left: 3px solid maroon;
    border-right: 3px solid maroon;
    display: flex;
    flex-direction: column;
    height: 100vh;
}
header {
    background-color: #c2e2f6;
    padding: 12px 0 14px 0;
    color: maroon;
    border-bottom: 3px solid maroon;
    border-top: 3px solid maroon;
    width: 100%;
    height: 50px;
    /* Ensure header is above other content */
}
.main-header {
 /*   font-size: 130%;*/
    font-size: 1.43rem;
    display: flex;
    justify-content: space-evenly;
    /* Adjusted for better spacing */
    align-items: center;
}
.main-container {
    display: flex;
    /* Full height minus header */
    height: calc(100vh - 52px);
    /* Prevent scrolling inside main container */
    overflow: hidden;
    flex: 1;
    min-width: 0;
}
#main-container {
    flex-grow: 1;
 /*   margin-top: 0.36rem;*/
    margin: 0.36rem 0rem 0rem 0rem;
/*    margin-bottom: 5.1rem;
    margin: 0.5rem;*/
    overflow: auto;
    text-align: center;
    font-size: 1.13rem;
}
.main-container-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #e6f5ff;
    padding-bottom: 6px;
    border-bottom: 2px solid maroon;
    display: flow-root;
}

.main-container-item {
    margin-top: 5px;
    margin-bottom: 12px;
    margin-left: 6px; 
    margin-right: 6px;
 /*   font-size: 1.3rem; */
    font-size: 1.25rem; 
    text-align: left;
}

/* Zero out the book wrapper's own top margin: any offset here also
   delays position:sticky on .personenTitle from locking to top:0
   until the page has scrolled past it. */
#main-container.personen-by-book > .main-container-item {
    margin-top: 0;
}

.selection-container {
    width: 23.5%;
    min-width: 23.5%;
    max-width: 23.5%; 
    text-align: center;
    padding: 0.5em;
    border-right: 3px solid maroon;
    background-color: #a1d3f08c;
    height: 100%;
    font-size: 1rem;
    /* Allows scrolling within the container if necessary */
}

button {
    background-color: rgba(128, 0, 0, 0.637);
    color: white;
    margin-top: 6px;
    margin-bottom: 12px;
    border: 0.2em solid black;
    padding: 1% 3%;
    padding: 0.25rem 0.75rem;
    height: 2.2rem;
}

.selection-container-book {  /*governs panel on left side of Personen*/
  /*  min-width: 10%;
    max-width: 17.5%;*/
    min-width: 15.5%;
    max-width: 15.5%;
    button { width: 12rem; font-size: 115%;} 
}

input,select {
    font-size: 1rem;
    color: black;
    display: block;
    text-align: left;
    margin-top: 3px;
    border: 0.18em solid navy;
    width: 99%;
}

/* Ideally a Web font is used instead of a System font which varies on each computer.
   Allowing to have precise geometry on each device. */

.personen-by-book>div {
    /* JavaScript code determines on load which Personenverzeichnis
       to display */
    display: none;
    text-align: left;
}

.selected-word {
    font-size: 132%;
    /*135%;*/
    font-weight: bold;
    margin-bottom: 12px;
    margin-top: 8px;
    text-align: center;
}

#showExamplesButton {
    border: 3px solid black;
    font-weight: bold;
    padding: 3px 8px;
    background: rgba(128, 0, 0, 0.637);
    color: white;
    cursor: pointer;
    font-size: 100%;
}

.language {font-size: 96%; font-weight: bold; color: black;  }
.wort {font-size: 96%; font-weight: bold; }


@media (max-width: 1600px) {
    .main-container {
        flex-direction: row;
    }
}

@media (max-width: 1200px) {
    header {
        height: auto;
    }

    .selection-container,
    #main-container {
        flex: 1;
    }
}

@media (max-width: 992px) {
    body {
        height: 100vh;
    }

    .main-container {
        flex-direction: column;
        flex-grow: 1;
        /* take as much vertical space as necessary */
        /* Remove fixed height */
    }

    .selection-container,
    #main-container {
        /* Full width and reduced height on small screens */
        width: 100%;
        max-width: 100%;
        height: 40%;
        overflow: scroll;
    }

    .selection-container {
        border-right: none;
    }

    #main-container {
        overflow: auto;
        flex-grow: 1;
    }

    #main-container.personen-by-book {
        flex-grow: 2;
    }
}


@media (max-width: 768px) {
    header {

        /* default spacing around header elements */
        .return {
            padding: 12px 20px;
        }

        h3 {
            padding: 12px 20px;
        }
    }

    .main-container {
        flex-direction: column;
        min-height: auto;
    }

    .selection-container,
    #main-container {
        width: 100%;
        min-width: 0;
        border: none;
        margin: 0;
    }

    .selection-container {
        padding: 10px;
    }

    /* No top padding here: #main-container is the scrolling ancestor
       that .main-container-header / .personenTitle stick to. Sticky
       elements lock to the container's padding edge, so top padding
       would push them down and leave an uncovered strip that
       scrolled content peeks through. */
    #main-container {
        padding: 0 10px 10px 10px;
    }
}

@media (max-width: 576px) {

    .main-header,
    .return,
    #showExamplesButton,
    #wordDropdown,
    .sizeOfLabels,
    .main-container-item {
        font-size: 120%;
    }

    #main-container {
        font-size: 120%;
    }
}