@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Outfit:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&display=swap');

:root{
    --color1: hsl(158, 36%, 37%);
    --color2: hsl(30, 38%, 92%);
    --color3: hsl(212, 21%, 14%);
    --color4: hsl(228, 12%, 48%);
    --color5: white;
    --color6: hsl(158, 36%, 23%);
    --font1: 'Fraunces', 'serif';
    --font2: 'Montserrat', 'san-serif';
}

body{
    background-color: var(--color2);
    
}
.conteudo{
    background-color: white;

}
.container{
    display: flex;
    width: 620px;
    height: 530px;
    border-radius: 10px;
    border-top-right-radius: 10px;
    margin: 80px auto;
    box-shadow: 0.5px 1px 15px rgba(0, 0, 0, 0.089);
    text-align: left;
    

}
h1{
    font-family: var(--font2);
    font-weight: 400;
    letter-spacing: 6px;
    font-size: 15px;
    padding: 15px 26px 0px;
    color: var(--color4);
}
h2{
    font-family: var(--font1);
    font-size: 2.5em;
    padding-left: 26px;
    padding-right: 26px;
}
p{
    font-family: var(--font2);
    font-size: 1em;
    padding: 0px 26px 0px ;
    text-align: left;
    color: var(--color4);
    line-height: 25px;
}
img
{
  width: 310px;
  border-bottom-left-radius: 10px;
  height: 530px;
  
}
.preco1{
    font-family: var(--font1);
    padding: 15px 26px 0px;
    font-size: 2em;
    color: var(--color1);
}
.preco2{
    font-family: var(--font2);
    display: inline;
    padding: 15px;
    font-size: 0.4em;
    text-decoration: line-through;
    vertical-align: 50%;
    color: var(--color4);
}

.botao{
    padding: 26px 26px 0px;
    
}

button{
    background-color: var(--color1);
    width: 320px;
    height: 50px;
    border-radius: 10px;
    color: white;
    font-family: var(--font2);
    font-size: 0.9em;
    font-weight: bold;
    
}

.botao :hover{
    background-color: var(--color6);
}

@media(max-width: 700px){
    .container{
        display: block;
        width: 375px;
        height: 450px;
        margin: auto;
        box-shadow: 0.5px 1px 15px rgba(0, 0, 0, 0.123);
        
        
    }
    .conteudo{
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        box-shadow: 0.5px 1px 15px rgba(0, 0, 0, 0.267);

    }
    img{
        display: block;
        width: 100%;
        height: 60%;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 0%;
    }
    h1{
        font-size: 10px;
        padding: 15px 26px 0px 26px;
        margin-top: 0px;
    }
    h2{
        font-size: 2em;
        padding: 0px 26px 0px 26px;
    }
    p{
        font-size: 1em;
        padding: 0px 26px 0px 26px;
    }
    .botao{
        text-align: center;
        padding: 15px 0px 15px 0px;
    }
    
}