#game { font-size: min(18px, 2vw, 3vh); line-height: 1.25; background: #000; border: #010 .2em solid; color: #fff; width: 40em; min-height: 20em; /*width: 40em;*/ margin: auto; font-family: "DejaVu Sans Mono"; } #ctrlcon { margin: auto; width: fit-content; } #controls { display: grid; grid-template-columns: repeat(4, 1fr); } #num-1, #num-2, #num-3 { grid-row: 3 } #num-4, #num-5, #num-6 { grid-row: 2 } #num-7, #num-8, #num-9 { grid-row: 1 } #num-0 { grid-column: 1 / span 2; grid-row: 4; } #num-plus { grid-column: 4; grid-row: 1 / span 2; } #num-enter { grid-column: 4; grid-row: 3 / span 2; } .cardbut { cursor: pointer; } .cardbut:hover { background: #444; } :root { --hearts: #F22; --shards: #F70; --clubs: #0AA; --spades: #77F; --prisms: #F0F; --stars: #FC0; --points: #DAD; } .invert { color: #000; background: #ddd; } .faint { opacity: 50%; } .italic { font-style: italic; } .bold { font-weight: bold; } .strike { text-decoration: line-through; } .underline { text-decoration: underline; } .lightgray { color: #888; } .darkgray { color: #444;} .blink { animation: blink-animation 1s steps(5, start) infinite; } @keyframes blink-animation { to { visibility: hidden; } } .heartfg { color: var(--hearts); } .shardfg { color: var(--shards); } .clubfg { color: var(--clubs); } .spadefg { color: var(--spades); } .prismfg { color: var(--prisms); } .invert.heartfg { background: var(--hearts); } .invert.shardfg { background: var(--shards); } .invert.clubfg { background: var(--clubs); } .invert.spadefg { background: var(--spades); } .invert.prismfg { background: var(--prisms); } .invert.cardbg { color: #000; } .stars, .starfg { color: var(--stars); } .invert.starfg { background: var(--stars); } .starhi { color: #FCA; } .points { color: var(--points); } .cardbg { background: #222; } .fadebg { background: #111; } .flipfg { color: #AAA; } .flipbg { background: #555; } .marked { background: #413; } .uglyfg { color: #111; } .uglybg { background: #BBB; } .empty { color: #111; } .default { color: #DDD; } .strongplus { color: #A0F; } .strong { color: #D0F; } .weak { color: #A5D; } .miss { color: #555; } .near { color: #CBD; } .match { color: #7CF; } .matchplus { color: #0FD; } .mismatch { color: #8CC; } .bigpair { color: var(--stars); } .pair {color: #DA5; } .straight { background: #301; } .flush { background: #015;} .straightflush {background: #303; } .highcard {background: #111; }