@charset "UTF-8";

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

* {
    margin: 0px;
    padding: 0px;
}

:root {
    --font-1: "Fraunces";
    --font-2: "Montserrat";
}

.container {
    background-color: #F3EAE3;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product {
    display: inline-block;
    width: 330px;
    height: 510px;
}


div#image {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

div#text {
    background-color: white;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: justify;
}

div#text > h1 {
    font-family: var(--font-1);
    color: #1A1B20;
}


div#text > p {
    font-family: var(--font-2);
    font-size: 1em;
    color: #97969D;
}

div#text > p#txt1 {
    padding-top: 30px;
    padding-left: 30px;
}

div#text > h1#txt2 {
    padding-top: 20px;
    padding-left: 30px;
}

div#text > p#txt3 {
    padding-top: 20px;
    padding-left: 30px;
    line-height: 26px;
}

div#text > p#price {
    font-family: var(--font-1);
    color: hsl(158, 36%, 37%);
    font-size: 2.1em;
    display: inline-block;

    padding-top: 30px;
    padding-left: 30px;
}

div#text > a#old-price {
    font-family: var(--font-2);
    color: #97969D;
    font-size: 1em;
    text-decoration: line-through;

    padding-right: 80px;
}

div#text > button {
    font-family: var(--font-2);
    font-weight: bold;
    background-color: hsl(158, 36%, 37%);
    color: white;
    border-radius: 10px;
    border-style: none;

    width: 260px;
    height: 55px;
    margin-top: 40px;
    margin-left: 35px;
}

div#text > button:hover {
    background-color: hsl(158, 36%, 24%);
}