@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&family=Overpass:wght@400;700&family=Rubik:wght@300;400;500&display=swap');


body{
    background-color: hsl(27, 66%, 92%);
    width: 100%;
    height:100vh;
    display:flex;
    justify-content: center;
    align-items: center; 
    
}
.attribution{
    position: absolute;
    bottom:1rem;

}

.container{
    
    width:400px;
    
}

.content{
    
    max-width:400px;
    border-radius:15px;
    
     
}
.first_section{
    background-color:hsl(10, 79%, 65%);
    height: 50px;
    border-radius: 10px;
    padding:1.5rem;  
    display: flex;  
    
}
.first_content{
    flex: 15;
}

.title{
    color: white;
    font-family: DM Sans;
    font-weight: 400;
    margin:0;
    font-size: 12px;
}
.balance{
    color: white;
    font-family: DM Sans;
    font-weight: 400;
    margin:0.5rem 0 0 0;
    font-size: 24px;
}
.logo_img{
    display: flex;
    justify-items: right;
    flex: 1;
    height: 80%;
    
}
.indent{
    height:20px;
    width:100%;
}
.second_section{
    background-color:white;
    height:350px;
    border-radius: 10px;    
    
    width:100%;
}
.section_content{
    padding: 1.5rem;
}
.spending{
    color: hsl(25, 47%, 15%);
    font-family: DM Sans;
    font-weight: 700;
    font-size: 22px;
    margin:0;
}
.chart{
    padding: 0.5rem 0;
}
.hr{
    color:antiquewhite;
}
.fotertext{
    color: hsl(24, 2%, 54%,90%);
    font-family: DM Sans;
    font-weight: 400;
    font-size: 12px;
    margin:0;
}
.price{
    color: hsl(25, 47%, 15%);
    font-family: DM Sans;
    font-weight: 700;
    font-size: 30px;
    margin:0;
    flex:3;
}

.foter{
    padding:1rem 0;
    
}
.footerflex{
    display: flex;
}
.right{
    flex:2;
    justify-content:flex-end;
    align-items: flex-end;
    text-align:right;
}
.bold{
    font-weight: 700;
    color: hsl(25, 47%, 15%);
    font-family: DM Sans;
}