Updated index.css with new features

[MrHydrolifker]

Got it! Here's the updated index.css code that you provided, along with a brief explanation of the key parts for clarity:

css
Copy code
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

@import "slick-carousel/slick/slick.css";
@import "slick-carousel/slick/slick-theme.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
margin: 0;
font-family: 'Poppins', sans-serif;
background-color: #f9f9f9; /* Light grey background /
color: #333; / Dark grey text */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}

h1, h2, h3 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
margin-bottom: 0.5em;
}

button {
font-family: 'Poppins', sans-serif;
padding: 10px 20px;
background-color: #e72927; /* Red background */
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #c82727; /* Darker red on hover */
}

.card {
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 15px;
}

@media (max-width: 768px) {
body {
padding: 10px; /* Add padding for smaller screens */
}

.card {
margin: 10px; /* Reduce margins on smaller screens */
}
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

@Keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-30%);
}
}

.animate-scroll {
animation: scroll 10s linear infinite;
will-change: transform; /* Helps the browser optimize the animation */
}
Key Features of the CSS Code:
Font Import: The Poppins font is imported for consistent typography across the site.

Base Styles:

The body has a light grey background and dark grey text, enhancing readability.
Antialiasing is enabled for smoother font rendering.
Headings: The

,

, and

tags have a consistent font and spacing.

Button Styles:

Buttons have a red background with smooth transitions for hover effects.
Card Component: Cards have a white background, rounded corners, and subtle shadows for a clean look.

Responsive Design: Media queries adjust padding and margins for smaller screens.

Code Block Styling: Code elements use a monospace font for better readability.

Animation:

A keyframe animation named scroll allows for horizontal movement, which can be applied to elements with the animate-scroll class.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
eventmint	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 1, 2024 2:38pm

[github-actions]

🎉 Thank you for your contribution! Your pull request has been submitted successfully. A maintainer from Eventmint team will review it as soon as possible. We appreciate your support in making this project better

[samyakmaitre]

Code reviewed

[samyakmaitre]

This changes are not required