html, body {
    height:               100%;
    min-height:           100%;
    margin:               0;
}

/* Outer box to layout header, main content, and footer. */
.box {
    display:              flex;
    flex-flow:            column;
    height:               100%;
    background-color:     #90210f;
}

.box header {
    display:              flex;
    flex:                 0 1 auto;
    padding:              .2em 0 .2em 0;
    font-size:            1em;
    text-align:           center;
    color:                #ffffff;
    background-color:     #437c38;
}

.box main {
    display:              flex;
    flex-flow:            column;
    flex:                 1 1 auto;
    background-color:     #7e8996;
    background-image:     url("photos/galleries/public/Places/DSCN0022.JPG");
    background-position:  center;
    background-repeat:    no-repeat;
    background-size:      cover;
}

.box footer {
    flex:                 0 1 auto;
    padding:              .2em 0 .2em 0;
    text-align:           center;
    font-size:            1em;
    color:                #ffffff;
    background-color:     #50647d;
}
.box footer a {
    margin:               0 4ch 0 4ch;
    font-family:          Arial, Helvetica, sans-serif;
    font-size:            .8em;
    text-decoration:      none;
    background-color:     #96877e;
}
.box footer a:hover {
    color:                pink;
}
.box footer img {
    height:               1.5em;
    width:                1.5em;
    vertical-align:       middle;
}

/* Flex rules for arranging root menus. */
ul.nav_menu {
    display:              flex;
    flex-flow:            row wrap;
    justify-content:      safe center;
    align-content:        safe center;
    gap:                  4em;
    margin:               0;
    padding:              2em;
    height:               100%;
    list-style:           none;
}

/* Style each root-level menu. */
ul.nav_menu > li {
    position:             relative;
    padding:              .45em;
    width:                23vw;
    min-width:            300px;
    border-radius:        1em;
    background-color:     #a255af40;
    transition:           opacity 0.3s linear;
    font-weight:          bold;
    font-size:            2em;
    text-align:           center;
}
ul.nav_menu > li:hover {
    background:           radial-gradient(#fceabb, #f8b500, #d47e0c, #c84c09, #c53307);
    filter:               drop-shadow(.5rem .5rem 1rem);
    transition:           background-color 500ms linear;
}
ul.nav_menu h1 {
    margin-top:           0;
    font-family:          Georgia, 'Times New Roman', Times, serif;
    font-size:            .7em;
}
ul.nav_menu > li > img {
    min-height:           175px;
    max-height:           15vh;
    max-width:            100%;
}

/* Stlye submenus. */
nav.link_menu {
    display:              flex;
    transform:            translate(-50%, -50%);
    flex-direction:       column;
    justify-content:      center;
    row-gap:              .2em;
    position:             absolute;
    visibility:           hidden;
    opacity:              0;
    transition:           visibility 0.3s linear, opacity 0.3s linear;
    width:                60%;
    top:                  50%;
    left:                 50%;
    bottom:               0;
    right:                0;
    font-size:            .5em;
}
nav.link_menu > h2 {
    margin:               0 0 .2em 0;
    font-family:          Verdana, Geneva, Tahoma, sans-serif;
    font-size:            1em;
    font-style:           italic;
    color:                #005bbb;
    background-color:     #ffd500;
}
nav.link_menu > a {
    border:               2px black solid;
    font-family:          'Times New Roman', Times, serif;
    font-size:            1em;
    background-color:     #b596f1;
}
nav.link_menu > a:hover {
    background-color:     #e8f300;
}

/* Trigger visibility of submenu when you hover over the root menu. */
ul.nav_menu > li:hover > nav.link_menu {
    visibility:           visible;
    opacity:              1;
}

/* Ukrainian Flag */
#cont_flag_ukraine {
    text-align:           center;
}
#cont_flag_ukraine > h1 {
    font-family:          Georgia, 'Times New Roman', Times, serif;
    font-size:            .9em;
    margin:               .5ex;
}
#cont_flag_ukraine > .top, #cont_flag_ukraine > .bottom {
    margin:               auto;
    width:                7.5em;
    aspect-ratio:         3/1;
}
#cont_flag_ukraine > .top {
    background-color:     #005bbb;
}
#cont_flag_ukraine > .bottom {
    background-color:     #ffd500;
}

/* Quotes */
#quote_box {
    flex:                 1 1 auto;
    padding:              0 1em 0 1em;
}
header > button {
    flex:                 0 0 auto;
}
.heading_quote {
    font-family:          Georgia, 'Times New Roman', Times, serif;
    font-size:            1em;
}
q.heading_quote {
    font-style:           italic;
}
q.heading_quote_Hebrew {
    font-size:            2em;
}
span.heading_quote.author {
    margin-left:          2ch;
}
span.heading_quote.publication {
    font-style:           italic;
}
span.heading_quote.time {
    margin-left:          2ch;
    white-space:          nowrap;
    font-family:          'Courier New', Courier, monospace;
    font-size:            .9em;
}

/* Adjust for tall, narrow screens. */
@media (max-aspect-ratio: 1200 / 1920) and (max-device-width: 1080px) {
    header > button {
        width:            5em;
    }
    ul.nav_menu > li {
        min-width:        500px;
    }
    ul.nav_menu h1 {
        font-size:        1.2em;
    }
    .box header, .box footer {
        font-size:        2em;
    }
    nav.link_menu > h2 {
        font-size:        1.7em;
    }
    nav.link_menu > a {
        font-size:        1.7em;
    }
    #cont_flag_ukraine > h1 {
        font-size:        1.4em;
    }
    #cont_flag_ukraine > .top, #cont_flag_ukraine > .bottom {
        width:            12.5em;
    }

}