:root{--primary-color: #A8DADC;--secondary-color: #333;--background-color: #181818;--error-color: #D06060;--text-color: #F0D8B0;--font-size-base: 24px;--margin-base: 1rem;--padding-base: .5rem;--border-radius-base: .25rem}*{margin:0;padding:0;-webkit-user-select:none;user-select:none}html,body{background-color:var(--background-color);color:var(--primary-color);font-size:var(--font-size-base);display:inline-block;text-align:center}input{-webkit-user-select:auto;user-select:auto}.game{width:95vw;height:98vh;display:inline-block;text-align:center}.players,.dealer{display:flex;flex-direction:row;align-items:center;width:100%}.dealer{height:35%;justify-content:space-around}.players{height:55%;justify-content:space-between}.game-over{width:50vw;height:50vh;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;justify-content:space-around;align-items:center;background-color:var(--background-color);color:var(--error-color);border:var(--padding-base) solid var(--error-color);border-radius:var(--border-radius-base)}.game-over button{width:40%;max-height:20%;border-color:var(--error-color);color:var(--error-color)}.game-over button:hover{background-color:var(--error-color)}.hand{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;height:100%;width:45%}.hand h1{margin:calc(.5 * var(--margin-base));padding:calc(.25 * var(--padding-base));border-radius:var(--border-radius-base);font-size:var(--font-size-base)}.cards{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.5 * var(--margin-base));width:100%;overflow:hidden}.dealer .hand .cards{height:78.5%}.players .hand .cards{height:50%}.card{margin:calc(.5 * var(--margin-base)) 0;max-height:90%;flex:1 1 calc(20% - calc(.5 * var(--margin-base)));max-width:calc(20% - calc(.5 * var(--margin-base)));transition:margin-bottom .1s ease,margin-top .1s ease}.card:hover{margin-top:0;margin-bottom:calc(1 * var(--margin-base))}.chips{border:var(--padding-base) solid var(--secondary-color);border-radius:var(--border-radius-base);display:flex;align-items:center;height:5%;width:min-content}.chips img,.chips p{background-color:var(--secondary-color);height:100%;display:flex;align-items:center}.chips p{border-radius:var(--border-radius-base);padding:var(--padding-base);color:var(--primary-color);font-size:var(--font-size-base);font-weight:bolder}.controls{display:flex;flex-direction:row;justify-content:space-around;align-items:center;gap:var(--margin-base);height:10%;width:100%}.integer-input{display:inline-block}button{border:2px solid var(--primary-color);border-radius:var(--border-radius-base);padding:var(--padding-base);background-color:var(--secondary-color);color:var(--primary-color);height:100%;flex:1 1;font-size:var(--font-size-base);font-weight:bolder;transition:background-color .3s ease,color .3s ease,opacity .3s ease}button:hover{background-color:var(--primary-color);color:var(--background-color)}button:disabled,input:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}input{margin-top:calc(.2 * var(--margin-base));border:2px solid var(--primary-color);border-radius:var(--border-radius-base);padding:var(--padding-base);flex:1 1;background-color:var(--background-color);color:var(--primary-color);font-size:calc(1 * var(--font-size-base));font-weight:bolder;transition:border-color .3s ease,color .3s ease,background-color .3s ease}input:focus{border-color:var(--secondary-color);color:var(--primary-color);outline:none;background-color:var(--background-color)}.error{color:var(--error-color);font-size:calc(.7 * var(--font-size-base));text-align:right;min-height:var(--font-size-base);visibility:visible}.description{width:calc(100% - (4 * var(--margin-base)));text-align:left;font-size:calc(1.2 * var(--font-size-base));margin:calc(2 * var(--margin-base));display:flex;flex-direction:column;justify-content:space-around;align-items:center;gap:var(--margin-base);color:var(--text-color)}.description h1{margin-top:calc(2 * var(--margin-base));background-color:var(--secondary-color);border:var(--margin-base) solid var(--secondary-color);border-radius:var(--border-radius-base)}.description h3{text-decoration:underline}.description ul,.description p{max-width:70%;text-align:center;list-style-type:none}.description a,.description a:active{color:var(--text-color)}.description a:hover{color:var(--primary-color)}
