style.css

/*global*/
:root{
    --dark-blue: #363f5f
}
*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

body{
    background: #f0f2f5;
    font-family:'Poppins', 'sans-serif';
}

.container{
    width: min(90vw, 800px);

    margin: auto;
}

/*Titles========================*/
h2{
    margin-top:3.2rem;
    margin-bottom: 0.8rem;
    color: var(--dark-blue);

    font-weight:normal;
}

/*Header========================*/
header{
    background: #2d4a22;
    padding: 2rem 0 10rem;
    text-align: center;
}

#logo{
    color: #ffff;
    font-weight: 100;
}

/*Balance========================*/
#balance{
    margin-top:-8rem;
}

#balance h2{
    color: white;
    margin-top: 0;
}


/*Cards========================*/
.card{
    background:white;
    padding: 1.5rem 2rem;
    border-radius:0.25rem;

    margin-bottom:2rem;

    color: var(--darkblue);
}

.card h3{
    font-weight: normal;
    font-size:1rem;
}

.card p{
    font-size:2rem;
    line-height: 3rem;

    margin-top: 1 rem;
}

.card.total{
    background: #49aa26;
    color:white;
}

/*Table========================*/
#data-table{
    width:100%;
    border-spacing:  0 0.5rem;
    color: #969cb3;

}

table thead tr th:first-child,
table tbody tr td:first-child{
    border-radius:0.25rem 0 0 0.25rem;
}

table thead th{
    background: white;

    font-weight: normal;
    padding: 1rem 2rem;

    text-align:left;
    
}

table tbody tr{
    opacity:0.7
} 

table tbody tr:hover{
    opacity:1
}



table tbody td{
    background:white;
    
    padding:1rem 2rem;
    
}


td.description{
    color: var(--darkblue);
}


td.income{
    color: #12a454;
}

td.expense{
    color: #e92929;
}

/*Footer========================*/
footer{
    text-align: center;
    padding: 4rem 0 2rem;
    color: var(--dark-blue);
    opacity:0.6
}