/*Classes*/

.welcome-image {
  box-shadow: 5px 5px 10px;
  margin: 1rem;
}

.welcome-image:hover {
  transform: scale(1.05);
}

.budget-image {
  box-shadow: 5px 5px 10px;
  margin: 1rem;
}

.budget-image:hover {
  transform: scale(1.05);
}

.budget-widget-instructions {
  background-color: var(--light-secondary-color);
  color: var(--light-primary-color);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.widget-budgeter {
  background-color: var(--light-secondary-color);
  color: var(--light-primary-color);
  padding: 1rem 0.5rem;
  border-radius: 4px;
}

#widget-title {
  margin: 0;
}

.widget-item input,
.widget-item select {
  width: 30%;
  max-width: 300px;
}

.widget-entry-table{
  margin: 0 auto;
  border-spacing: 1rem;
}

.widget-item {
  display: flex;
  flex-flow: row nowrap;
  gap: 0.5rem;
  font-size: medium;
}

.widget-entry p {
  padding: 0 0.5rem;
  display: inline-block;
  font-size: medium;
}

#widget-feedback {
  margin: 0;
}
.add-remove-buttons {
  display: flex;
  flex-flow: row wrap;
  justify-content: end;
  gap: 0.5rem;
}

.why-us-content {
  text-align: center;
}

.why-us-content img {
  width: 50%;
  text-align: center;
}

.why-us-content img:hover {
  transform: scale(1.05);
}

.footer-button-box {
  text-align: center;
  margin-top: 5rem;
}

.footer-button-join-us {
  background-color: var(--light-secondary-color);
  color: var(--light-primary-color);
  border-radius: 6px;
  box-shadow: 5px 5px 10px rgb(52, 52, 52);
  font-size: large;
  padding: 1rem 5rem;
}

.footer-button-join-us:hover {
  border: 2px solid black;
}

/*Media Query for the desktop*/
@media screen and (min-width: 800px) {
  .welcome-image {
    width: 30%;
    float: right;
  }

  .widget-instruction-article {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
  }

  /*The budget-widget-instructions and budget-image will share a line. Can use a grid or use percentages for the spacing - currently doing 60/30%*/
  .budget-widget-instructions {
    width: 60%;
  }
  .budget-image {
    width: 30%;
  }

  .widget-budgeter {
    width: 80%;
    margin: 0 auto;
    padding: 2rem;
  }

  .widget-entry-table{
      border-spacing: 2rem;
  }

  .why-us-image {
    width: 30%;
    max-width: 300px;
    float: left;
  }
  .footer-button-box{
    margin-left: 20%;
  }
}