*{box-sizing:border-box}body{margin:0}#main{position:relative;text-align:center;background:linear-gradient(rgba(172,32,0,0.6),rgba(172,32,0,0.6)),url("../img/hud_bg.jpg") center center repeat}#dealer,#player{position:relative;overflow-y:hidden}#dealer>hud{border-top:3px solid #fff;box-shadow:0 -1px 5px #000;font:21px Arial,sans-serif}#player>hud{border-bottom:3px solid #fff;box-shadow:0 1px 5px #000}playfield{display:flex;justify-content:center;flex-direction:column;height:100vh}field{position:relative;flex-grow:1;flex-basis:0}hud{position:relative;display:flex;flex-direction:row;align-items:center;color:#fff;text-shadow:1px 1px 0 #000,-1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000;height:10%;z-index:2}money{position:relative;flex-grow:1;flex-basis:0;text-align:left;padding-left:20px}changes{position:relative;vertical-align:middle;opacity:0;color:#0000;font-weight:700;font-size:16px;border-radius:3px;padding:1px 5px;transition:.4s}@media(max-width:575px){changes{position:absolute;right:0;bottom:100%;font-size:16px}}changes.add-money{opacity:1;background-color:#327832;color:#cfc;box-shadow:1px 1px 0 #222;transition:.4s}changes.take-money{opacity:1;background-color:#e5193b;color:#fcc;box-shadow:1px 1px 0 #222;transition:.4s}bet{position:relative;flex-grow:1;flex-basis:0}deck{position:relative;flex-grow:1;flex-basis:0;text-align:right;padding-right:20px}options{position:relative;flex-grow:1;flex-basis:0;opacity:0;transition:.2s}options>*{vertical-align:middle}options.show{opacity:1;transition:.2s}options button{margin:0 5px;padding:2px 10px;background-color:#ddf;border-radius:2px;border:0;border-bottom:3px solid #99b;font:700 14px Verdana,sans-serif}options button:active{border:0}options button *{vertical-align:middle}.accelerator-key{display:none}@media(min-width:576px){.accelerator-key{display:inline-block;padding:2px 5px;margin:0 5px 0 0;border-radius:2px;box-shadow:1px 1px 0 #333 inset;background-color:#8080804d;font:10px monospace}}.waiting-dice{font-size:21px;color:red;text-shadow:1px 1px 0 #eee,-1px 1px 0 #eee,-1px -1px 0 #eee,1px -1px 0 #eee,0 -1px 0 #eee,1px 0 0 #eee,0 1px 0 #eee,-1px 0 0 #eee}@keyframes moving-dice{0%{transform:rotate(180deg)}50%{transform:rotate(-180deg)}100%{transform:rotate(180deg)}}.waiting-dice>icon{display:inline-block;margin:0 5px;animation:moving-dice 3s infinite}.continue-button{background-color:#76bc76;border-color:#327832}.stop-button{background-color:#e5193b;border-color:#c40b2a}options input{border:1px solid #fff;border-radius:5px;padding:1px 5px;box-shadow:1px 1px 1px #333 inset}totals{background:linear-gradient(rgba(0,128,0,0.6),rgba(0,128,0,0.6)),url("../img/table_bg.png") center center repeat;display:flex;align-items:center;height:20%}value{flex-grow:1;text-align:center}value *{vertical-align:middle}value>span{font-size:63px;color:#fff;text-shadow:1px 1px 0 #000,-1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000}cards{display:flex;position:relative;background:linear-gradient(rgba(0,128,0,0.6),rgba(0,128,0,0.6)),url("../img/table_bg.png") center center repeat;align-items:center;height:70%;overflow-y:hidden;overflow-x:auto}#dealer banner{position:absolute;left:0;bottom:100%;width:100%;height:100%;transition:.8s}#dealer banner.slide{bottom:0;transition:.8s}#player banner{position:absolute;left:0;top:100%;width:100%;height:100%;transition:.8s}#player banner.slide{top:0;transition:.8s}banner>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:96px Righteous,sans-serif;white-space:nowrap;text-shadow:0 -2px 0 #eee,2px -2px 0 #eee,2px 0 0 #eee,2px 2px 0 #eee,0 2px 0 #eee,-2px 2px 0 #eee,-2px 0 0 #eee,-2px -2px 0 #eee,0 -6px 0 #000,6px -6px 0 #000,6px 0 0 #000,6px 6px 0 #000,0 6px 0 #000,-6px 6px 0 #000,-6px 0 0 #000,-6px -6px 0 #000,13px 13px 2px #3336}.win-text{color:#2271cc}.lose-text{color:#c22}.draw-text,.shuffle-text{color:#efba26}@media(max-width:575px){.shuffle-text{font-size:56px}}#dealer card{display:inline-flex;flex-shrink:0;justify-content:center;position:relative;width:160px;height:196px;margin:auto;padding:0 10px;perspective:1e3px;bottom:100%}#dealer card.slide-up{bottom:0;transition:.8s}#dealer card.slide-down{bottom:100%;transition:.8s}#player card{display:inline-flex;flex-shrink:0;justify-content:center;position:relative;width:160px;height:196px;margin:auto;padding:0 10px;perspective:1e3px;top:100%}#player card.slide-up{top:0;transition:.8s}#player card.slide-down{top:100%;transition:.8s}card.flip sides{transform:rotateY(-180deg)}sides{position:relative;width:100%;height:100%;transition:.8s;transform-style:preserve-3d;border:1px solid #000;border-radius:5px}front,back{display:flex;justify-content:center;position:absolute;left:0;top:0;width:100%;height:100%;background-color:#fff;border-radius:5px;backface-visibility:hidden}front{transform:rotateY(180deg)}corner{display:block;flex-grow:1;padding-top:5px}value{display:block;text-align:center}corner>suit{display:block;text-align:center}grid{display:flex;flex-direction:row;border:1px solid #000;border-radius:2px;width:90px;height:144px;margin:26px 0}column{display:flex;flex-direction:column;flex-grow:1;justify-content:space-around}column>suit{display:block;text-align:center;font-size:24px}column>img{max-height:100%;max-width:100%}.upside-down{transform:rotate(180deg)}.card-red{color:#d00}.card-black{color:#000}.grid-red{border-color:#d00}.grid-black{border-color:#000}.card-back{width:110px;height:166px;margin:15px 0;background:url(../img/card_bg.png) 50%}#menu-icon{position:absolute;left:0;top:0;display:flex;flex-direction:column;width:35px;height:30px;padding:5px;cursor:pointer}line{flex-grow:1}line:nth-child(odd){background-color:#fff;border:1px solid #000;border-radius:5px;box-shadow:1px 1px 0 #666}overlay{position:fixed;z-index:10;opacity:0;left:0;bottom:100vh;width:100vw;height:100vh;background-color:#000000b2;transition:.4s}overlay.show{opacity:1;bottom:0;transition:.4s}options-menu{position:absolute;padding:5px;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;font:18px Arial,sans-serif;background:linear-gradient(rgba(0,128,0,0.6),rgba(0,128,0,0.6)),url("../img/table_bg.png") center center repeat}@media(max-width:575px){options-menu{width:80%}}options-menu>div{border:5px solid #fff;padding:20px}options-menu div>p{font-size:28px;line-height:1}options-menu p{margin:0;line-height:1.5;text-align:left;color:#fff;text-shadow:1px 1px 0 #000,-1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000}stats{display:block;margin:20px 0}options-menu button{margin:0 5px;padding:2px 10px;background-color:#ddf;border-radius:2px;border:0;border-bottom:3px solid #99b;font:700 14px Verdana,sans-serif;vertical-align:bottom}options-menu button:active{border:0}