@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}p{font-size:20px}body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#6563ff}::selection{color:#fff;background:#6563ff}.wrapper{padding:25px;background:#f8f8f8;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.1)}.card,.cards,.details,.view,p{display:flex;align-items:center;justify-content:center}.cards{height:350px;width:350px;flex-wrap:wrap;justify-content:space-between}.cards .card{cursor:pointer;position:relative;perspective:1000px;transform-style:preserve-3d;height:calc(100% / 4 - 10px);width:calc(100% / 4 - 10px);transition:transform .25s linear}.card.shake{animation:shake .35s ease-in-out}@keyframes shake{0%,to{transform:translateX(0)}20%{transform:translateX(-13px)}40%{transform:translateX(13px)}60%{transform:translateX(-8px)}80%{transform:translateX(8px)}}.cards .card .view{width:100%;height:100%;user-select:none;pointer-events:none;position:absolute;background:#fff;border-radius:7px;backface-visibility:hidden;transition:transform .25s linear;box-shadow:0 3px 10px rgba(0,0,0,.1)}.card .front-view img{max-width:17px}.card .back-view{transform:rotateY(-180deg)}.card .back-view img{max-width:40px}.card.flip .front-view{transform:rotateY(180deg)}.card.flip .back-view{transform:rotateY(0)}.details{width:100%;margin-top:15px;padding:0 20px;border-radius:7px;background:#fff;height:calc(100% / 4 - 30px);justify-content:space-between;box-shadow:0 3px 10px rgba(0,0,0,.1)}.details p{font-size:18px;height:17px;padding-right:18px;border-right:1px solid #ccc}.details p span{margin-left:8px}.details p b{font-weight:500}.details button{cursor:pointer;font-size:14px;color:#6563ff;border-radius:4px;padding:4px 11px;background:#fff;border:2px solid #6563ff;transition:.3s ease}.details button:hover{color:#fff;background:#6563ff}@media screen and (max-width:700px){.cards{height:350px;width:350px}.card .front-view img{max-width:16px}.card .back-view img{max-width:40px}}@media screen and (max-width:530px){.cards{height:300px;width:300px}.card .back-view img{max-width:35px}.details{margin-top:10px;padding:0 15px;height:calc(100% / 4 - 20px)}.details p{height:15px;font-size:17px;padding-right:13px}.details button{font-size:13px;padding:5px 10px;border:none;color:#fff;background:#6563ff}}