:root {
    --web-bg-color: #5f249f;
    --web-bg-color-hover: #301252;
}

#map-area {
    position: relative;
}

#map {
    width: 100%;
    height: 83vh;
  }

#left-window {
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 83vh;
    z-index: 1000;
}

#right-window{
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 83vh;
    z-index: 1000;
}

#search {
    margin-left: 7%;
}

footer {
    height: 9vh;
}

.fontAwesome {
    font-family: 'Helvetica', FontAwesome, sans-serif;
}

.header-style {
    font-family: 'Lobster', cursive;
    color: var(--web-bg-color) !important;
    font-size: 30px;
}

.btn-purple {
    background-color: var(--web-bg-color);
    color: white;
    font-weight: bolder;
    padding-left: 30px;
    padding-right: 30px;
}
.btn-purple:hover {
    background-color: var(--web-bg-color-hover);
    color: white;
    font-weight: bolder;
    padding-left: 30px;
    padding-right: 30px;
}

.al-center {
    display: flex;
    align-items: center;
}

.certified {
    opacity: 0;
}

@media only screen and (max-width: 1920px){

    #left-window {
        width: 28%;
    }
    
    #right-window{
        width: 20%;
    }

}

@media only screen and (max-width: 1440px){

    #left-window {
        width: 28%;
    }
    
    #right-window{
        width: 20%;
    }

}

@media only screen and (max-width: 1366px){

    #left-window {
        width: 34%;
    }
    
    #right-window{
        width: 20%;
    }

}

@media only screen and (max-width: 1024px){

    #left-window {
        width: 38%;
    }
    
    #right-window{
        width: 20%;
    }

}