html {
      scroll-padding-top: 3em;
    }
    
    body {
      position:relative;
      font-family: "Linux Libertine O", Cambria, serif;
      font-size: clamp(1rem, 1.75vw, 1.4rem);
      font-weight: 100;
      min-width: 360px;
      letter-spacing:-0.01em;
      
      padding-bottom: 0;
      flex-direction: column; 
      display: flex;
      min-height: 100vh;
    }
    
    body > article {
      flex: 1;
    }
    
    section, footer {
      padding: 1em 0 1em;
    }
    header {
      top: 0;
      position: sticky;
      z-index: 1000;
      font-size: 1.15rem;
      white-space: nowrap;
    }
    footer ul {
      padding-left: 1rem;
    }
    footer h2 {
      font-size: 1em;
      padding: 0;
      margin-left: -0.5em;
    }
    footer a {
      text-decoration: none;
    }
    strong {
      font-weight: 700;
    }
    
    header,h1,h2,h3,strong,#mainmsg {
      font-family: "Linux Biolinum O", sans-serif;
      letter-spacing:-0.02em;
    }
    
    h1 {
      margin: 1.5em auto 0.5em;
    }
    h2,h3 {
      font-weight:700;
      font-size:1em;
      padding: 0.5em 0 0.25em;
    }
    h2 {
      font-size:1.5em;
      padding-top:0.75em;
    }
    h3 {
      color: #00aada;
    }
    
    .bg-light h3 {
      color: #0088bb; /* darker for light background */
    }
    
    section ul#topics {
      margin: 0;
      padding: 0;
    }
    section ul#topics li {
      display: inline-block;
      vertical-align: top;
      list-item: none;
      min-width: 5rem;
      margin: 1em;
    }
    section ul#topics li > img {
      display: block;
      min-width: 4em;
      width: 50%;
      margin: 0.5em auto;
    }
    section ul#topics li:hover > img {
      filter: drop-shadow( 0 0 6px #222);
    }
      
    section button {
      cursor: pointer;
      background: #00aada;
      border: 1px solid #00aada;
      font-size: 1.3rem;
      padding: 0.5em 1em;
      margin: 0 0 2em;
      font-variant: small-caps;
      border-radius: 4px;
    }
    section button:hover {
      background: #00d4ff;
    }
    section button.secondary {
      background: #a0a0b0;
      border: 1px solid #a0a0b0;
    }
    section button.secondary:hover {
      background: #e0e0e8;
    }
    a.nav-link:hover {
      color: #00aada;
    }
    
    section > div.image {
      height: 20em;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      margin-top: 1em;
      margin-bottom: 2em;
    }
    
    .bg-dark {
      background: #222 !important;
      color: #eee; !important;
    }
    .bg-signal {
      background: #00aada;
    }
    .bg-dark a {
      color: #eee;
    }
    
    #navbar-nav.collapsing,
    #navbar-nav.collapse.show {
      display:block;
      margin-top:0.6em;
      border-top: 1px dotted #a0a0b0;
    }
    #navbar-nav.collapsing > li,
    #navbar-nav.collapse.show > li {
      border-bottom: 1px dotted #a0a0b0;
    }
    #navbar-nav.collapsing a.nav-link,
    #navbar-nav.collapse.show a.nav-link {
      padding-left: 1px;
    }
    
    #logo {
      height: 1.5em;
      margin-right: 0.35em;
      margin-top: -0.21em;
    }
    #logo_text {
      display: inline-block;
      font-size: 1.2em;
      font-weight:200;
      letter-spacing:-0.03em;
    }
    
    #footerlogo {
      display:block; 
      width: 14%; 
      min-width:78px; 
      max-width: 156px;
      margin: 2em auto 1em;
    }
    
    #heroleft {
      display: flex;
      flex-direction:column;
      min-height: 50rem;
      padding-top: 6rem;
    }
    #slogan {
      color: #00aada;
    }
    #slogan h2 {
      font-size: 2em;
      font-weight: 100;
    }
    #mainmsg {
      font-size:1.3em;
      padding: 1.3em 3em 1.3em 0;
    }
    #carouselReferences {
      min-height: 16rem;
    }
    
    .icontext {
      margin-top: 1em; 
      margin-bottom: 1.5em;
    }    
    .icontext img {
      width: 6em;
      max-width: 25%;
      float: left;
      margin-right: 1em;
      margin-bottom: 2em;
    }
    .icontext div {
      clear: both;
    }
    .icontext p, 
    .icontext h3 {
      margin-left: 7em;
      max-width: 50em;
    }
    
    .carousel img {
      max-width: 8em;
      float:left;
    }
    .carousel-indicators {
      position: relative;
      margin-bottom: -1.5em;
      opacity: 0.5;
    }
    
    ul#topics li {
      width: 12%;
      font-size: 0.8em;
      text-align: center;
    }
    
    #popup h1 {
      font-size: 1.4em;
      color:#00aada;
    }
    #popup h2 {
      font-size: 1.2em;
      font-variant:small-caps;
    }
    #popup h3,
    #popup h4,
    #popup h5 {
      font-size: .9em;
      font-weight: 700;
    }
    
    @media (max-width: 768px) {
      ul#topics li {
        width: 26%;
        font-size:0.8em;
      }
    }
    
    /* specials */
    
    .pipeline td, .pipeline th {
      width: 14.1%;
      text-align: center;
    }
    .pipeline img {
      width: 80%;
    }
    
    img.website {
      max-width: 100%;
      box-shadow: 4px 4px 20px #999999;
      max-height: 18em;
      margin: 0.25em 0.1em;
    }
    
    figure {
      display: block;
      text-align: center;
      margin: 0.5em auto 1em;
    }
    
    figure a {
      text-decoration: none;
    }
    
    figcaption {
      font-style: italic;
    }
    
    
    #header_photo {
      background:url('../photos/hg_cs_122.png') right bottom no-repeat;
      background-image: image-set(
        url("../photos/hg_cs_122.webp") type("image/webp"),
        url("../photos/hg_cs_122.png") type("image/png")
      );
      background-size: contain; 
      opacity: 1;
    }