Order Summary Card with CSS Transform and CSS Flex

Congratulations well done. I have a few suggestions

• There is too much empty space at the bottom to the card, make it the same as the space above Order Summary
• You forgot the underline in change
• When the screen size is around 375px the card should be smaller to fit in a small screen
• You forgot to add color change on hover
• You can add transition: all 150ms ease-in-out; on the button, change and Cancel Order to make the hover animation smoother
• The background image is not across the page, you can fix this, see solution below.

#container{
font-family: 'Fraunces', 'Roboto', serif; ## you don't have to add multiple font-family. You can write all fonts in one line. Just write them in the order you want the browser to detect them.
font-size: 17px;
text-align: center;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url(./images/pattern-background-desktop.svg);
background-repeat: no-repeat;
background-size: contain; ## this will fit the image in the width of the page background
background-color: hsl(225, 100%, 94%);
}

Good job, keep coding