body { font-family: sans-serif; text-align: center; display: grid; align-items: center; justify-content: center; overflow-x: auto; } #container { position: relative; max-width: 1200px; } td.tab { border: none; } .banner-container { padding: 1em; } .banner { padding: 2em; margin: 1em; display: grid; } .table-container { overflow-x: auto; } .tile-container { display: flex; flex-wrap: wrap; padding: 1em; } .tile { padding: 2em; margin: 1em; flex: 1 1 8em; } h2.tile-heading, h2.banner-heading { margin-top: 0; margin-bottom: 2em; } table.data { border: 2px solid; margin: 1em; } td { padding: 1em; } input.db-edit { max-width: 10em; } .error, .red { background-color: #e89d9d; } .overdue, .pink { background-color: #e99fd3; } .lent, .takeaway, .borrow, .blue { background-color: #9fd3e9; } .available, .giveback, .return, .green { background-color: #d3e99f; } .yellow { background-color: #e8e89d; } .proportion { display: inline; } .big { font-size: 3em; } .far { padding: 0.2em; }