:root{
    /*Primary Colors*/
    --Pale-blue: hsl(225, 100%, 94%);
    --Bright-blue: hsl(245, 75%, 52%);

    /*Neutral Colors*/
    --Very-pale-blue: hsl(225, 100%, 98%);
    --Desaturated-blue: hsl(224, 23%, 55%);
    --Dark-blue: hsl(223, 47%, 23%);
    --Medium-pale-blue: hsl(231, 41%, 93%);
    --just-white:#ffffff;
    

    /*Font*/
    --red-hat-display: 'Red Hat Display', sans-serif;

}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html
{
    font-family:var(--red-hat-display);
    background-image: url(./images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    
    
}


   
    

@media (min-width:375px){
    .main-container {
        display:flex;
        justify-content: center;
        align-items: center;
        width:100vw;
        height:100vh;
    
    }
}
.main-container {
    display:flex;
    justify-content: center;
    align-items: center;
    width:100vw;
    height:100vh;
    
    
    
}
.order-card{
    
    width:340px;
    height:440px;
    border-top-left-radius:20px;
    border-top-left-radius:20px;
}
.order-card__img{
    background-image: url(./images/illustration-hero.svg);
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    width:100%;
    height:180px;   
    
    
}
.info__title{
        display:flex;
        font-size:22px;
        font-weight:bolder;
        justify-content:center;
        align-items: flex-end;
        height:50px;
        color:var(--Dark-blue);

}

.order-card__info{
    height:20rem;
    background-color: var(--Medium-pale-blue);
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
}
.info__paragraph{
    display:flex;
    
    align-items:flex-start;
    padding:25rem;
    margin-left: 10px;
    color:var(--Desaturated-blue);
    padding: 17px;
    font-size:15px;
}


.info__summary{
    display: flex;
    justify-content:space-evenly;
    padding:10px;
    margin:14px;
    border-radius: 13px;
    background-color: var(--just-white);
    
}
h2{
    font-size:15px;
    color:var(--Dark-blue);
}
span{
    color:var(--Desaturated-blue)
}

.summary__change{
    color:var(--Bright-blue);
}
.button-primary{
    display: flex;
    justify-content: center;  
    margin-left: 28px;  
    font-size:15px;
    align-items:center;
    padding:15px;
    width:17rem;
    height:30px;
    border: none;
    border-width:1px;
    color:var(--Very-pale-blue);
    border-top-left-radius:7px;
    border-top-right-radius:px;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;
    background-color: var(--Bright-blue);
    
}
.button-primary:hover {
    background: linear-gradient(rgb(27, 22, 22) , rgb(58, 1, 1)); 
 }
.button-secondary{
    display:block;
    font-size: var(--red-hat-display);
    justify-content:center;
    align-items:center;
    margin-left: 28px; 
    margin-top:10px;
    height:25px;
    color:var(--Desaturated-blue);
    background-color:var(--Medium-pale-blue);
    width: 17rem;
    border: none;
}
.button-secondary:hover{
    color:var(--Dark-blue);
    font-weight: bolder;
}
.summary__change:hover{
    color:var(--Dark-blue);
}



.attribution {
     font-size: 11px;
     text-align: center;
}

.attribution a { 
    color: hsl(228, 45%, 44%);

}