body {
    background-image: url(./img/adib-sulthon-firdaous-PUj12qXt6fw-unsplash.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(94, 97, 93, 0.9);
    font-family: "Montserrat", sans-serif;
}

input {
    font-family: "Montserrat", sans-serif;
    padding: 5px;
    border-radius: 10px;
    transition: 2s;
}

input:hover {
    background-color: #78DEC7;
    cursor: pointer;
}

.tip {
    font-family: "Montserrat", sans-serif;
    padding: 5px;
    border-radius: 10px;
    transition: 2s;
}

.tip:hover {
    background-color: #78DEC7;
    cursor: pointer;
}


.dateContainer {
    display: flex;
    flex-direction: column;
}

.btn {
    background-color: #78DEC7;
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-family: 'Montserrat', sans-serif;
    flex: 1;
    margin-top: 10px;
}

.btn:hover {
    cursor: pointer;
}

.mainContainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.container {
    display: flex;
    background-color: #A04747;
    flex-wrap: wrap;
    width: 70%;
    opacity: 0.7;
    border-radius: 15px;
}

h1 {
    color: #EEDF7A;
    font-size: 45px;
    align-self: center;
}

h3 {
    color: #EEDF7A;
}

.dateSalary {
    display: flex;
    flex-direction: column;
}

#totalCategory {
    display: flex;
    justify-content: space-around;
}

#householdExpenses, #investments, #security, #entertainment, #saving {
    margin: 20px;
    background-color: #78DEC7;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid black;
    justify-content: space-around;
    width: 40%;
    height: 60%;
}

@media all and (max-width: 500px) {
    .mainContainer {
        width: 90%;
    }
    .container{
        width: 100%;
    }
    #totalCategory {
        flex-wrap: wrap;
    }
        #householdExpenses,
        #investments,
        #security,
        #entertainment,
        #saving {
        flex: 1 1 calc(50% - 20px);
        max-width: 82px;
        max-height: 80px;
        margin: 10px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        }
    h1 {
        font-size: 25px;
        padding-left: 10px;
    }
    h3, .nameExpenses {
        padding-left: 10px;
    }
    input, select {
        margin-left: 10px;
    }
    
}