@media (min-width: 600px) and (min-height: 501px) { body { display: flex; align-items: center; justify-content: center; } /* TopBar rules */ button.top-button { transition-duration: 0.2s; } button.top-button:hover { background-color: #ddd; } button#newgame:before{ content: "Create Game"; } button#settings { display: none; } button#reset:before{ content: "Reset Connection"; } /* Lobby rules */ div.lobby { min-width: 70vw; min-height: 70vh; display: flex; text-align: center; flex-direction: column; align-items: center; } div.server { width: 100%; display: flex; flex-direction: row; margin-bottom: 10px; box-sizing: border-box; } span.status { box-sizing: border-box; font-size: larger; margin-right: 10px; padding: 10px; border-radius: 10px; flex-basis: content; } span.addr { font-size: larger; padding: 10px; border-radius: 10px; background-color: #ddd; flex: 1; } div.content { min-width: 70vw; min-height: 70vh; display: flex; flex-direction: row; box-sizing: border-box; } div.info { display: flex; text-align: center; flex-direction: column; flex: 1; margin-left: 10px; box-sizing: border-box; } div.games { box-sizing: border-box; overflow-y: auto; overflow-x: hidden; padding: 10px; border-radius: 10px; background-color: #ddd; flex: 4; border: 5px solid #ddd; } div.stats, div.settings { border-radius: 10px; background-color: #ddd; box-sizing: border-box; flex: 1; height: auto; width: 100%; text-align: left; } div.settings { margin-top: 10px; } div.game { height: 20%; } /* Table rules */ }