*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(to bottom right,#fff,#e3f2fd);color:#333;min-height:100vh}.app-container{max-width:1200px;margin:auto;padding:20px}nav{background:linear-gradient(135deg,#fd940d,#6610f2);color:#fff;padding:20px 30px;border-radius:15px;box-shadow:0 4px 15px #0003;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;animation:slideInTop 1s ease}@keyframes slideInTop{0%{transform:translateY(-40px);opacity:0}to{transform:translateY(0);opacity:1}}nav h1{font-size:28px;font-weight:700;letter-spacing:1px}nav ul{list-style:none;display:flex;gap:20px}nav a{color:#fff;text-decoration:none;font-weight:600;transition:transform .3s,color .3s;cursor:pointer}nav a:hover{color:#ffeb3b;transform:scale(1.1)}.search{display:flex;gap:12px;margin-top:15px;flex-wrap:wrap}.search input{padding:10px;border-radius:8px;border:2px solid #ccc;width:220px;transition:all .3s ease}.search input:focus{border-color:#0d6efd;outline:none}.search button{padding:10px 16px;background-color:#ffc107;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 10px #0003}.search button:hover{background-color:#ff9800;transform:scale(1.05)}.categorybtn{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;margin:30px 0}.categorybtn button{background:linear-gradient(to right,#ff4081,#ff80ab);color:#fff;border:none;padding:12px 20px;border-radius:30px;cursor:pointer;font-weight:700;font-size:14px;transition:all .4s ease;box-shadow:0 4px 12px #ff408166;animation:popIn .5s ease forwards;opacity:0}.categorybtn button:nth-child(1){animation-delay:.1s}.categorybtn button:nth-child(2){animation-delay:.2s}.categorybtn button:nth-child(3){animation-delay:.3s}.categorybtn button:nth-child(4){animation-delay:.4s}.categorybtn button:nth-child(5){animation-delay:.5s}@keyframes popIn{to{opacity:1;transform:scale(1)}0%{opacity:0;transform:scale(.6)}}.categorybtn button:hover{background:linear-gradient(to right,#e91e63,#ff4081);transform:scale(1.1) rotate(-1deg)}.para{text-align:center;font-weight:600px;font-size:50px;color:#1ee94d}.cardContainer{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;padding:2rem;background-color:#f9fafb}.card{background:#fff;border-radius:1rem;box-shadow:0 6px 20px #00000014;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column}.card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #00000026}.card img{width:100%;height:180px;object-fit:cover;border-top-left-radius:1rem;border-top-right-radius:1rem}.cardContent{padding:1rem;flex:1;display:flex;flex-direction:column;justify-content:space-between}.cardContent a{font-size:1.1rem;font-weight:600;color:#1f2937;text-decoration:none;margin-bottom:.5rem;transition:color .2s ease}.cardContent a:hover{color:#2563eb}.cardContent p{color:#4b5563;font-size:.95rem;line-height:1.4;margin-bottom:.75rem}.cardContent .publishedAt{font-size:.8rem;color:#9ca3af;margin-bottom:.75rem}.cardContent button{align-self:flex-start;background-color:#2563eb;color:#fff;padding:.5rem 1rem;border:none;border-radius:.5rem;font-size:.9rem;cursor:pointer;transition:background-color .3s ease}.cardContent button:hover{background-color:#1d4ed8}.cardContent button a{color:inherit;text-decoration:none}