styles.css

/* Estilos básicos, puedes personalizarlos según tus preferencias */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* styles.css */

/* Estilos para el encabezado */
header {
background-color: #c5d81b;
color: #101110;
text-align: center;
padding: 20px 0;
}

/* Estilos para el formulario de gastos */
#expense-form {
margin-bottom: 20px;
}

#expense-form input,
#expense-form select,
#expense-form button {
margin: 5px;
padding: 8px;
font-size: 16px;
}

#expense-form button {
background-color: #9cb931;
color: rgb(0, 0, 0);
border: none;
cursor: pointer;
}

#expense-form button:hover {
background-color: #04fa10;
}

/* Estilos para la lista de gastos */
.expense-item {
margin-bottom: 5px;
padding: 10px;
border: 1px solid #3ae025;
background-color: #8b8a8a2f;
}

.expense-item p {
margin: 0;
}

.expense-item button {
margin-left: 10px;
padding: 5px 10px;
border: none;
cursor: pointer;
}

.expense-item button:hover {
background-color: #2320ec4d;
}
body {
  background-image: url('fondo2.webp');
  background-size: cover; /* Ajusta la imagen al tamaño de la ventana */
  /* Otros estilos para el fondo, como color de fondo de respaldo si la imagen no se carga */
}