/* ========================================================================== Wolfram Foundation Header CSS ========================================================================== */ html { scroll-behavior: smooth; } html, html._header-thick, html._header-thin { border-top: 0 !important; } header#top_nav { font-family: 'Fira Sans', source sans pro, Arial, Helvetica, sans-serif; background-color: #222; padding: 0.2rem 0 0.1rem 0; } header .page-width { margin: 0 auto; max-width: 1100px; padding: 0 2rem; width: 100%; } header#top_nav section { max-width: 1100px; display: grid; justify-content: space-between; grid-auto-flow: column; align-items: center; } header#top_nav img { width: 301px; } header#top_nav a{ font-size: 0.875rem; color: #bababa; margin: 0.6rem 1rem 0 0; text-transform: uppercase; } header#top_nav a:hover{ color: #ffc16e; } /* ========================================================================== responsive breakpoint styles ========================================================================== */ /* styles for small screens (600px) ========================================================================== */ @media all and (max-width: 900px) { #top_nav img{ max-width: 210px;} } @media all and (max-width: 600px) { header#top_nav section { justify-content: center; } #top_nav img{ margin: 0 auto; display: block; max-width: 100%; } #top_nav nav { display: none; } }