body { --bs-gutter-x: 0; background: black !important; } #screenRow { gap: 0 !important; margin: 0; text-transform: uppercase; letter-spacing: .1em; } #screenRow { --bs-gutter-x: 0; } .card { background: black; border: none; border-radius: 0; margin-bottom: 0.5em !important; } .card-header, .card-header th{ background: transparent; font-weight: 400 !important; font-size: 1.3em; border: none; } #screenRow .table { --bs-border-width: 0; } #holdTable { margin: 0 0 0 auto !important; } #holdTable, #nextTable { border-bottom: 2px solid white; } #statsTable { margin-right: 1.5em; } #statsTable tr { display: flex; flex-flow: column; align-items: center; } #statsTable td, #statsTable th { margin: 0; padding: 0 !important; width: auto; height: auto; text-transform: uppercase; } #statsTable th { display: inline; flex-flow: row; font-size: 0.8em; text-align: center; width: 200%; } #statsTable td { font-size: 1.3em; font-weight: 600; color: white; } #matrixCard { background: transparent; border-top: none; border-left: 4px solid white; border-right: 4px solid white; border-bottom: 4px solid white; } .mino { background: var(--color); padding: 0; opacity: 100%; border: 1px outset var(--color); } .I.mino { --color: #00eaf5; } .J.mino { --color: #00a9f7; } .L.mino { --color: #f9b600; } .O.mino { --color: #f7f200;; } .T.mino { --color: #d136e2;; } .S.mino { --color: #35da3f; } .Z.mino { --color: #ee3b3a; } .ghost.mino { --color: #fff4; } .moving.mino { filter: saturate(80%) brightness(150%); } .locking.mino { filter: saturate(50%) brightness(200%); } .disabled.mino { filter: brightness(50%) contrast(80%); opacity: 70%; } @keyframes locked-animation { from { filter: saturate(50%) brightness(400%); } } .locked.mino { animation: locked-animation; animation-duration: 0.2s; }