/*styling file for website code*/
#h1d{
    color: rgb(51, 51, 4);
    font-family: "sansita","Press Start 2P",sans serif;
    font-size:50px;
    margin: 0%;
    padding: 0%;
}
#h2id{
    color: rgb(34, 47, 45);
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: center;
}
button{ /*navigation button styling*/
    background-color: lightgreen;
    font-size: medium;
    padding: 1rem 2 rem;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 400;
    border-radius:8px;
    border-style:double;
    box-shadow:0 2px rgb(96, 147, 96);
    width: 200px;
    height: 50px;
    border-color: lightgreen;
    text-align:center;
    transition: background 0.2s;
    cursor: pointer;
}
/*navigation button effects*/
button:hover{
    background-color:rgb(49, 171, 49);
    font-size: large;
    transition: 0.2s;
    }
button:active{
    background-color:darkolivegreen;
}
/*nav-bar styling*/
.nav{
    margin-top:0.5rem;
    display:flex;
    flex-wrap:wrap;
    gap:0.2rem;
    justify-items: center;
    justify-content: space-around;
    width: auto;
    height: auto;
    padding:1rem 0 ;
    flex-direction: row;
    align-items: center;
    transition: 0.2s;
}
/*homepage styling*/
.homepage{
    background-color:aliceblue;
    padding: 4rem;
}

.header{
    display:flex;
    flex-direction: column;
    align-items:center;
    padding:1rem 0;
    background-size:120px;
    background-repeat: no-repeat;
    background-position:right;
    justify-content: flex-start;
    gap: 0.5rem;
}
/*Predicta Expense logo styling*/
.site-logo {
    height:100px;
    width:auto;
    vertical-align:middle;
    display:inline-block;
}

@media(max-width: 600px)
{
    .site-logo {
            height:100px;
            margin-right: 0.5rem;
    }
    .header {
        flex-direction: column;
        align-items:center;
        padding: 1 rem;
    }
    .nav{
        display: flex;
        flex-wrap: wrap;
        width:auto;
        align-content: center;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}

.section{
    font-family: sans-serif;
    font-weight:50px;
    color:rgb(23, 44, 27)
    
}
.mainfeatures{
    display: flex;
    flex-wrap: center;
    gap: 1rem;
    justify-content: center;
    margin: 1rem 0;
    color:rgb(33, 45, 45);
    box-sizing:border-box;
    box-shadow: 4px;
    font-family: sans-serif;
}

.features{
    background:rgb(220, 251, 226);
    color:rgb(28, 42, 42);
    border-radius: 10px;
    box-shadow: 0 3px 8px rgb(31, 105, 59);
    padding:2 rem 1.5rem;
    width:300px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    justify-content: space-around;
    text-align: center;
    transition: box-shadow 1s;
}
.features:hover{
    background: rgb(192, 244, 217);
}

@media(max-width: 800px){
    .mainfeatures{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        gap: 1rem;
    }
    .features{
        width: 95%;
    }
}
    
.footer{
    background-color:rgb(43, 71, 42);
    color:whitesmoke;
    text-align: center;
    padding: 0.3rem;
    position: fixed;
    width: 100%;
    bottom: 0;
}

/*Sub files styling*/
.icohome{ /*hompage icon styling*/
    display: flex;
    position:fixed;
    font-size: 1.2rem;
    background-color:rgba(7, 65, 41, 0.794);
    color:rgb(197, 212, 207);
    justify-content: center;
    height:50px;
    width:75px;
    
    align-items: center;
    justify-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.icohome:hover{ /*home icon hover effects*/
     background:rgb(32, 173, 112);
     color:rgb(53, 63, 54);
     transition: 0.2s;
}


#navsub{
    display: flex;
    flex-wrap: wrap;
    margin-top: 0%;
    flex-direction:row;
    justify-self:start;
    justify-content: center;
    width: auto;
    
}

.hsub{
    color: rgb(198, 229, 208);
    font-family: sans-serif;
    font-size: 20px;
    background: fixed;
    background-color: rgb(40, 111, 58);
    display: flex;
    flex-direction: row;
    justify-content: center;
    width:100%;
    margin-right: 0%;
    flex-wrap:nowrap;
    padding: 1rem 0;
    border-radius: 10px;
}
/*budget setting webpage styling*/
.budget-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 100%;
    margin: 2rem auto;
    background: #9fe2a5;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 3px 3px rgb(32, 100, 32);
}
.budget-form label {
    font-weight: bold;
    color:rgb(26, 47, 26);
    font-family: sans-serif;
}
.budget-form input,
.budget-form select {
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 1rem;
    
}
.budget-form button {
    background:rgb(46, 108, 46);
    color:whitesmoke;
    border: none;
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}
.budget-form button:hover {
    background:rgb(22, 178, 144);
}