Order Summary Component

Hey @stellarwobble 👋🏻

I have some feedback to help you fix the accessibility issues and some other things.

• First, In the HTML, <div class="main">...</div> should be <main class="main">...</main>.
• Second, I suggest using <h2> or <p> instead of <h4>, because headings in HTML have to increase gradually, such as h1, h2, h3….. These will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
• I have a more reliable way to position the card in the center, since positon: absolute; may cause some problems down the line, so here's my proposal:

body {
    background-image: url('./images/pattern-background-desktop.svg');
    background-repeat: no-repeat;
    background-color: rgb(229, 237, 250);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

also I suggest resetting the initial setting of the browser like so:

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

• Next, the music icon, should have aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here.
• One last thing, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother. You'll see what I mean when you add it.

I hope this was helpful 👨🏻‍💻 all in all, you did a great job for the second project, keep it up, you got this. Cheers 👾

Thank you for your comment and the positivity! This is very helpful information. I especially appreciate your feedback on accessibility as that's an area I'd like to broaden my understanding.