@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


:root{
    --primary: hsl(174, 72%, 40%);
    --primary-foreground: hsl(0, 0%, 100%);

  /* Background & text */
    --background: hsl(210, 20%, 98%);
    --foreground: hsl(220, 20%, 10%);

  /* States */
    --success: hsl(142, 70%, 45%);
    --warning: hsl(38, 92%, 50%);
    --destructive: hsl(0, 84%, 60%);

  /* UI helpers */
    --muted: hsl(210, 15%, 93%);
    --accent: hsl(174, 60%, 95%);

  /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(174 72% 40%), hsl(180 70% 50%));
    --gradient-card: linear-gradient(145deg, hsl(0 0% 100%), hsl(210 20% 98%));
    --gradient-hero: linear-gradient(180deg, hsl(210 20% 98%) 0%, hsl(174 60% 97%) 100%);

}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body{
    width: 100%;
    height: auto;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    background-image: var(--gradient-hero);
}

.container{
    width: 90%;
    margin: 0 auto;
    max-width: 400px;
    padding-bottom: 60px;
}

.hero{
    margin-top: 80px;
    text-align: center;
}

/* FIGURE */
/* IMG */

.title{
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.text-color{
    color: var(--primary);
}

.text{
    color: var(--foreground);
    font-size: 1.2rem;
    line-height: 1.3;
    margin-bottom: 40px;
}

.cards__container{
    display: flex;
    flex-direction: column;
}

.card{
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 0 3px  rgba(0, 0, 0, .4);
    padding: 15px 20px;
}

/* FIGURE */
/* IMG */

.card__header{
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    gap: 30px;

}

.card__title{
    font-size: 1.3rem;
    margin-bottom: 6px;
}

.card__text{
    font-size: .98rem;
    color: var(--foreground);
}

.card__form{
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 8px;
}

.card__input{
    margin-bottom: 10px;
    height: 45px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.204);
    font-size: 1rem;
    padding-left: 15px;
}

.card__input:focus{
    outline: 1px solid var(--primary)
}

.card__buttons{
    margin-top: 25px;
    display: flex;
    gap: 1rem;
}

.card__button{
    background-image: var(--gradient-primary);
    color: white;
    font-size: 1rem;
    width: 250px;
    height: 40px;
    border: none;
    font-weight: 600;
    border-radius: 10px;
    margin: 0 auto;
    cursor: pointer;
}

.card__button:hover{
    opacity: .9;
}

.card__button--clear{
    width: 100px;
    height: 40px;
    border: 1px solid #0000005c;
    background-color: var(--primary-foreground);
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
}   

.card__button--clear:hover{
    background-image: var(--gradient-primary);
    color: white;
    opacity: .9;
}


.card__result{
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(29, 175, 160, 0.275);
    outline: 1px solid rgba(4, 114, 103, 0.211);
    box-shadow: 0 0 7px rgba(0, 0, 0, .1);
    border-radius: 12px;
}

.card__text{
    margin-bottom: 10px;
    width: 200px;
}

.card__price{
    font-size: 1.5rem;
    font-weight: 700;
}

#save{
    font-weight: 600;
}

.legend{
    margin-top: 15px;
    text-align: center;
    color: var(--foreground);
}

.legend__author{
    font-size: 1rem;
    color: rgba(2, 79, 71, 0.838);
    text-decoration: underline;
    font-weight: 600;
}

.card__icon{
    display: flex;
    justify-content: center;
    align-items: center;
}

.card__picture{
    background-color: rgba(29, 175, 160, 0.275);
    width: 90px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}