Order summary component

Hey @MORVWY,

Nice job on the project, it looks great!

I looked through your project and noticed the following code.

.order_card .order_text .order_text_button { margin-top: 20px; }

You do this a lot in your code, where you are creating a LOT of unnecessary specificity. (Which isn't really a good thing, as it can lead to specificity wars)

Instead of selecting it that way, why aren't you simply selecting it like so?

.order_text_button { margin-top: 20px; }

Here's a good video by Kevin Powell on specificity, and some of the problems that can arise with too much or too little specificity.

Kevin Powell Specificity

Keep up the great work!

Your code is already great in my opinion the only thing i was able to find trouble was the background image.

<--YOURS-->
body {
  background: url('../images/pattern-background-desktop.svg') center center/cover no-repeat;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

<-- Since you put display flex and the height on the .main class
 i also suggest putting the background on it too, it fixes the background
 problem you had when putting it on the body -->

<--MINE-->
main {
  background-repeat: no-repeat;
  background-image: url('../images/pattern-background-desktop.svg');
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

And another tip maybe try using :root in your project

:root {
    --Paleblue: hsl(225, 100%, 94%);
    --Brightblue: rgb(56, 41, 224);
    --Verypaleblue: hsl(225, 100%, 98%);
    --Desaturatedblue: hsl(224, 23%, 55%);
    --Darkblue: hsl(223, 47%, 23%);
    --Borderradius: 10px;
}

<-- Usage Example: -->

p {
    line-height: 1.5rem;
    font-size: 14px;
    font-weight: 500;
    color: var(--Desaturatedblue);
}
h1 {
    margin: 1rem 0;
    color: var(--Darkblue);
    font-size: 26px;
    font-weight: 900;
}

Other than that i think your code is amazing :3

*PS : Correct me if i'm wrong