*|* { margin:0; padding:0; } body { display: flex; flex-direction: column; justify-content:center; align-items:center; } #disc { display:block; width:80%; min-height:60%; text-align:center; } #menu { display:flex; justify-content: space-around; align-items: center; width:100%; } #display { display: flex; justify-content: space-around; align-items: stretch; height: 80vh; width: 100%; } #deck, #deckDisp { display: flex; justify-content: center; align-items: center; } #deck { width: 50%; max-width: 50%; } #hand { display: flex; width: 50%; max-width: 50%; overflow: auto; justify-content: left; align-items: center; } .library { background: rgba(200,200,200,1); text-align:left; margin:5px 5px -15px 5px; padding:5px 5px 20px 5px; min-height:10%; border:solid 1px rgba(140,140,140,1); border-radius:10px 10px 0px 0px; } .button { display: inline-block; background: rgba(150,150,150,0.7); user-select: none; margin:1px; padding:2px; border:solid 1px rgba(90,90,90,0.5); border-radius:5px; cursor:pointer; } .button:hover { background: rgba(140,140,140,1); margin:0px; padding:3px; transition:0.2s; } .dialog_back { position:absolute; display:flex; justify-content:center; align-items:center; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); } .dialog_window { display:flex; flex-direction:column; background: rgba(255,255,255,1); border-radius:5px; } .dialog_title { display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.3); padding: 0px 0px 0px 5px; } .dialog_content { padding: 5px; } .card { height: 3in; width: 2in; display: inline-block; border: 1px rgba(0,0,0,1) solid; border-radius: 5px; min-height: 3in; min-width: 2in; max-height:3in; max-width:5in; overflow: auto; background: rgb(216, 206, 184); }