@font-face {
    font-family: Monsterrat;
    src: url(https://fonts.google.com/specimen/Montserrat);
    font-weight: 500;
}
@font-face {
    font-family: Fraunces;
    src: url(https://fonts.google.com/specimen/Fraunces);
    font-weight: 500, 700;
}

:root{
    --dark-green: hsl(158, 42%, 18%);
    --light-green:hsl(158, 36%, 37%);
    --black:hsl(212, 21%, 14%);
    --gray:hsl(228, 12%, 48%);
    --cream:hsl(30, 38%, 92%);
    --white:hsl(0, 0%, 100%);
}

body{
    background-color: var(--cream);
}
body div #type{
    text-transform: uppercase;
    
}
body p{
    font-family: Monsterrat;
    font-weight: 500;
    font-size: 14px;
    color: var(--gray);
}
button{
    font-family: Fraunces;
    font-weight: 700;
    font-size: 14px;
    color: var(--white);
    background-color: var(--light-green);
    padding: 1rem 3.5rem;
    border-radius: 15px;
    box-shadow: none;
    
}
button:hover{
    background-color: var(--dark-green);
}
button img{
    margin-right: 1rem;
}
.content .price #new_price{
    color: var(--light-green);
    font-size: 24px;
    font-weight: 700;
    font-family: Fraunces;
    margin-right: 1rem;
}
.content .price #old_price{
    text-decoration: line-through;
    margin-top: 1.5rem;
}
.content .price{
    display: flex;
    flex-direction: row;
   
}


@media screen and (min-width:375px) {


    .content{
        display: flex;
        width: 40rem;
        height: 28rem;
        margin: 2rem auto;
        background-color: white;
        border-radius: 10px;
    }
    .content .bloc{
        flex-direction: column;
        justify-content: left;
        
    }
    .content .bloc #picture{
        width: 20rem;
        height: 28rem;
        margin-right: 1.5rem;
        border-radius: 10px 0px 0px 10px;
    }
    .content #text-bloc{
        margin-right: 3rem;
        
    }
    .content #text-bloc #description{
        line-height: 1.5;
    }
}

@media screen and (max-width:375px) {
    .content{
        display: flex;
        flex-wrap: wrap;
        width: 20rem;
        height: 43rem;
        background-color: white;
        border-radius: 10px;
        margin: 1rem auto;
    }

    .content #text-bloc{
        margin: 1rem 2rem;
        
        
    }
    .content .bloc #picture{
        width: 20rem;
        height: 15rem;
        border-radius: 10px 10px 0px 0px;
    }
    .content #text-bloc #description{
        line-height: 1.5;
    }
  
}