html {
    height: 100%;              /* for the page to take full window height */
    box-sizing: border-box;    /* to have the footer displayed at the bottom of the page without scrolling */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    /* padding: 10px 10px; */
    background-color: #f5f5e1; /* Pastel yellow background */
    
    position: relative;        /* for the footer to move with the page size */
    min-height: 100%;          /* for the footer to be at the bottom */
    padding-bottom: 6rem;      /* Space available between last element and bottom border of the page */
}

header {
    background-color: #bee1e6; /* Pastel blue */
    color: #333; /* Dark text color */
    padding: 10px 20px;
    text-align: center;
    height: 50px;
}
nav {
    background-color: #d9ead3; /* Pastel green */
    padding: 5px 20px;
    height: 20px;
}
nav a {
    color: #333; /* Dark text color */
    text-decoration: none;
    margin-right: 20px;
}
nav a:hover {
    text-decoration: underline;
}

footer1 {
    position: absolute;
    /* left: 0;
    bottom: 0;
    height: 30px;
    width: 100%; */
    /* clear: both; */
    /* position: fixed; */
    /* height: 200px; */
    /* margin-top: -600px; */
    bottom: 0;
}

footer2 {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: relative;
    font-size: small;
    width:100%;
}

footer {
    /* background-color: #000; */
    /* color: #FFFFFF; */
    /* font-size:.8em; */
    /* margin-top:25px; */
    /* padding-top: 15px; */
    /* padding-bottom: 10px; */
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    }

/* Custom CSS to override Bootstrap's default behavior */
@media (max-width: 991.98px) {
    .navbar-expand-lg .navbar-nav {
        display: block !important;
        text-align: center;
    }
    .navbar-expand-lg .navbar-nav .nav-item {
        display: inline-block;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        display: inline-block;
        padding: 0.5rem 1rem;
    }
}

.align-button-img {
    height:32px;    
    width: auto !important; /*Keep the aspect ratio of the image*/  
    min-width: 32px;
}

.input-filled {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    /* border: solid 1px #ff0000; */
}