.shadowBox {
      padding: 3px;
      margin-right: 2px; /* controls right edge */
      height: 100%;
      background-color: beige;
      box-shadow: inset 1px 1px 10px gray;
      border-radius: 7pt;
    }
    .URL {
      color: blue;
    }

    .main {
       padding: 1px;
       height: 91vh; /* control bottom edge */
       display: -webkit-flex;
       display: flex;
       -webkit-flex-flow: row;
               flex-flow: row;
     }

     .main > article {
         margin: 0px;
         margin-left: 0px;
         padding: 5px;
         overflow: auto;
         background: rgba(0, 57, 166, 1.0);
         box-shadow: inset 1px 1px 10px grey;
         border: 2px solid beige;
         border-top-left-radius: 5pt;
         border-bottom-left-radius: 5pt;
         border-top-right-radius: 5pt;
         border-bottom-right-radius: 5pt;
         -webkit-flex: 1 1 96%;
         flex: 1 1 96%;
         -webkit-order: 2;
                order: 2;
         flex-grow: 1;
      }

    .main > nav {
        padding-left: 100px;
        margin-left: 24px;
        background: rgba(155, 17, 3, 1.0);
        box-shadow: inset 1px 1px 10px grey;
        border: 2px solid beige;
        border-top-left-radius: 5pt;
        border-bottom-left-radius: 5pt;
        border-top-right-radius: 5pt;
        border-bottom-right-radius: 5pt;
        overflow: auto;
        -webkit-flex: 1 1 2%;
               flex: 1 1 2%;
        -webkit-order: 1;
               order: 1;
        flex-grow: 1;
    }

    .main > aside {
        padding-right: 100px;
        margin-right: 24px;
        background: rgba(155, 17, 3, 1.0);
        box-shadow: inset 1px 1px 10px grey;
        border: 2px solid beige;
        border-top-left-radius: 5pt;
        border-bottom-left-radius: 5pt;
        border-top-right-radius: 5pt;
        border-bottom-right-radius: 5pt;
        overflow: auto;
        -webkit-flex: 1 1 2%;
               flex: 1 1 2%;
        -webkit-order: 3;
               order: 3;
        flex-grow: 1;
     }

     header, footer {
        background: beige;
     }
     header {
        margin-top: 4px;
        margin-right: 0px;
        border-top-left-radius: 7pt;
        border-top-right-radius: 7pt;
     }
     footer {
        color: beige; /* hide the dot */
        margin-bottom: 4px;
        margin-right: 0px;
        height: 1.9vh;
        border-bottom-left-radius:7pt;
        border-bottom-right-radius:7pt;
     }
     .menuBar {
       display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-flex-flow: row;
        flex-flow: row;
        justify-content: center;
        justify-content: center;
        background-color: beige;
        color: gold;
        width: 100%;
        /*max-height: 4.7vw;  /*play around to change height */
        /*margin-top: 2vh;*/
        padding-top: 0.5vh;
        /* font-size: 1.0em; */
        box-shadow: inset 1px 1px 10px grey;

        border-top-left-radius: 7pt;
        border-top-right-radius: 7pt;
        border-bottom-left-radius: 7pt;
        border-bottom-right-radius: 7pt;

    }
    .navMenu {
      -webkit-flex: 1 0 0;
      flex: 1 0 0;
        order: 1;
        text-align: center;
        text-shadow: 1px 1px black;
        padding-top: 0.5vh;
      color: gold;
      list-style: none;
      overflow: hidden;
      height: 100%;
    }

    .navMenu:not(:hover) > .dropDown {
        display: none;
    }
    .bookMenu:not(:hover) > .dropDown {
        display: none;
    }
    .scoopMenu:not(:hover) > .dropDown {
        display: none;
    }
    .referMenu:not(:hover) > .dropDown {
        display: none;
    }
    .dropDown {
        display: -webkit-flex;
        display: flex; /* change to block for dropdown */
        -webkit-flex-flow: column;
            flex-flow: column;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        position: absolute;
        text-align: left;
        overflow: hidden;
        margin-left: 4.0vw;
    }
    .dropDown a {
      color: #EC5800;
      font-size: 10pt;
      text-transform: uppercase;
      text-decoration: none;
      text-align: left;
      border-bottom: none;
      padding: 7px 5px 7px 10px;
      display: block;
      background-color: rgba(245, 245, 225, 0.8); /* #F4C430; */
    }

    /*
    .dropDown a: for touch , testing a:target
    */

    .dropDown a:hover, .dropDown a:active, .dropDown a:focus {
        background-color: rgba(245, 245, 225, 0.9);
        color: blue; /* #F4C430; */
        text-shadow: 0.5px 0.5px grey;
    }
    .bookMenu {
      -webkit-flex: 1 0 0;
      flex: 1 0 0;
        order: 2;
        text-align: center;
        color: gold;
        text-shadow: 1px 1px black;
        padding-top: 0.5vh;
    }
    .titles {
      -webkit-flex: 2 0 0;
      flex: 2 0 0;
        order: 3;
        -webkit-justify-content: center;
        justify-content: center;
      -webkit-align-items: center;
      align-items: center;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      padding-bottom: 0.5vh;
      color: gold; /* #EC5800&#69658  Persimmon */
      text-shadow: 1px 1px black;
      /*margin-top: 3px;*/
    }
    .marque { /* Header in the main text area */
      font-size: 150%;
      text-align: center;
      text-shadow: 1.4px 1.4px black;
      color: blue; /* #EC5800; Persimmon */
    }
    .scoopMenu {
      -webkit-flex: 1 0 0;
      flex: 1 0 0;
        order: 4;
        text-align: center;
        text-shadow: 1px 1px black;
        padding-top: 0.5vh;
      color: gold;
    }
    .referMenu {
      -webkit-flex: 1 0 0;
      flex: 1 0 0;
        order: 5;
        text-align: center;
        text-shadow: 1px 1px black;
        padding-top: 0.5vh;
      color: gold;
    }

    .mainglyph {

        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(50%,-50%);
        font-family: "Noto Serif", serif;

        margin: auto;
        width: 50%;
        padding: 5px;

        text-align: center;
        font-size: 22rem;
        font-weight: 400;
        color: ivory;

        text-shadow: 1px 1px 1px #919191,
            1px 2px 1px #919191,
            1px 3px 1px #919191,
            1px 4px 1px #919191,
            1px 5px 1px #919191,
        1px 18px 6px rgba(16,16,16,0.4),
        1px 22px 10px rgba(16,16,16,0.2);

    }

    .glypwindow {
        position: absolute;
        top: 17vh;
        right: 40%;
        transform: translate(50%,-50%);
        font-family: "Noto Serif", serif;

        margin: auto;
        width: 10%;
        padding: 5px;

        text-align: center;
        font-size: 5rem;
        font-weight: 400;
        color: ivory;
        text-shadow: 1px 1px 1px #919191,
            1px 2px 1px #919191,
            1px 3px 1px #919191,
            1px 4px 1px #919191,
            1px 5px 1px #919191,
        1px 18px 6px rgba(16,16,16,0.4),
        1px 22px 10px rgba(16,16,16,0.2);
    }

    .lowerwindow {
        position: absolute;
        top: 17%;
        right: 50%;
        transform: translate(50%,-50%);
        font-family: "Noto Serif", serif;

        margin: auto;
        width: 10%;
        padding: 5px;

        text-align: center;
        font-size: 5rem;
        font-weight: 400;
        color: ivory;
        text-shadow: 1px 1px 1px #919191,
            1px 2px 1px #919191,
            1px 3px 1px #919191,
            1px 4px 1px #919191,
            1px 5px 1px #919191,
        1px 18px 6px rgba(16,16,16,0.4),
        1px 22px 10px rgba(16,16,16,0.2);
    }

    .scndswindow {
        position: absolute;
        top: 17%;
        right: 60%;
        transform: translate(50%,-50%);
        font-family: "Noto Serif", serif;

        margin: auto;
        width: 10%;
        padding: 5px;

        text-align: center;
        font-size: 5rem;
        font-weight: 400;
        color: ivory;
        text-shadow: 1px 1px 1px #919191,
            1px 2px 1px #919191,
            1px 3px 1px #919191,
            1px 4px 1px #919191,
            1px 5px 1px #919191,
        1px 18px 6px rgba(16,16,16,0.4),
        1px 22px 10px rgba(16,16,16,0.2);
    }

    .glypmainbtn, .glypprevbtn, .glypnextbtn, .glypwindowbtn, .lowrwindowbtn, .scndwindowbtn {
        background-color: #2B60DE;
        border: none;
        padding-left: 50px;
        text-align: center;
        text-decoration: none;
        color: ivory;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }

    .glypmainbtn {
        flex-grow: 1;
        order: 1;
    }

    .glypprevbtn {
        flex-grow: 1;
        order: 2;
    }

    .glypnextbtn {
        flex-grow: 1;
        order: 3;
    }

    .lowrwindowbtn {
        order: 4;
        flex-grow: 1;
        flex-shrink: 1;
        margin-left: 12px;
    }

    .glypwindowbtn {
        order: 5;
        flex-grow: 1;
        flex-shrink: 1;
    }

    .navmenumanager, .asidemenumanager {
        display: inline-flex;
        flex-direction: column;
        flex-flow: column nowrap;
        align-content: center;
        align-items: center;
    }

    .windowmanager {
        display: inline-flex;
        flex-direction: row;
        flex-flow: row nowrap;
        justify-content: center;
        align-content: center;
        align-items: baseline;
    }

    .glyphmanager {
        display: inline-flex;
        flex-direction: row;
        flex-flow: row nowrap;
        justify-content: center;
        align-content: center;
        align-items: baseline;
    }

    .managesecondwindow {
        flex-grow: 1;
        flex-shrink: 1;
        order: 1;
    }

    .managelowerwindow {
        flex-grow: 1;
        flex-shrink: 1;
        order: 2;
    }

    .manageupperwindow {
        flex-grow: 1;
        flex-shrink: 1;
        order: 3;
    }

    .manageglyph { /* glyphmanager */
        flex-grow: 1;
        flex-shrink: 1;
        order: 1;
    }

    .button {
        background-color: #2B60DE;
        border: none;
        padding: 20px;
        text-align: center;
        text-decoration: none;
        color: ivory;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        margin-left: 34px;
        cursor: pointer;
    }

    .button1 {border-radius: 8px; margin-top: 25px;}
    .button2 {border-radius: 8px;}
    .button3 {border-radius: 8px;}
    .button4 {border-radius: 8px;}
    .button5 {border-radius: 8px; margin-top: 25px;}
    .button6 {border-radius: 8px; vertical-align: baseline;}

    .slidecontainer {
        width: 100%;
    }

    .slider {
        /*-webkit-appearance: none;*/  /* Override default CSS styles */
        /*appearance: none;*/
        width: 100%; /* Full-width */
        height: 10px; /* Specified height */
        background: lightblue ;
        outline: none; /* Remove outline */
        margin-top: 50px;
        margin-left: 14px;
        opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
        -webkit-transition: .2s; /* 0.2 seconds transition on hover */
        transition: opacity .2s;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }

    .sliderglyph {
        cursor: pointer;
        opacity: 0.3;
        transition: 1s;
        opacity: 1;
    }

    .slider:hover {
        opacity: 1; /*show on hover */
    }

    .slider::-webkit-slider-thumb {
        /*-webkit-appearance: none;*/ /* Override default look */
        /*appearance: none;*/
        width: 30px; /* Set a specific slider handle width */
        height: 30px; /* Slider handle height */
        background: rgba(0, 57, 166, 1.0);
        cursor: pointer; /* Cursor on hover */
    }

    .slider::-moz-range-thumb {
        width: 30px; /* Set a specific slider handle width */
        height: 30px; /* Slider handle height */
        background: rgba(0, 57, 166, 1.0);
        cursor: pointer; /* Cursor on hover */
    }

    /* @media begins here */

    @media only screen and (min-width: 100px) {

        body {
            background-color: royalblue;
        }

        .main {
            height: 90vh; /* control bottom edge */
        }

        .main > aside {
            padding-right: 10px;
            margin-right: 12px;
        }

        .main > nav {
            padding-left: 10px;
            margin-left: 12px;
        }

        .mainglyph {
            top: 55vh;
            font-size: 12rem;
        }

        .glypwindow, .lowerwindow, .scndswindow {
            top: 25vh;
            font-size: 2rem;
        }

        .button {
            padding: 16px;
            font-size: 9px;
            margin: 4px 2px;
            margin-left: 3px;
        }

        .button1 {border-radius: 8px; margin-top: 2vh;}
        .button5 {border-radius: 8px; margin-top: 3vh;}

        .slider {
            margin-left: 2px;
        }

    }
    @media only screen and (min-width: 300px) {

        body {
            background-color: royalblue;
        }

        .main {
            height: 90.5vh; /* control bottom edge */
        }

        .main > aside {
            padding-right: 60px;
            margin-right: 12px;
        }

        .main > nav {
            padding-left: 60px;
            margin-left: 12px;
        }

        .mainglyph {
            top: 55vh;
            font-size: 14rem;
        }

        .glypwindow, .lowerwindow, .scndswindow {
            top: 25vh;
            font-size: 2.5rem;
        }

        .button {
            padding: 18px;
            font-size: 9px;
            margin: 4px 2px;
            margin-left: 11px;
        }

        .button1 {border-radius: 8px; margin-top: 2vh;}
        .button5 {border-radius: 8px; margin-top: 3vh;}

        .slider {
            margin-left: 2px;
        }

    }
    @media only screen and (min-width: 500px) {

        body {
            background-color: royalblue;
        }

        .main {
            height: 96vh; /* control bottom edge */
        }

        .main > aside {
            padding-right: 100px;
            margin-right: 24px;
        }

        .main > nav {
            padding-left: 100px;
            margin-left: 24px;
        }

        .mainglyph {
            top: 50vh;
            font-size: 17rem;
        }

        .glypwindow, .lowerwindow, .scndswindow {
            top: 17vh;
            font-size: 4rem;
        }

        .button {
            padding: 20px;
            font-size: 16px;
            margin: 4px 2px;
            margin-left: 28px;
        }

        .button1 {border-radius: 8px; margin-top: 2vh;}
        .button5 {border-radius: 8px; margin-top: 3vh;}

        .slider {
            margin-left: 10px;
        }

    }
    @media only screen and (min-width: 800px) {

        body {
            background-color: royalblue;
        }

        .main {
            height: 91vh; /* control bottom edge */
        }

        .main > aside {
            padding-right: 100px;
            margin-right: 24px;
        }

        .main > nav {
            padding-left: 100px;
            margin-left: 24px;
        }

        .mainglyph {
            top: 50vh;
            font-size: 21rem;
        }

        .glypwindow, .lowerwindow, .scndswindow {
            top: 17vh;
            font-size: 4.5rem;
        }

        .button {
            padding: 20px;
            font-size: 16px;
            margin: 4px 2px;
            margin-left: 27px;
        }

        .button1 {border-radius: 8px; margin-top: 2vh;}
        .button5 {border-radius: 8px; margin-top: 3vh;}

        .slider {
            margin-left: 10px;
        }

    }
    @media only screen and (min-width: 1200px) {

        body {
            background-color: royalblue;
        }

        .main {
            height: 91vh; /* control bottom edge */
        }

        .main > aside {
            padding-right: 100px;
            margin-right: 24px;
        }

        .main > nav {
            padding-left: 100px;
            margin-left: 24px;
        }

        .mainglyph {
            top: 50vh;
            font-size: 22rem;
        }

        .glypwindow, .lowerwindow, .scndswindow {
            top: 17vh;
            font-size: 5rem;
        }

        .button {
            padding: 20px;
            font-size: 16px;
            margin: 4px 2px;
            margin-left: 35px;
        }

        .button1 {border-radius: 8px; margin-top: 2vh;}
        .button5 {border-radius: 8px; margin-top: 3vh;}

        .slider {
            margin-left: 8px;
        }

    }
    @media only screen and (min-width: 1600px) {

        body {
            background-color: royalblue;
        }

        .main {
            height: 91vh; /* control bottom edge */
        }

        .main > aside {

            padding-right: 100px;
            margin-right: 24px;

        }

        .main > nav {
            padding-left: 100px;
            margin-left: 24px;
        }

        .mainglyph {
            top: 50vh;
            font-size: 21.5rem;
        }

        .glypwindow, .lowerwindow, .scndswindow {
            top: 17vh;
            font-size: 5rem;
        }

        .button {
            padding: 20px;
            font-size: 16px;
            margin: 4px 2px;
            margin-left: 34px;
        }

        .button1 {border-radius: 8px; margin-top: 2vh;}
        .button5 {border-radius: 8px; margin-top: 3vh;}

        .slider {
            margin-left: 10px;
        }

    }
    @media (device-width: 100vw) and (device-height: 100vh) {

        body {
            background-color: royalblue;
        }

        .main {
            height: 98vh; /* control bottom edge */
        }

        .main > aside {
            padding-right: 100px;
            margin-right: 24px;
        }

        .main > nav {
            padding-left: 100px;
            margin-left: 24px;
        }

        .mainglyph {
            top: 50vh;
            font-size: 21.5rem;
        }

        .glypwindow, .lowerwindow, .scndswindow {
            top: 17vh;
            font-size: 5rem;
        }

        .button {
            padding: 20px;
            font-size: 16px;
            margin: 4px 2px;
            margin-left: 34px;
        }

        .button1 {border-radius: 8px; margin-top: 2vh;}
        .button5 {border-radius: 8px; margin-top: 3vh;}

        .slider {
            margin-left: 12px;
        }

    }