*{box-sizing:border-box;margin:0;padding:0}body{background:#fafafa;color:#555;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;margin:0}header,.winner{margin:40px auto;text-align:center}header button{-webkit-appearance:none;background:transparent;border:0;border-radius:0;font-size:0.8rem;margin-top:25px}header button:focus,header button:hover{outline:0}.winner div{font-size:2rem}.row{display:flex;flex-direction:column;justify-content:center;margin-bottom:20px}@media (min-width: 768px){.row{flex-direction:row}}.row .info{align-items:center;display:flex;flex-direction:column;flex-basis:100px;justify-content:center;padding:10px 30px;text-align:center}@media (min-width: 768px){.row .info{flex-basis:200px}}.row .hand{align-items:center;display:flex;flex-direction:column;justify-content:center}@media (min-width: 544px){.row .hand{flex-direction:row}}.row .hand .card-container{animation:load .5s forwards;-webkit-perspective:1000;-moz-perspective:1000;-o-perspective:1000;perspective:1000;height:154px;opacity:0;margin:5px;width:105px}@media (min-width: 768px){.row .hand .card-container{height:220px;width:150px}}.row .hand .card-container:nth-child(1){animation-delay:.4s}.row .hand .card-container:nth-child(2){animation-delay:.8s}.row .hand .card-container:nth-child(3){animation-delay:1.2s}.row .hand .card-container:nth-child(4){animation-delay:1.6s}.row .hand .card-container:nth-child(5){animation-delay:2s}.row .hand .card-container.visible .flipper{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}.row .hand .card-container .flipper{-webkit-transition:0.6s;-webkit-transform-style:preserve-3d;-moz-transition:0.6s;-moz-transform-style:preserve-3d;-o-transition:0.6s;-o-transform-style:preserve-3d;transition:0.6s;transform-style:preserve-3d;position:relative}.row .hand .card-container .flipper .front,.row .hand .card-container .flipper .back{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;height:154px;left:0;position:absolute;top:0;width:105px}@media (min-width: 768px){.row .hand .card-container .flipper .front,.row .hand .card-container .flipper .back{height:220px;width:150px}}.row .hand .card-container .flipper .front{background:#f6f6f6;border-radius:10px;box-shadow:3px 3px 7px rgba(0,0,0,0.3);padding:10px;z-index:2}.row .hand .card-container .flipper .front .pattern{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAQElEQVQYlW2OwQ0AMAgCbw7XcMFubj81RVpeGgIcQHK1gJC/+shjtkLNTmpTaZMm05IB76YzfTedaW46k28Opg1VYQ5hW3JdzwAAAABJRU5ErkJggg==) repeat;display:block;height:100%;width:100%}.row .hand .card-container .flipper .back{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);background:#fff;border-radius:10px;box-shadow:3px 3px 7px rgba(0,0,0,0.3)}.row .hand .card-container .flipper .back .card{align-items:center;background:#fff;border-radius:10px;box-shadow:3px 3px 7px rgba(0,0,0,0.3);display:flex;font-size:3.5rem;height:100%;position:relative;justify-content:center}@media (min-width: 768px){.row .hand .card-container .flipper .back .card{font-size:5rem}}.row .hand .card-container .flipper .back .card:before,.row .hand .card-container .flipper .back .card:after{position:absolute;font-size:1rem}@media (min-width: 768px){.row .hand .card-container .flipper .back .card:before,.row .hand .card-container .flipper .back .card:after{font-size:2rem}}.row .hand .card-container .flipper .back .card:before{left:5px;top:5px}.row .hand .card-container .flipper .back .card:after{right:5px;bottom:5px;transform:rotate(180deg)}.row .hand .card-container .flipper .back .♦:before,.row .hand .card-container .flipper .back .♦:after{content:"♦";color:#ff0000}.row .hand .card-container .flipper .back .♥:before,.row .hand .card-container .flipper .back .♥:after{content:"♥";color:#ff0000}.row .hand .card-container .flipper .back .♣:before,.row .hand .card-container .flipper .back .♣:after{content:"♣";color:#000}.row .hand .card-container .flipper .back .♠:before,.row .hand .card-container .flipper .back .♠:after{content:"♠";color:#000}@keyframes load{100%{opacity:1}}