/*variables*/
:root{
--dark-cyan: hsl(158, 36%, 37%);
--dark-green: hsl(159, 41%, 23%);
--cream: hsl(30, 38%, 92%);
--dark-blue: hsl(212, 21%, 14%);
--dark-gray: hsl(228, 12%, 48%);

--ff-montserrat: "Montserrat", "sans-serif";
--ff-fraunces: "fraunces", "serif";
}

/*global*/
body{
    margin: 0; 
    background-color: var(--cream);
}
img{
    width: 100%;
    @media screen and (min-width: 440px) {
        width: 50%;
        
    }
}
h1{
    font-family: var(--ff-fraunces);
    font-size: 35px;
    margin-bottom: 12px;
    line-height: 1;
    margin-top: 20px;
}
h2{
    font-family: var(--ff-montserrat);
    font-size: 12px;
    color: var(--dark-gray);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 0;
}
p{
    font-family: var(--ff-montserrat);
    font-size: 13px;
    color: var(--dark-gray);
    font-weight: 500;
    line-height: 180%;
    
    margin: 0;

}
button{
    align-items: center;
    justify-content: center;
    display: flex;
    border-style: none;
}


/*other*/
.hero{
    min-height: 100vh;
    display: grid;
    justify-content: center;
    place-items: center;
    
}
.center-container{
    overflow: hidden;
    border-radius: 6px;
    width: 90vw;
   
    max-height: fit-content;
    background-color: white;
    @media screen and (min-width: 440px) {
        width: 600px;
        height: 430px;
        display: flex;
        flex-direction: row;
    }
}
.info-container{
    padding: 26px;
}
.perfume{
   margin-bottom: 0;
}
.description{
    margin-top: 20px;
}
.price{
    display: flex;
    align-items: center;
    margin-top: 21px;
}
.current-price{
    color: var(--dark-cyan);
    font-family: var(--ff-fraunces);
    font-size: 35px;
    font-weight: bold;
}

.prev-price{
    display: inline;
    margin-left: 19px;
    font-size: 12px;
    font-family: var(--ff-montserrat);
    color: var(--dark-gray);
    font-weight: 500;
    text-decoration-line: line-through;
    text-decoration-color: var(--dark-gray);
}
.add-to-cart{
    background-color: var(--dark-cyan);
    color: white;
    font-family: var(--ff-montserrat);
    font-weight: 700;
    font-size: 11px;
    width: 100%;
    padding: 13px 0px 13px 0px;
    border-radius: 6px;
    margin-top: 20px;
}
.add-to-cart:hover{
    background-color: var(--dark-green);
}
#cart-icon{
    width: 4%;
    margin-right: 8px;
}