td { border: 1px solid lightgrey; min-width: 3em; } table { max-width: 100%; } tr:nth-child(2n+1) { background-color: lightgray; } tr { width: 100%; } .bold { font-weight: bold; } #data { width: 100%; } .border { border: 1px solid lightgrey; } textarea { border-radius: 4px; width: 60%; height: 10em; display: block; } pre { white-space: pre-line; } .net-negative { background-color: lightcoral; } .net-positive { background-color: lightgreen } .summary { display: flex; flex-wrap: wrap; flex-direction: row; } .summary-panel { float:left; padding-right: 2em; } body { display: flex; flex-wrap: wrap; } .navigation { flex-grow: 1; max-width: 100px; border-left: 1px solid #333; padding-left: 10px; } .main { flex-grow: 3; max-width: 1000px; margin: auto; } p, li { max-width: 70ch; } a, a:visited { color: black; } @media (max-width: 600px) { .newItem td { display:block; } .table-index { display: none; } button { font-size: 32px; } input { font-size: 32px; display: block; width: 100%; } .navigation { border-left: none; } }