@import"https://fonts.googleapis.com/css2?family=Poppins&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{background-color:#007a7a;height:100vh;font-family:Poppins,sans-serif;color:#fff}.main{display:flex;flex-direction:column;justify-content:center;align-items:center}.main h1{color:#fff;margin-top:20px;font-size:2rem}.main button{background:none;border:2px solid white;padding:10px 20px;font-size:15px;color:#fff;font-weight:600;margin-top:10px;border-radius:5px;transition:all .2s ease-in}.main button:hover{background-color:#066;cursor:pointer}.card-grid{margin-top:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:420px}.card{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;perspective:1000px;width:100px;height:150px}.card .inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s;transform:rotateY(180deg)}.card.flipped .inner{transform:rotateY(0)}.card .front,.card .back{position:absolute;width:100%;height:100%;top:0;left:0;backface-visibility:hidden;border-radius:10px}.card .front{transform:rotateY(0)}.card .back{transform:rotateY(180deg);border:2px solid rgb(0,102,102)}@keyframes vibrate{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}.vibrate{animation:vibrate .3s linear}@media (max-width: 600px){.card-grid{grid-template-columns:repeat(3,1fr);gap:8px;max-width:300px}.card{width:80px;height:120px}}@media (max-width: 400px){.card-grid{grid-template-columns:repeat(3,1fr);gap:3px;max-width:300px}.card{width:90px;height:120px}.main h1{font-size:1.5rem}.main button{padding:8px 16px;font-size:13px}}