body, html { font-family: sans-serif; height: 100%; margin: 0; padding: 0; } #irreligious-game { display: flex; align-items: stretch; position: relative; height: 100%; margin: 0; padding: 0; } #resource-section { flex-basis: 75%; margin: 0.25em 0.5em; overflow: auto; } #logging-section { flex-basis: 25%; overflow: auto; background-color: #eee; border: 2px solid black; margin: 0.25em 0.5em; padding: 0.25em 0.5em; } #logging-section div p { margin: 0 0 0.25em 0; padding: 0; } .resource-type-container { display: flex; flex-wrap: wrap; } .resource { min-width: 12em; border: 2px solid black; padding: 0.25em 0.5em; margin: 0 0.5em 0.5em 0; } #resource-container-religion .resource { background-color: #ccf; } #resource-container-consumable .resource { background-color: #cfc; } #resource-container-infrastructure .resource { background-color: #fcc; } #resource-container-passive .resource { background-color: #ffc; }