@media all {
        
            header   { color: white; width: 99%; background-color: #EFEFEF; padding: 10px; margin: 0 auto; margin-bottom: 25px; border-radius: 0px 0px 0px 0px; }
            header a { color: white; text-decoration: none; }
            
            footer   { 
                background-color: #777777; 
                margin-top: 50px; 
                padding:35px; 
                font-size: 1rem; 
                color: white; 
            }
            footer a { color: white; text-decoration: none; opacity: 1.0; }
            footer a:hover { color: white; text-decoration: underline; }        
            
            .footer { background-color: #eee; padding: 25px; margin-top: 100px }
            
            body, p { font-family: Roboto, "IBM Plex Sans", Arial, Verdana, Sans-Serif; }
            
            h1 { color: #CD3A43; margin: 60px 0 60px 0; }
            h2 { color: #363781; margin: 50px 0 40px 0; } 
            h3 { margin: 40px 0 30px 0; } 
            
            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: 90%; padding-left: .2rem; padding-right: .2rem; text-decoration: none; color: white; border-radius: 5px; white-space: nowrap; }
            .tag a         { color: white; text-decoration: none; }
            .tag:hover     { color: white; }
            .tag-b { background-color: #363781; }
            .tag-r { background-color: #CD3A43; }
            .tag-g { background-color: gray; }
            .tag-l { background-color: lightgray; }
            
            pill { color: #800080; }
            
            .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; }


            .flag   { border: 1px solid lightgray; margin-right: 1px; }
            .flag-w { border: 1px solid lightgray; margin-right: 1px; width: 1.2rem; }
            .flag-h { border: 1px solid lightgray; margin-right: 1px; height: 0.8rem; }
        
            .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; text-decoration: none; }
            .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; text-decoration: none; }
            .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; text-decoration: none; }

            @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; }

        }

        @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; }

        }