Responsive result page using css flexbox

Hi there! Excellent work on your project✨ I have a few tips that could make it even better.

First, for accessibility, it's better to wrap your card in a <main> tag instead of a <div>

Secondly, to match the design, it's better to use the font specified in the style guide file. Here's how you can add fonts to your site:

1:Find a suitable font: You can use any font you like, but make sure it's licensed for web use. Google Fonts is a popular resource for free web fonts.

2:Include the font in your HTML file: You can do this using the link tag in the head section of your HTML file. Here's an example:
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

3:Use the font in your CSS: Once you've included the font in your HTML file, you can use it in your CSS using the font-family property. For example:
body {
  font-family: 'Open Sans', sans-serif;
}

Another tip is to change the hover color to a gradient to match the design. You can do this by adding a linear-gradient property to the background property of the :hover state. For example:

.button:hover {
  background: linear-gradient(180deg, rgba(103,67,255,1) 34%, rgba(49,44,235,1) 100%);
}

Lastly, it's important to use the correct sizes. You did a great job relying on your eyes, but using graphics software like Photoshop can help you get the correct sizes.

Overall, it was a great job. Keep it up 🔥