:root {
    --box-shadow: 0px 1px 4px 1px rgba(199,199,199,1);
    --white: rgb(255, 255, 255);
    --income: rgb(50, 172, 243);
    --expense: rgb(236, 108, 146);
}

body {
    font-family: 'Rubik', 'sans-serfi';
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 220, 122);
    background-repeat:no-repeat;
    color: rgb(155, 56, 10);
   
}
.content {
    padding: 5px
}
.app h1 {
    text-align: center;
    
}

h2 {
    font-size: 1.2em;
    text-transform: uppercase;
}

.header-container img {
    width: 350px;
}
/* Mobile devices (portrait and landscape) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	.header-container img {
		width: 350px;
	}
  }
  
  /* Tablets (portrait and landscape) */
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	.header-container img {
		width: 800px;
	}
  }
  
  /* Desktops and laptops */
  @media only screen and (min-width: 1224px) {
	.header-container img {
		width: 700px;
	}
  }
  
  /* Large screens */
  @media only screen and (min-width: 1824px) {
	/* CSS rules */
  }
.balance-container #balance {
    font-size: 1.5em;
    background-color: var(--white);
    padding: 10px;
    border-radius: 2px;
}
.cashflow-container { 
    display: flex;
    background-color: var(--white);
    color: black;
    box-shadow: var(--box-shadow);
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
    padding-top: 20px;
    margin-top: 20px;
    border-radius: 2px;

}
.income-container {
    border-right: 1px solid #cccccc;
    padding-right: 20px;
}
.expense-container {
    padding-left: 20px;
}

#income {
    font-size: 1.3em;
    color:var(--income)
}

#expense {
    font-size: 1.3em;
    color: var(--expense);

}
.transaction-container {
    margin-top: 40px;
    
}

#transaction { 
    list-style: none;
    margin:0;
    padding:0;

}
#transaction li { 
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: var(--box-shadow);
    color:black;
    background-color: var(--white)
}

#transaction li span {
    display:inline-block;
    color: var(--white);
    padding: 5px;
    
    border-radius: 3px;
    margin-right: 5px;

}

#transaction li .income-amt {
   background-color: var(--income);
}
#transaction li .expense-amt { 
   background-color: var(--expense);
}

#transaction li button {
   padding: 5px 10px 5px 10px;
   border:none;
   border-radius: 2px;
   background-color: red;
   color: white;
   font-weight: bold;
}
#transaction li button:hover {
    opacity: 90%;
 }

.form-container {
    margin-top: 40px;
}

.form-container form {
    display: flex;
    flex-direction: column;

}

.form-container form label {
   padding-bottom: 10px;

}
.form-container form input { 
    height: 25px;
    border-radius: 5px;
    border: 2px;
    padding:5px;
    margin-bottom:10px;
}

.form-container form button {
    border:none;
    border-radius: 5px;
    padding:10px;
    margin-bottom: 10px;
    font-size: 1.2em;
    text-transform: uppercase;
    color: var(--white);
}

#incomeBtn {
    background-color: var(--income);
}
#expenseBtn {
    background-color: var(--expense);
}
#incomeBtn:hover ,#expenseBtn:hover {
    opacity: 90%;
}