header, footer{
    background-color:#0A2942;
}
main {
    display: flex;
    justify-content: center;
}
#home-container{
    width:100%;
    margin : -70px 0 15px 0;
    background-color: #F7F2EE;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius:15px;
    padding:2% 4% 2% 4%;
    & #col-location, #col-date, #col-people{
        padding:15px;
        display:flex;
        flex-direction:column;
        & input {
            background-color:white;
            border-radius:10px;
            border:none;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            padding:10px;
        }
        & .dropdown-menu{
            & #people-submit-btn{
                margin:2%;
                width:100%;
                background-color:#0A2942;
                padding:10px;
                border-radius:35px;
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                &:hover {
                     background-color: #fff066;
                     color:black;
                }
            }
        }
    }
    & #search-btn{
        margin:1%;
        width:45%;
        background-color:#0A2942;
        padding:25px;
        border-radius:35px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        & a {
            text-decoration:none;
            color:white;
            &:hover{
                color:black;
            }
        }
        &:hover {
             background-color: #fff066;
             color:black;
        }
    }
    & #reset-btn{
        width:45%;
        background-color:gray;
        padding:25px;
        border-radius:35px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        &:hover {
            background-color:#4d4d4d;
            color:white;
        }
    }
    & #houses-container{
        margin: 10px 0 0 0;
        & .col-3{
            width:24%;
            margin:4px;
            background-color:white;
            border:1px solid lightgray;
            border-radius:15px;
            padding: 0 10px 0 10px;
            & #love-btn-div{
                display:flex;
                flex-direction:row;
                justify-content:end;
                & #love-btn{
                    display:flex;
                    flex-direction:column;
                    justify-content:center;
                    padding:8px;
                    margin:10px 3px 0 0;
                    color:black;
                    background-color:white;
                    border:1px solid lightgray;
                    box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                    border-radius:20px;
                    z-index:2;
                    &:hover {
                        background: #ff1a94;
                        color: white;
                    }
                }
            }
            & img {
                margin-top: -40px;
                border-radius:10px;
                height: 20vh;
                z-index:1;
            }
            & a {
                text-decoration:none;
                color:white;
                width:50%;
                margin: 20% 0 0 5px;
                background-color:#0A2942;
                padding:10px 15px 10px 15px;
                border-radius:35px;
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                &:hover {
                     background-color: #fff066;
                     color:black;
                }
            }
            & p {
                text-align:center;
            }
        }
        & .col-6, #search-btn-div{
            & button {
                margin: 5% 0 2% 0;
                width:30%;
                background-color:#0A2942;
                padding:10px;
                border-radius:35px;
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                &:hover {
                     background-color: #fff066;
                     color:black;
                }
            }
        }
    }
}