body { margin: 0 0 0 0; } .card { display: inline-block; border-radius: 5px; width: 142px; height: 200px; } #card-container { width: 100%; height: 100%; } #hand { position: absolute; bottom: 0px; width: 100%; height: 20%; background-color: #ccc; } .card-pile { width: 100px; height: 100px; color: #eee; display: flex; justify-content: center; align-items: center; text-align: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .deck { background-color: blue; } .discard { background-color: red; } #shade { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; background: grey; opacity: 0.5; filter: alpha(opacity=50); } #modal-content { padding: 5px; border-radius: 5px; position: fixed; z-index: 101; top: 5%; left: 5%; width: 90%; background-color: white; overflow-y: auto; max-height: 90%; } #modal-content .card { margin: 2px; }