body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0;padding:1rem}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.card-list{grid-gap:20px;align-items:center;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,1fr);height:100%;justify-items:center;-webkit-perspective:1000px;perspective:1000px;width:750px}.card,.card-list{position:relative;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.card{background:#fff;border:1px solid #000;border-radius:5px;box-shadow:0 0 5px #000;cursor:pointer;height:150px;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s;width:100px}.card.flipped{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}.card .front{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:relative}.card .back,.card .front{align-items:center;border-radius:5px;box-sizing:border-box;display:flex;font-size:2em;font-weight:700;height:100%;justify-content:center;overflow:hidden;text-align:center;width:100%}.card .front{background-color:#fff;display:inherit}.card .back{background-color:#000;border-radius:5px;height:100%;left:0;position:absolute;top:0;width:100%}.card .bottom,.card .top{align-items:center;display:flex;height:20%;justify-content:space-between;line-height:20px;padding:5px;position:absolute;right:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:calc(100% - 10px)}.card .suit{font-size:1.2em;margin-left:5px}.card .bottom{border-radius:0 0 5px 5px;bottom:0;top:auto;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.card .main{align-items:center;display:flex;font-size:60px;justify-content:center;left:0;line-height:150px;position:absolute;text-align:center;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:100%}.card.diamonds,.card.hearts{color:red}.queen-head{height:100%;position:relative;width:100%}.crown{background-color:gold;border-radius:50% 50% 0 0;height:30%;top:0}.crown,.face{left:0;position:absolute;width:100%}.face{background-color:#fff;border-radius:50%;box-shadow:0 0 0 10px #000;height:70%;top:30%}
/*# sourceMappingURL=main.4cbb4e10.css.map*/