@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --gray600: 224,23%,55%;
    --purple500: 245,83%, 68%;
    --blue950: 223,47%,23%;
    --blue700: 245, 75%,52%;
    --blue150: 224,100%,92%;
    --blue100: 225,100%,94%;
    --blue50: 225,100%,98%;


    --spacing-100: 0.5rem;
    --spacing-200: 1rem;
    --spacing-300: 1.5rem;
    --spacing-400: 2rem;
    --spacing-600: 3rem;

}

html{
    font-family: "Red Hat Display", sans-serif;
    background: hsl(var(--blue100));
}

.heroImg{
    width: 100%;
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
}

body{
    height: 100vh;
    align-content: center;
}

.orderCard{

    background: white;
    width: 90%;
    margin: auto;
    border-radius: 1.25rem;
    align-content: center;
    text-align: center;
    max-width: 23rem;
}

.summary{
    padding: var(--spacing-300);
        display: flex;
    flex-direction: column;
    gap: var(--spacing-300);

}

.item{
    background: hsl(var(--blue50));
    padding: var(--spacing-200);
    display: flex;
    border-radius: 0.6875rem;
    gap: var(--spacing-200);
  
}

.desc{
    color: hsl(var(--gray600));
    margin: auto;
    font-size: 0.9375rem;
    line-height: 165%;
    font-weight: 600;

}



.btn{
 border: 0;
 border-radius: 0.75rem;
 padding: var(--spacing-200);
 font-family: "Red Hat Display", sans-serif;
 font-weight: 800;
 font-size: 0.9375rem;
 width: 100%;

}

.proceed-btn{
 background: hsl(var(--blue700));
 color: white;

 box-shadow: 0px 20px 20px 0px rgba(56,42,225,0.2);
-webkit-box-shadow: 0px 20px 20px 0px rgba(56,42,225,0.2);
-moz-box-shadow: 0px 20px 20px 0px rgba(56,42,225,0.2);

}

 .proceed-btn:hover{
background: hsl(var(--purple500));
 }

.cancel-btn{
    background: none;
    color: hsl(var(--gray600));
    padding-bottom: 0;

}

.cancel-btn:hover{
    color: black;
}

h1{
    
    font-size: 1.375rem;
    font-weight: 900;
    color: hsl(var(--blue950));
    margin-top: var(--spacing-100);

}


.item-details{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-100);
    flex-grow: 2;
    text-align: left;
    
}

.name{
     font-weight: 900;
 font-size: 0.9375rem;
}

.price{
    font-size: 0.9375rem;
    color: hsl(var(--gray600));
     font-weight: 500;
}

.change-btn{
    background: none;
    color: hsl(var(--blue700));
    font-weight: 800;
    border: 0;
    font-family: "Red Hat Display", sans-serif;
     font-weight: 800;
     font-size: 0.9375rem;
     align-self: center;
     text-align: center;
}

.change-btn:hover{
    color: hsl(var(--purple500));
}



.actions{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-100);
    
    
}

@media (min-width:768px){
    .orderCard{
    max-width: 28.125rem;
    }


    h1{
        font-size: 1.75rem;
    }

    .item{
        padding: var(--spacing-300);
    }

    .summary{
        padding: var(--spacing-600);
        padding-top: var(--spacing-400);
    }

    .desc,.change-btn,.name,.price,.btn{
        font-size: 1rem;
    }
}