@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root{
    /*COLORS*/
    --Soft-red: hsl(10, 79%, 65%);
    --Cyan: hsl(186, 34%, 60%);
    --Dark-brown: hsl(25, 47%, 15%);
    --Medium-brown: hsl(28, 10%, 53%);
    --Cream: hsl(27, 66%, 92%);
    --Very-pale-orange: hsl(33, 100%, 98%);

    /*FONTS*/
    --font-size: 18px;
    --font-family: 'Roboto';
}

body{
    background-color: var(--Cream);
    display: grid;
    place-items: center;
    font-family: var(--font-family);
}

.container{
    display: grid;
    grid-template-rows: 130px 30px 1fr;
    grid-template-columns: 560px;
}

.balance{
    color: var(--Very-pale-orange);
    background-color: var(--Soft-red);
    grid-row: 1/2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 150px;
    border-radius: 25px;
}

.txt{
    padding: 10px 30px;
    grid-column: 1/2;
    grid-row: 1/2;
    font-size: 19px;
}

.img{
    padding-bottom: 60px;
    padding-right: 40px;
    grid-column: 2/3;
    grid-row: 1/2;
    display: grid;
    place-items: end;
}

.container2{
    grid-row: 3/4;
    grid-column: 1/2;
    background-color: var(--Very-pale-orange);
    border-radius: 25px;
    display: grid;
    grid-template-rows: 150px 1fr 1fr;
    grid-template-columns: 1fr;
    height: 550px;
}

.spending{
    grid-row: 1/2;
    grid-column: 1/2;
    padding-left: 40px;
    padding-top: 20px;
    color: var(--Dark-brown);
    
}

.graphic{
    grid-column: 2/3;
    grid-column: 1/2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 3fr 1fr 30px;
    color: var(--Medium-brown);
}

.cnt{
    border-radius: 7px;
    margin-left: 20px;
    background-color: var(--Soft-red);
    width: 50px;
}

.cnt1{
    margin-top: 145%;
    height: 52px;
    grid-column: 1/2;
    grid-row: 1/2;
}

.cnt2{
    margin-top: 80%;
    height: 100px;
    grid-column: 2/3;
    grid-row: 1/2;
}

.cnt3{
    margin-top: 10%;
    height: 150px;
    grid-column: 3/4;
    grid-row: 1/2;
    background-color: var(--Cyan);
}

.cnt4{
    margin-top: 90%;
    height: 90px;
    grid-column: 4/5;
    grid-row: 1/2;
}

.cnt5{
    margin-top: 117%;
    height: 70px;
    grid-column: 5/6;
    grid-row: 1/2;
}

.cnt6{
    margin-top: 53%;
    height: 120px;
    grid-column: 6/7;
    grid-row: 1/2;
}

.cnt7{
    margin-top: 80%;
    height: 80px;
    margin-right: 30px;
    grid-column: 7/8;
    grid-row: 1/2;
}

.mon{
    margin-left: 20px;
}

.tue{
    margin-left: 25px;
}

.wed{
    margin-left: 25px;
}

.thu{
    margin-left: 25px;
}

.fri{
    margin-left: 25px;
}

.sat{
    margin-left: 25px;
}
.sun{
    margin-left: 25px;
}
.div{
    grid-column: 1/8;
    grid-row: 3/4;
    border-top: 2px solid var(--Cream);
    margin-left: 40px;
    margin-right: 40px;
}



.footer{
    grid-row: 3/4;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.f1, .f2 > p{
    color: var(--Medium-brown);
    font-size: 18px;
    margin-bottom: 0px;
    margin-top: 5px;
}

.f1 > h2{
    color: var(--Dark-brown);
    font-size: 50px;
    margin-top: 0px;
}

.f2 > h3{
    color: var(--Dark-brown);
    margin-bottom: 0px;
}

.f1{
    padding-left: 40px;
}

.f2{
    padding-right: 50px;
    margin-bottom: 50px;
    display: grid;
    place-items: end;
}