*{margin:0;padding:0;box-sizing:border-box;--webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-family:Courier New,Courier,monospace}html{scroll-behavior:smooth}body{padding:30px}h1{text-align:center}.container{width:400px;margin:40px auto 0;height:80vh;overflow-y:scroll;display:flex;gap:20px;justify-content:center;align-content:flex-start;padding:20px;flex-wrap:wrap}.cardData{width:360px;height:200px;padding:10px;border-radius:4px;border:1px solid #ccc;cursor:pointer;transition:all .3s ease;background-color:wheat}.cardData:hover{border:2px solid #3991ef;box-shadow:.5 .5 4px #777;transform:scale(1.05);-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-ms-transform:scale(1.05);-o-transform:scale(1.05)}.card_id{width:30px;height:30px;border-radius:100%;padding:4px;background-color:#3991ef;display:flex;justify-content:center;align-items:center;color:#fff;margin-bottom:6px;overflow:hidden;-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%}h3{font-size:18px}.card_body{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}