More visually appealing css changes

[Mukulprajapatiii]

The updated CSS provided has several improvements over the original CSS to enhance the visual appeal and usability of the form. Here are the key changes:

1. General Styles
Added smooth scrolling:

@media (prefers-reduced-motion: no-preference) {

• {
  scroll-behavior: smooth;
  }
  }

2. Body
Changed font stack for better compatibility:

font-family: Helvetica, Arial, sans-serif;

3. Header
Increased header height and added padding:

height: 70px;
padding: 0 20px;

Added z-index to keep the header above other content:

z-index: 1000;

4. Heading
Increased font size for the main heading:

font-size: min(5vw, 1.5em);

5. Navigation
Removed unnecessary flex-wrap property and ensured proper alignment and spacing.

6. Sections
Added styles for card-like appearance:

background-color: #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding: 20px;
margin: 20px auto;

7. Headings
Font family and size adjustments for section headings:

font-size: 1.5em;

8. Form Layout
Used flexbox for form rows for better layout and spacing:

display: flex;
flex-direction: column;
gap: 10px;

9. Labels and Inputs
Improved label and input spacing:
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
box-sizing: border-box;

10. Radio Buttons
Improved styling for radio buttons:

width: auto;
margin-right: 10px;

11. Button
Enhanced button appearance and hover effect:

background: #1b1b32;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
accessible-html-css-quiz	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 24, 2024 1:26pm

[Mukulprajapatiii]

It added more aesthetic visuals, what css needs to do btw :)