@media all {
            
            body, p { font-family: Roboto, "IBM Plex Sans", Arial, Verdana, Sans-Serif; }
            
            h1.page { color: #CD3A43; margin: 60px 0 60px 0; font-weight: bold; }
            h2.page { color: #363781; margin: 50px 0 40px 0; opacity: 0.9; font-weight: 700; } 
            h3.page { color: gray;    margin: 40px 0 30px 0; opacity: 0.6; font-weight: 700; } 
            
            a         { color: #363781; }
            a:hover   { color: #CD3A43; }
            a:active  { opacity: 0.8; }
            a:visited { opacity: 0.8; }
            
            .dropdown-menu { max-height: calc(100vh - 250px); overflow-y: auto; overflow-x: hidden; }
            
            .tag           { display: inline; font-size: 80%; padding: 0 .3rem; text-decoration: none; border-radius: 5px; white-space: nowrap; }
            .tag a         { text-decoration: none; }
            .tag:hover     {  }
            .tag-b         { background-color: #363781;   border: 1px solid #363781;   color: white; }
            .tag-r         { background-color: #CD3A43;   border: 1px solid #CD3A43;   color: white; }
            .tag-g         { background-color: gray;      border: 1px solid gray;      color: white; }
            .tag-l         { background-color: lightgray; border: 1px solid lightgray; color: white; }
            .tag-outline   { background-color: transparent; color: black; }

            .frame           { display: inline; padding: .1rem .3rem .2rem .3rem; text-decoration: none; border-radius: 8px; white-space: nowrap; }
            .frame a         { text-decoration: none; }
            .frame:hover     {  }
            .frame-b         { background-color: #363781;     border: 1px solid #363781;   color: white; }
            .frame-b-outline { background-color: transparent; border: 1px solid #363781;   }
            .frame-r         { background-color: #CD3A43;     border: 1px solid #CD3A43;   color: white; }
            .frame-r-outline { background-color: transparent; border: 1px solid #CD3A43;   }
            .frame-g         { background-color: gray;        border: 1px solid gray;      color: white; }
            .frame-g-outline { background-color: transparent; border: 1px solid gray;      }
            .frame-l         { background-color: lightgray;   border: 1px solid lightgray; color: white; }
            .frame-l-outline { background-color: transparent; border: 1px solid lightgray; }

            .lang      { font-family: 'Roboto Mono', monospace; text-transform: uppercase; background-color: #363781; padding: 2px 3px; color: white; border-radius: 1px; font-size: 90%; margin-right: 1px; }
            .lang-gray { font-family: 'Roboto Mono', monospace; text-transform: uppercase; background-color: gray;    padding: 2px 3px; color: white; border-radius: 1px; font-size: 90%; margin-right: 1px; }
            .lang-red  { font-family: 'Roboto Mono', monospace; text-transform: uppercase; background-color: #CD3A43; padding: 2px 3px; color: white; border-radius: 1px; font-size: 90%; margin-right: 1px; }
            .lang-code { text-transform: uppercase; background-color: darkblue; padding: 0 4px; color: white; border-radius: 4px; }
            
            .breadcrumb-item a { color: gray; }
            .breadcrumb { }
            .inline { width: auto; height: 1em; margin: 0 auto; }
            
            .form-label { opacity: .75; }
            
            @keyframes flash {
              0% { background-color: white; }
              50% { background-color: #CFE2FF; }
              100% { background-color: white; }
            }
            tr.flash td { animation: flash 1s 2; background-color: #CFE2FF; }

            th { opacity: .25; font-size: .75rem; }
            

        }

        @media (orientation: landscape)  {

            .carousel-item { padding-top: 500px; }
            .carousel-h { white-space: nowrap; position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 2.5vw; background-color: rgba(205,58,67,.8); border-radius: 5px; padding: 0 5px; }
            .carousel-p { white-space: nowrap; position: absolute; top: 85%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 1.0vw; background-color: rgba(55,55,130,.8); border-radius: 5px; padding: 0 5px; }

            .footer { font-size: 75%; background-color: #ddd; opacity: 1; margin: 0; padding: 5px 0; border-top: 2px solid #CD3A43; }

        }    

        @media (orientation: portrait) {

            .carousel-item { padding-top: 200px; }
            .carousel-h { white-space: nowrap; position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 5.0vw; background-color: rgba(205,58,67,.8); border-radius: 5px; padding: 0 5px; }
            .carousel-p { white-space: nowrap; position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 3.0vw; background-color: rgba(55,55,130,.8); border-radius: 5px; padding: 0 5px; }

            .footer { font-size: 40%; background-color: #ddd; opacity: 1; margin: 0; padding: 5px 0; border-top: 2px solid #CD3A43; }

        }