* { margin: 0; padding: 0; box-sizing: border-box; font-family: serif, sans-serif; font-style: italic; font-size: 1.25rem; } p { font-size: 1rem; } #container { padding: 1rem; width: 100%; } #container>ul { margin-top: 75px; list-style-type: none; } @media (max-width: 500px) { #container>ul { margin-top: 125px; } } #container>ul>li { padding: 1rem; white-space: nowrap; } #container>ul>li>a>img { display: inline-block; height: 75px; margin-right: 1rem; } #container>ul>li>a>.info { display: inline-block; vertical-align: top; white-space: normal; max-width: calc(100% - 3rem - 75px); } .info>p:first-child { font-weight: 500; font-size: 1.25rem; } a { display: inline-block; text-decoration: none; color: black; } #container>ul>li a { width: 100%; } #container>ul>li:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, 0.5); } .navigation { background-color: white; position: fixed; top: 0; left: 0; right: 0; display: block; height: 64px; border-bottom: 1px solid rgba(0, 0, 0, 0.5); } .search { width: 100px; } .search:focus { outline: none; box-shadow: none; } #search-form { display: inline-block; height: 100%; } #search-form>label>input { height: 100%; width: 100%; padding: 0.5rem; font-size: 1rem; border: none; border-right: 1px solid rgba(0, 0, 0, 0.5); padding-left: 3rem; } #search-form>label { position: relative; } #search-form>label>svg { position: absolute; top: 25%; left: 0.5rem; height: 1rem; } .search>form { padding-top: 1rem; padding-left: 1rem; display: block; } .nav-controls { float: right; vertical-align: center; } .nav-controls>a { padding: 1rem 0.5rem; height: 100%; font-size: 1rem; } .nav-controls:last-child { padding-right: 1rem; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } body { /* -webkit-font-smoothing: antialiased; */ } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }