body{
    font-family: Arial;
    background: radial-gradient(circle at top,#1f4037,#99f2c8);
    margin:0;
    padding:0;
    color:white;
}

/* CONTAINER */

.container{
    max-width:1100px;
    margin:auto;
    padding:20px;
}

h1{
    text-align:center;
    margin-bottom:30px;
}


/* SUMMARY CARDS */

.summary{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:30px;
    flex-wrap:wrap;
}

.summary-card{
    flex:1 1 200px;
    padding:20px;
    border-radius:10px;
    text-align:center;
    background:rgba(0,0,0,0.7);
}

.expense{
    border-left:5px solid #e74c3c;
}

.balance{
    border-left:5px solid #3498db;
}


/* FORM */

.form-card{
    background:rgba(0,0,0,0.7);
    padding:25px;
    border-radius:10px;
    margin-bottom:30px;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

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

label{
    margin-bottom:6px;
}

input,select,textarea{
    padding:10px;
    border-radius:5px;
    border:none;
}

textarea{
    height:120px;
}

.full-width{
    grid-column:1 / span 2;
}


/* BUTTONS */

.buttons{
    margin-top:20px;
}

.btn{
    padding:10px 18px;
    border:none;
    border-radius:6px;
    cursor:pointer;
}

.save{
    background:#2ecc71;
    color:white;
}

.cancel{
    background:#e74c3c;
    color:white;
}


/* TABLE */

.table-card{
    background:rgba(0,0,0,0.7);
    padding:25px;
    border-radius:10px;
}

.table-wrapper{
    overflow-x:auto;
}

table{
    width:100%;
    border-collapse:collapse;
    margin-top:15px;
}

th,td{
    padding:12px;
    border-bottom:1px solid gray;
    text-align:left;
}

tr:hover{
    background:rgba(255,255,255,0.1);
}



/* MOBILE */
 
@media (max-width:768px){

.summary{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.summary-card{
    width:85%;
    max-width:320px;
}

}

#footer{
    flex:1 1 200px;
    padding:20px;
    border-radius:10px;
    text-align:center;
    background:rgba(0,0,0,0.7);
    color: white;
}