* { margin: 0; font-family: sans-serif; box-sizing: border-box; } body { background-color: #222; color: #eee; } #privacy { font-size: 10px; text-decoration: italic; } #changelog { height: 100% } p.changelog-entry { line-height: 1.6; margin-bottom: 1em; } p.changelog-entry:last-of-type { margin-bottom: 0; } div#game-view { height: 100%; width: 100%; position: absolute; } div#board { // background-image: url("assets/wood.jpg"); width: calc(100% - 340px); height: 100%; border: 1px solid #333; position: relative; border-radius: 12px; background: #1e0d2d; } .shade { background-color: rgba(0, 0, 0, 0.5); padding: 2px; color: #ccc; } .shade a{ color: inherit; text-decoration: none; } .shade a:hover { text-decoration: underline; } span.left-text { float: left; } span.right-text { float: right; } span#message { background-color: rgba(0, 0, 0, 0.7); padding: 5px; color: #eee; font-size: 30px; margin-left: auto; margin-right: auto; display: inline-block; border-radius: 8px; } .card { height: 250px; border-radius: 10px; border: 6px solid white; } #discard-pile, .draw-pile-container, #draw-pile-animation { position: absolute; top: 100px; transition: 0.2s top, 0.2s left, 0.2s right; } #discard-pile { right: calc(50% + 25px); } #discard-pile:hover { right: calc(50% + 20px); } .draw-pile-container { left: calc(50% + 25px); } .draw-pile-container:hover { left: calc(50% + 20px); } .draw-pile-container:hover .card, #discard-pile:hover .card { height: 260px; } .draw-pile-container .card, #discard-pile .card, #draw-pile-animation .card { transition: 0.3s height; display: block; /* To prevent trailing whitespace */ } .draw-pile-container:hover, #discard-pile:hover { top: 105px; } #draw-pile-animation { transition: none; } #card-deck { overflow: auto; white-space: nowrap; background-color: rgba(255, 255, 255, 0); position: absolute; bottom: 140px; width: 100%; display: flex; align-items: flex-end; gap: 10px; padding: 0 20px; overflow-x: auto; flex-wrap: wrap; max-height: 410px; overflow-y: auto; } #card-deck .card { height: 200px; border-radius: 7px; border: 6px solid white; transition-duration: 0.2s; transition-property: height, filter; } #card-deck .card:hover { filter: brightness(1.3); } span#draw-pile-counter { position: absolute; top: 50%; z-index: 1; font-size: 24px; text-align: center; background-color: rgba(0, 0, 0, .7); width: 100%; color: #fff; text-shadow: 1px 1px 1px #222; } div#game-log { overflow: auto; flex: 1; flex-direction: column; overflow: auto; } div#game-log-container { flex: 1; display: flex; flex-direction: column; min-height: min-content; overflow: auto; } div#chat-container { display: flex; flex-direction: row; } input#chat-message { flex: 1 1 auto; } div.card-hud { background-color: rgba(0, 0, 0, .6); opacity: 0; transition: .5s opacity; height: 100%; width: 100%; position: absolute; z-index: 10; display: flex; align-items: center; justify-content: center; } div#card-hud > img.card { margin: auto; height: 450px; display: block; max-height: calc(90vh); } div#card-hud-3-wrapper { height: 100%; } div#card-hud-3 { text-align: center; } div#card-hud-3 > img.card { display: inline-block; height: 300px; margin-right: 20px; } div#card-hud-3 > img.card:last-child { margin-right: 0; } div.modal-hud { z-index: 10; background-color: rgba(0, 0, 0, .5); opacity: 0; transition: .5s opacity; height: 100%; width: 100%; position: absolute; display: flex; align-items: center; justify-content: center; } div.modal { background-color: #fff; color: #333; width: 360px; height: 360px; overflow: auto; margin-left: auto; margin-right: auto; border: 2px solid #777; padding: 20px; border-radius: 10px; position: static; display: inline-block; } ul.modal-options { margin-top: 10px; padding-left: 0; } ul.modal-options li { list-style: none; padding: 10px; background-color: #a8d9ff; margin-left: auto; margin-right: auto; width: 200px; border: 2px solid #0090ff; margin-bottom: 10px; cursor: pointer; } ul.modal-options li:hover { background-color: #45aeff; } .reveal { display: none !important; }