body {
  background-image: url("../resources/Budget-Planning.png"); 
  background-size: cover; 
  background-position: center;
  color: whitesmoke;
}

.inner, 
main {
  background: linear-gradient(135deg, #2c3e50, #1d5bec);
  background-size: 400% 400%;
  animation: gradient-animation 18s ease infinite;
  border-radius: 0.75rem;
}

.start-page-main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.start-inner {
  width: 90%;
  padding: 60px; 
  border-radius: 1rem;
  background: linear-gradient(135deg, #2c3e50, #1d5bec);
  background-size: 400% 400%;
  animation: gradient-animation 18s ease infinite;
  text-align: center;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.custom-btn {
  align-items: center; 
  background-color: black;
  color: white; 
  margin-right: 10px;
}

.custom-btn-nav {
  display: inline-flex;
  align-items: center; 
  background-color: black;
  color: white; 
  margin-right: 10px;
}

.form-control:focus,
.form-select:focus {
  border-color: rgb(146, 136, 136); 
  box-shadow: 0 0 0 0.25rem rgba(135, 136, 133, 0.25); 
}

.buttons button {
width: 40%;
}

h1.cover-heading {
  font-size: 3rem; 
}

p.lead {
  font-size: 1.5rem; 
}


.navbar-toggler {
  background-color: rgba(169, 169, 169, 0.551);
}

label{
color: black;
}

.error-text {
display: none;
color: hsl(0, 100%, 74%);
text-align: right;
margin-top: 10px;
font-size: .8rem;
font-style: italic;
font-weight: 500;
}

input.error, select.error {
  border: 2px solid hsl(0, 100%, 74%);
}

#limitExceedError {
  color: hsl(0, 100%, 74%);
}

.error-icon {
position: absolute;
top: 0;
right: 20px;
top: 28%;
}

.home-icon,
.register-icon,
.login-icon,
.balance-icon,
.logout-icon,
.settings-icon,
.expense-icon,
.income-icon {
width: 20px; 
height: 20px; 
margin-right: 10px; 
filter: invert(100%) brightness(200%);
vertical-align: middle;  
}

#deleteAccountBtn {
  background-color: black; 
  color: white;
  border-color: white;
}

#deleteAccountBtn:hover {
  background-color: rgb(151, 32, 32); 
  color: white;
}

.modal-title,
.modal-body {
color: black;
}

input.error ~ img.error-icon,
input.error ~ p.error-text {
display: block;
}

.error-text, img.error-icon {
  display: none;
}

.button-details {
display: flex;
justify-content: center;
}

.income-data, .expense-data {
background-image: url("../resources/hand.webp"); 
border-radius: 0.5rem;
padding: 20px;
margin: 20px;
}

.details-section .row {
  flex-wrap: wrap;
}

.expense-chart {
  width: 40%; 
  background-image: url("../resources/hand.webp"); 
  border-radius: 0.5rem;
  padding: 20px;
  margin: 0 auto; 
}

.custom-date-range label,
.edit-form label {
  color: white;
}

.navbar {
  background: rgba(0, 0, 0, 0.5);
}
.limit-info {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.5);
}

.limit-box {
  text-align: center;
  background: rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
  border-radius: 8px;
  width: 45%;
}

.limit-label {
  font-weight: bold;
  color: white;
  margin-bottom: 5px;
}

.limit-info-text, .limit-value-text {
  font-size: 1.2rem;
  color: #ffffffbd;
  font-weight: bold;
}

@media (max-width: 768px) {
  .income-data, .expense-data {
    margin: 0 0 20px 0; 
    width: 100%; 
  }

  .expense-chart {
    width: 100%;
  }

  .inner, 
  main {
    width: 90%; 
    padding: 15px;
  }

  p.lead {
    font-size: 1rem;
  }

  .custom-btn {
    width: 100%; 
    margin-bottom: 15px; 
  }

  .home-icon, 
  .register-icon, 
  .login-icon, 
  .balance-icon {
    width: 18px;
    height: 18px;
  }

}

@media (min-width: 768px) {
  .income-data, .expense-data {
    display: inline-block;
    vertical-align: top;
    width: 48%; 
    margin: 1%; 
  }

}