*{margin:0;padding:0;box-sizing:border-box;outline:none}html,body,.main{width:100%;height:100%;min-width:1200px;min-height:800px}.main{display:flex;align-items:center;justify-content:center;background-image:linear-gradient(315deg, #fc5296 0%, #f67062 74%)}.card-box{display:flex;width:600px;height:800px;flex-wrap:wrap;perspective:1000px;background-color:rgba(255,255,255,.5);border-radius:8px}.card-box .card{display:flex;align-items:center;justify-content:center;position:relative;width:calc(25% - 10px);height:calc(25% - 10px);margin:5px;transform:scale(1);transform-style:preserve-3d;transition:transform .5s;cursor:pointer}.card-box .card:active{transform:scale(0.97);transition:transform .2s}.card-box .card.flip{transform:rotateY(180deg)}.card-box .card .front-face,.card-box .card .back-face{display:flex;align-items:center;justify-content:center;position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:#f8688d;border-radius:8px}.card-box .card .front-face img,.card-box .card .back-face img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:8px}.card-box .card .front-face{transform:rotateY(180deg)}.options-bar{display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;left:0;width:200px;height:200px;background-color:rgba(255,255,255,.5)}.options-bar :nth-child(n){margin-bottom:12px}.options-bar :nth-last-child(1){margin-bottom:0}.options-bar p{font-size:18px;font-weight:100}.options-bar button{padding:12px 24px;color:#fff;font-size:18px;background-color:#f8688d;border:none;border-radius:8px;transition:opacity .5s;cursor:pointer}.options-bar button:hover{opacity:.5}.options-bar button:disabled{opacity:.5;cursor:not-allowed}