body{
    box-sizing: border-box;
}

#nav-bar {
    /* background-image: linear-gradient(to right, blue, white); */
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    overflow: auto;
    background-color:#b9d6ea;
}



#bank-card-cash-container {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border: none;
  }
  
  #bank-card-cash-container:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  
  .container {
    padding: 2px 16px;
  }

.button {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
  }
  
  /* On mouse-over, add a deeper shadow */
button:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }

  #bank-card-cash-container h1 {
      font-weight: bold;
  }

.menu {
    float: right;
    float: center;
    font-size: 24px;
    font-style: italic;
    justify-content: center;
    margin-left: auto;
    margin-right:auto;
    margin-bottom: auto;
    margin-top:auto;
    padding-top: auto;
}


#BudgetBallers {
    float: left;
    float: center;
    font-size: 24px;
    content: center;
    margin-top: 5px;
    font-style: italic;
}

.first-card {
    text-align: center;
    background-color: transparent;
    position: relative;
    color: white;
    margin: 0%;
    padding-left: 0%;
    padding-right:0%
}

.first-card h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
}

.first-card p {
    position: absolute;
    top: 50%;
    left: 43%;
    transform: (-25%, -50%);
}

.first-card button {
    position: absolute;
    top: 65%;
    left: 47%;
}

#background {
    justify-content: center;
    position: relative;
    top: 10px;
    padding-left: 12%;
    padding-right: 12%;
}

#Balance-Container {
    justify-content: center;
    text-align: center;
    background: transparent;        
    color: black;
    font-size: 58px;
    background-color:lightgoldenrodyellow;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

#Balance-Container h1 {
    font-weight: bold;
    font-size: 50px;
}

.IncomesOutcomes p {
font-size:34px;
font-weight:bold;
}

#Incomes-Container {
    background-color:green;
    opacity: 75%;
    border-radius: 10px;
    height: auto;
    padding-bottom: auto;
    text-align: center;
    font-size: 24px;
    color: white;
}

#Incomes-Container table {
    color:black;
    margin-left:auto;
    margin-right:auto;
    margin-top: auto;
    width: 90%;
    table-layout: fixed;
    font-size: 18px;
    text-align: center;
    line-height: auto;
}

#Incomes-Container th {
    width: auto;
}

#Outcomes-Container {
    justify-content: center;
    text-align: center;
    background: transparent;
    font-size: 24px;
    background-color: red;
    opacity: 60%;
    color: white;
    border-radius: 10px;
}

#Outcomes-Container table {
    color:black;
    margin-left:auto;
    margin-right:auto;
    margin-top: auto;
    width: 90%;
    table-layout: fixed;
    font-size: 18px;
    text-align: center;
    line-height: auto;
}

#Outcomes-Container table th {
    width: auto;
}

#Outcomes-Container table th.Outcomes-Table-Place {
    width: 16%;
}

#Outcomes-Container table th.Outcomes-Table-Category {
    width: 24%;
}

#Outcomes-Container th {
    width: auto;
}

td #name {
    margin: 300000px;
}


.Main-Container{
    text-align: center;
}

img {
    margin-top: auto;
    margin-bottom:auto;
}

p {
    font-size: 40px;
}

#Bank-Container {
    background-color: #CCCCFF;
    opacity: 75%;
    padding-bottom: 10px;
    
}


#Bank-Container p {
    font-size: 40px;
}

#dollar-sign {
    margin-left:100%;
    width:auto;
    height: auto;
    margin-top:10%;

}

#balance-dollar-sign {
    margin-left:175%;
    width:auto;
    height:auto;
}

#Bank-Amount {
    margin-right: 35%;
}

#Balance-Amount{
    margin-right: 25%;
}

#Cards-Container {
    background-color: silver;
    opacity: 75%;
    padding-bottom: 10px;
    
}

#Cards-Container p {
    font-size: 40px;
}

#Card-Amount {
    margin-right: 30%;
}

#Cash-Container {
    background-color:lightgreen;
    opacity: 75%;
    padding-bottom: 10px;
}

#Cash-Container p {
    font-size: 40px;
}

#Cash-Amount {
    margin-right: 30%;
}

/*added container with background image*/
.container-full {
    background-color: #417DB0;
    color:black;
    font-weight:bold;
    border: 1px black solid
}

/*added month-name styling w/google fonts*/
#month-name {
    color:blue;
    /* font-family: , cursive; */
}




#modal-button-submit,#modal2-button-submit,#modal3-button-submit {
    background-color: limegreen;
    margin-left: 20px;
    margin-bottom: auto;
    color: white;
    font-size: 20px;
    padding: 8px;
    border-radius: 10px;
}

#modal-button-cancel,#modal2-button-cancel,#modal3-button-cancel {
    background-color: red;
    margin-right: 20px;
    margin-bottom: 5px;
    float: right;
    color: white;
    font-size: 20px;
    padding: 8px;
    border-radius: 10px;
}

#Budget-Button {
    margin-top: auto;
    margin-bottom:auto;
    margin-left: 43%
}

progress {
    height: 100px;
    width: 100%;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    float: center;
}

#progressBar {
    margin-top: 2%;
    margin-bottom:auto;
}

label {
    font-size:xx-large;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color: white;

}

.modal-display {
    display: none; /* Hidden by default */
}

#modal, #modal2, #modal3 {
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
#modal-content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    text-shadow: black .5px .5px;
    color:white;
    margin: auto;
    margin-bottom: auto;
    width: 50%;
    background-color: indianred;
    border: 3px solid black;
    border-radius: 25px;
    padding: 20px;
    z-index: -1;
    width: 600px;
}
#modal-content h5 {
    font-size:30px;
    font-weight: bold;
}

#modal-content p {
    font-size:24px;
    font-weight: bold;
    text-shadow: black .5px .5px .5px;
}

#modal-content2 {
    font-family: Arial, Helvetica, sans-serif;
    /* text-shadow: white .5px .5px; */
    font-size: 24px;
    color: white;
    text-shadow: black .25px .25px;
    margin: auto;
    margin-bottom: auto;
    width: 50%;
    background-color:#06a94d;
    border: 3px solid black;
    border-radius: 25px;
    padding: 20px;
    z-index: -1;
    width: 600px;
}

#modal-content2 h5 {
    font-size:30px;
    font-weight: bold;
}

#modal-content2 p {
    font-size:24px;
    font-weight: bold;
    text-shadow: black .5px .5px .5px;
}

#modal-content3 {
    font-family: Arial, Helvetica, sans-serif;
    /* text-shadow: white .5px .5px; */
    font-size: 24px;
    color: white;
    text-shadow: white .25px .25px;
    margin: auto;
    margin-bottom: auto;
    width: 50%;
    background-color: #ffdb58;
    border: 3px solid black;
    border-radius: 25px;
    padding: 20px;
    z-index: -1;
    width: 600px;
}

h5 {
    text-align: center;
    text-shadow: black .5px .5px .5px;
}

#modal-content3 h5 {
    font-size:30px;
    font-weight: bold;
}


.calendar-container-div {
    margin: auto;
    width: 78%;
    margin-top: 50px;
}

#previous-month {
    width: auto;
    height: 50px;
    border: 2px solid black;
    border-radius: 5%;
    margin-top:10%;
    line-height:1px;
    font-weight:bold;
    text-align:center
}

#next-month {
    width: auto;
    height: 50px;
    border: 2px solid black;
    border-radius: 5%;
    margin-top:10%;
    line-height:1px;
    font-weight:bold;
    text-align:center
}

.calendar-heading {
    font-size: 35px;
    padding: 25px;
    border: 3px solid black;
    background-color: #3ADB76;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.weekday {
    text-align: center;
    border: 1px solid black;
    width: 150px;
}

.empty {
    border: 2px solid black;
    width: 150px;
    height: 100px;
    padding-left: 5px;
    padding-top: 5px;
}

.calendar-ptag {
    font-weight:bold;
    text-align: center;
    border: 1px solid black;
    background-color: whitesmoke;
    border-radius: 15%;
    width: 25px;
    height: 25px;
    float: left;
    margin-bottom: 100%;
}


div.budget-entertainment-card {
    background-color: lightgoldenrodyellow;
}

div.budget-travel-card {
    background-color: lightgreen;
}

div.budget-food-card {
    background-color: lightblue;
}

div.budget-home-card {
    background-color: lightgray;
}

div.budget-car-card {
    background-color: lightsalmon;
}

div.budget-cards {
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border: none;
}

div.budget-cards:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

div.budget-cards label {
    text-align: center;
    
}

.budget-amount-label {
    text-align: right;
}
 
div.budget-cards p {
    font-size: 24px;
    font-weight: 600;
}

div.budget-cards label h3 {
    font-weight: 600;
}

@media all and (max-width:500px) {
    body{
        text-align: center;
        float: inline-start;
    } 
}