body {
     margin: 0; 
     padding: 0; 
     font-family: 'Open Sans', sans-serif;
    }
html, body, #map {
    z-index: 1;
    height: 100%; 
}
#mapContainer{
    width: 100vw;
    height: 100vh;
    position: absolute;
    bottom: 0;
}

/*Nav Bar*/

#nav_bar{
    z-index: 2;
    position: absolute;
    top: 0rem;
    left: 0rem;
    height: 3.25rem;
    width: 100vw;
    max-width: 100vw;
    background-color:white ;
    border-style: solid;
    border-width: 3px;
    display: flex;
    justify-content:space-between;
    align-items: center; 
}
#dropdown_menu_icon{
    display: none;
}

#london_parkive_title{
    margin-left: 1.5rem;

    font-weight:800;
    font-size: 2rem;
    color: black;
}
#nav_options{
    z-index: 3;
    display: flex;
    position: absolute;
    top: 0.6rem;
    right: 1.5rem;
    
}
.dropdown_box{
    display: flex;
   
}
.nav_item{
    font-weight: 600;
    font-size: 1.5rem;
    color: black;
    text-decoration: none;
    padding: 0.2rem;
    margin-left: 0.4rem;
    margin-right: 0.4rem;
}
.nav_item:hover{
    color: #50B848;
}
.active_nav_item{
    color: #50B848;
}
.search_bar{
    z-index: 3;
    height: 2.5rem;
    width: 20rem;
    border-radius: 0.75rem;
    border-style: solid;
    border-color: black;
    border-width: 2.5px;
    font-size: 1rem;
    padding-left:1rem;
}
.search_bar::placeholder{
    color: #C0C0C0C0;
}
.search_bar::-webkit-search-cancel-button{
    -webkit-appearance: none;
}
#map_search_bar_container{
    position: relative;
}
#map_view_search_bar{
    position: absolute;
    top: 4.3rem;
    left: 1rem;
}
#search_bar_results{
    position: absolute;
    top: 6.2rem;
    left: 1rem;
    width: 19.7rem;
    max-height: 20rem;
    overflow:scroll;
    overflow-x:hidden;
    background-color: white;
    border: 2.5px solid black;
    border-bottom-left-radius: 0.7rem;
    border-bottom-right-radius: 0.7rem;
    display: none;
    z-index: 2;
}
#search_bar_results::-webkit-scrollbar {
    width: 0.2rem;
}

#search_bar_results::-webkit-scrollbar-track {
    background-color: #ffffff;
    margin-bottom: 0.4rem;
}

#search_bar_results::-webkit-scrollbar-thumb {
    background-color: black;
    border-radius: 0.2rem;
    height: 4rem;
}

.searchResultsRow{
    padding: 1rem;
    border-bottom: solid 1px black;
    cursor: pointer;
}
.searchResultsRow:nth-child(1){
    padding-top: 1.5rem;
}
.searchResultsRow:hover{
    color:#50B848;
    background-color:#e8e8e8;
}
.searchResults{
    font-weight: 700;
}
#view_mode_buttons_container{
    z-index: 2;
    position: absolute;
    top: 4rem;
    right: 1rem;
    display: flex;
    justify-content:flex-end;
    align-items: center;
}
.view_mode_buttons{
    width: 8rem;
    height: 3.2rem;
    border-radius: 1rem;;
    background-color:white;
    border-color:black;
    border-style:solid;
    border-width: 3px;;
    display: flex;
    justify-content:center;
    align-items: center;
    margin: 0.2rem;
    font-weight:700;
    font-size: 1.2rem;
    color: black;
    text-align: center;
    line-height: 1.1rem;  
}
.view_mode_buttons:hover{
    background-color: black;
    color: #50B848;
}

.view_mode_active{
    background-color:black; 
    color: white;
}
.key_row{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0.1rem;
}
.key_square{
    z-index: 3;
    width: 1rem;
    height: 1rem;
    margin: 0.1rem;
    margin-left: 0.2rem;
    background-color:aqua;
}
.key_description{
    font-size: 0.9rem;
    font-weight:lighter;
    margin-left: 0.3rem;
}
#status_keys{
    z-index: 2;
    width:fit-content;
        height:fit-content;
    background-color: white;
    display: flex;
    flex-direction:column;
    justify-content: center;
    position: absolute;
    top: 9rem;
    right: 1rem;
}
#yearOpened_keys{
    z-index: 2;
    width:fit-content;
    height:fit-content;
    background-color: white;
    display: none;
    flex-direction:column;
    justify-content: center;
    position: absolute;
    top: 9rem;
    right: 1rem;
}
#alterations_keys{
    z-index: 2;
    width:fit-content;
    height:fit-content;
    background-color: white;
    display: none;
    flex-direction:column;
    justify-content: center;
    position: absolute;
    top: 9rem;
    right: 1rem;
}
/*launch popup*/
#launchPopup_container{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#launchPopup{
    z-index: 10;
    width: 60vw;
    height: 65vh;
    background-color: white;
    box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.3);
    position: relative;
    display: none;

}
#launchPopup_close_icon{
    width: 1.4rem;
    height: 1.4rem;
    padding: 0.5rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: block;
}
#launchPopup_close_icon:hover div{
    background-color:#50B848;
}
.launchPopup_close_icon_line1{
    width: 1.3rem;
    height:0.25rem;
    border-radius: 1rem;
    background-color: black;
    transform: translate(0, 11px) rotate(45deg);
}
.launchPopup_close_icon_line2{
    width: 1.3rem;
    height:0.25rem;
    border-radius: 1rem;
    background-color: black;
    transform: translate(0, 7px) rotate(-45deg);
}
#launchPopup_content{
    width:100%;
   height: 100%;
   padding-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: top;
    overflow: auto;
}
.launchPopup_h1{
    font-size: 2rem;
    font-weight: 700;
    color:#50B848;
    margin: 1rem;
    width: 75%;
    text-align: center;
}
.popUp_subheading{
    font-size: 1.1rem;
}
.launchPopup_bold{
    font-weight: 700;
    width: 75%;
    font-size: 0.9rem;
}
#launchPopup img{
    width: 50%;
    margin: 1rem;
}
.launchPopup_text{
    width: 75%;
    font-size: 0.9rem;
}
/*park popups*/

.maplibregl-popup-content{
    width: fit-content;
    border-radius: 1rem;
    box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.3);
}
.maplibregl-popup-close-button{
    height: 2rem;
    width: 2rem;
    font-size: 1.5rem;
}
.popup_container{
    display: flex;
    flex-direction:column;
    align-items: center;
}
.popup_park_name{
    margin-top: 0.4rem;
    margin: 0.2rem;
    font-size: 1.2rem;
    text-align: center;
}
.popup_coordinates{
    text-align: center;
    margin: 0.1rem;
}
.popup_info_section{
   margin: 0.4rem;
   width: 14rem;
}
.popup_info_row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2.2rem;
    margin: 0.1rem;
}
.popup_info_type{
    font-size: 1rem;
}
.popup_info_box{
    width: 7rem;
    height:1.7rem;
    border-radius: 0.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.popup_opening_period{
    background-color: aqua; 
}
.pop_up_status{
    background-color:aqua;
}
.popup_info_text{
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    color: black;
}
#tell_me_more_button{
    width: 8rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    border-style:none;
    font-size: 1rem;
    font-weight: 800;
    background-color: black;
    color: white;
    margin: 0.2rem;
    margin-top: 0.4rem;
}
#tell_me_more_button:hover{
    color: #50B848;
}

#parks_information_overlay_container{
    width: 50vw;
    max-height: 93vh;
    background-color:white;
    z-index: 3;
    position: absolute;
    top: 3.5rem;
    border-width: 3px;
    border-color: black;
    border-style: solid;
    display: none;
}
#parks_information_overlay_content{
    overflow: scroll;
    height: 93vh;
}
#park_info_overlay_top_row{
    display: flex;
    align-items: center;
    justify-content: center;
}
#park_info_overlay_header{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}
#parks_info_backButton{
    flex: 1;
    width: 4.4rem;
    height: 2.8rem;
    margin: 0.4rem;
    margin-left: 2rem;
    margin-top: 1rem;
}
#parks_info_backButton:hover div{
    background-color:#50B848;
}
#arrow_line_1, #arrow_line_3{
    width: 1.2rem;
    height:0.3rem;
    background-color: black;
    border-radius: 5rem;
}
#arrow_line_2{
    width: 1.5rem;
    height: 0.3rem;
    background-color: black;
    border-radius: 5rem;
    transform: translate(5px, 14px)
}
#arrow_line_1{
    transform: translate(0, 13px) rotate(-45deg);
}
#arrow_line_3{
    transform: translate(0, 14px) rotate(45deg);
}
#park_info_overlay_coordinates{
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-left: 1.4rem;
}
#park_info_overlay_park_name{
    flex: 5;
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
    max-width: 80%;
    text-align: center;
    
}
#park_info_overlay_other_names{
    font-size: 1rem;
    margin: 0.8rem;
    margin-left: 6rem;
    margin-right: 3rem;
    max-width: 80%;
}
#park_info_overlay_coordinates{
    font-size: 1rem;
    text-align: center;
}
#blank_flex_box{
    flex: 1;
}
#park_info_overlay_info_summary_section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1rem;
}
.park_info_overlay_info_summary_row{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 15rem;
    margin: 0.4rem;
}
.park_info_overlay_info_summary_type{
    font-size: 1rem;
}
.park_info_overlay_info_summary_box{
    width: 7rem;
    height:1.6rem;
    background-color: cyan;
    border-radius: 0.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.park_info_overlay_info_summary_text{
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    color: black;
}
.park_info_overlay_section_divider{
    width: 95%;
    border-style: solid;
    border-width:1px;
}
.park_info_overlay_detailed_info_section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.park_info_overlay_title_row{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.park_info_overlay_toggle_arrow{
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.4rem;
}
.park_info_overlay_toggle_arrow:hover div{
    background-color:#50B848;
}
.park_info_overlay_toggle_arrow_line_1, .park_info_overlay_toggle_arrow_line_2{
    width: 0.6rem;
    height:0.2rem;
    background-color: black;
    border-radius: 5rem;
}
.park_info_overlay_toggle_arrow_line_1{
    transform: translate(1px, 10.5px) rotate(45deg);
}
.park_info_overlay_toggle_arrow_line_2{
    transform: translate(1px, 12px) rotate(-45deg);
}
.changeHistoryToggle .park_info_overlay_toggle_arrow_line_1{
    transform: translate(1px, 12.5px) rotate(45deg);
}
.changeHistoryToggle .park_info_overlay_toggle_arrow_line_2{
    transform: translate(6px, 9px) rotate(-45deg);
}
.park_info_overlay_detailed_info_section_title{
    font-size: 1.4rem;
    font-weight:700;
    text-align: center;
    margin: 1rem;
}
.park_info_overlay_detailed_info_section_text{
    width: 80%;
    font-size: 0.9rem;
}
#park_info_overlay_history_text{
    display: block;
}
/* List Page */
#list_view_search_bar{
    position: absolute;
    top: 6rem;
    left: 3rem;
}
#clear_filter_text{
    font-size: 1rem;
    font-weight: 600;
}
#table_container{
    display: flex;
    justify-content: center;
    position: absolute;
    top: 13rem;
    left: 1rem;
}
#london_parkive_list_view{
    width: 90vw;
    margin-left: 2rem;
    font-size: 1rem;
    font-weight: 600;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 1.5rem;  
}

#list_view_table_header{
    text-align: center;
    border-bottom: 2px solid black;
}

#list_view_table_header th:nth-child(1){
    width: 25%;
    text-align: left;
    border-right: 2px solid black;
}
#list_view_table_header th:nth-child(2){
    width: 10%;
    border-right: 2px solid black;
}
#list_view_table_header th:nth-child(3){
    width: 10%;
    border-right: 2px solid black;
}
#list_view_table_header th:nth-child(4){
    width: 12%;
    border-right: 2px solid black;
}
#list_view_table_header th:nth-child(5){
    width: 15%;
    border-right: 2px solid black;
}
#list_view_table_header th:nth-child(6){
    width: 15%;
}

#london_parkive_list_view tr{
    height: auto;
}
#london_parkive_list_view td{
    text-align: center;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}
#london_parkive_list_view td:nth-child(1){
    text-align: left;
}
#london_parkive_list_view td:nth-child(1):hover{
    color:#50B848;
    cursor: pointer;
}
#london_parkive_list_view td:nth-child(6){
    border-right: none;
}
.list_view_box_container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.list_view_box{
    width: 8rem;
    height: 1.5rem;
    border-radius: 0.8rem;
    background-color: aqua;
}
.list_view_box_container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
}

#mobile_table_container{
    display: none;
}
.list_view_table_thContainerContainer{
    display: flex;
    justify-content: center;
}
.list_view_table_thContainer{
    display: flex;
    align-items: center;
}

    
.list_view_table_header_cell_text{
    margin-left: 0.8rem;
}
.lvt_filter_dropdown_container{
    position: relative;
    cursor: pointer;
}
.filterIcon{
    width: 1rem;
    height: 1rem;
    /* background: cyan; */
    margin: 0.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.filterIcon:hover div{
    background-color:#50B848;
}
.filterIconLine1{
    width: 0.6rem;
    height: 0.11rem;
    border-radius: 0.1rem;
    background-color: black;
   
}
.filterIconLine2{
    width: 0.4rem;
    height: 0.11rem;
    border-radius: 0.1rem;
    background-color: black;
    transform: translate(0, 1px);
}
.filterIconLine3{
    width: 0.25rem;
    height: 0.11rem;
    border-radius: 0.1rem;
    background-color: black;
    transform: translate(0, 2px);
}
.list_view_table_filter_options_container{

    width: 11rem;
    height: fit-content;
    border-radius: 1rem;
    border-width: 0.1rem;
    border-style: solid;
    background-color: white;
    position: absolute;
    right: -2.5rem;
    top: 2.2rem;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
  
}
.list_view_table_filter_options_container:before{
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translate(130%, -100%) rotate(180deg);
    display: block;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: black;
}
.list_view_table_filter_options_container:after{
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translate(130%, -480%) rotate(180deg);
    display: block;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: white;
}
#name_Filter_Container{
    /* height: 4rem; */
    display: none;
}
#name_Filter_Container:after{
    transform: translate(130%, -260%) rotate(180deg);
}
#borough_Filter_Container{
    /* height: 15rem; */
    display: none;
}
#borough_Filter_Container:after{
    transform: translate(130%, -400%) rotate(180deg);
}
#size_Filter_Container{
    display: none;
}
#size_Filter_Container:after{
    transform: translate(130%, -290%) rotate(180deg);
}
#status_Filter_Container{
    /* height: 7rem; */
    display: none;
}
#status_Filter_Container:after{
    transform: translate(130%, -630%) rotate(180deg);
}
#period_opened_Filter_Container{
    /* height: 11rem; */
    display: none;
}
#alterations_Filter_Container{
    display: none;
}
#period_opened_Filter_Container:after{
    transform: translate(130%, -1200%) rotate(180deg);
}
#alterations_Filter_Container:after{
    transform: translate(130%, -630%) rotate(180deg);
}
.lvt_filter_dropdown_content{
    margin: 0.2rem;
    display: flex;
    flex-direction: column;
}
.lvt_filter_sort_section{
   margin-bottom: 0.3rem;
}
.lvt_filter_filter_with_search_section{
    margin-left: 0.4rem;
    margin-bottom: 0.4rem;
}

.lvt_filter_content_row{
    display: flex;
    align-items: center;
    margin: 0.1rem;
}
.lvt_filter_checkbox{
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.3rem;
    background-color: white;
    border: solid 0.12rem black;
    margin-left: 0.4rem;
    margin-right: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lvt_filter_checkbox_active{
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.2rem;
    background-color:#50B848;
    display:none;
}
.lvt_filter_ascending_arrow{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid black;
    margin: 0.2rem;
}
.lvt_filter_descending_arrow{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid black;
    margin: 0.2rem;
    transform: rotate(180deg);
}
.lvt_filter_key{
    font-size: 0.9rem;
    font-weight: 500;
}
.lvt_filter_icon{
    width: 1rem;
    height: 1rem;
    margin: 0.3rem;
}
.lvt_filter_header{
    font-size: 1rem;
    
}
.lvt_filter_clear_filter{
    font-size: 0.8rem;
    font-weight: 400;
    margin: 0.2rem;
    margin-left: 1rem;
}
.lvt_filter_search_bar{
    width: 9.4rem;
    height: 1.5rem;
    border-radius: 0.5rem;
    border: solid 0.11rem black;
    color: black;
    font-size: 0.8rem;
    padding: 0.6rem;
    margin-top: 0.5em;
    margin-left: 0.3rem;
    margin-bottom: 0.4rem;
}
.lvt_filter_search_bar::placeholder{
    color: #C0C0C0;
}

/*About Page */
#about_page_content{
    position: absolute;
    top: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
}
.about_page_h1{
    font-size: 2rem;
    color:#50B848;
    width: 50vw;
    margin: 0.5rem;
    margin-top: 4rem;
    margin-bottom: 2rem;
    text-align: center;
}
.about_page_subheading{
    width: 50vw;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0.5rem;
}
.about_page_bold_text{
    font-weight: 650;
    font-size: 1rem;
    margin: 0.5rem;
    width: 50vw;
}
.about_page_text{
    width: 50vw;
    margin: 0.5rem;
    font-size: 1rem;
}
.about_page_intext_link{
    color:#50B848;
}

/*Media Queries*/

@media screen and (max-width: 900px){
    #london_parkive_title{
        margin-left: 0.5rem;
        font-weight:800;
        font-size: 1.6rem;
        color: black;
        line-height: 1.5rem;;
    }
    #nav-bar{
        width:99vw;
        max-width: 99vw;
        height: 2.5rem;
        border-width: 2px;
    }
    #dropdown_menu_icon{
        z-index: 3;
        position: absolute;
        top: 1.2rem;
        right: 0.5rem;
        width: 2rem;
        height: 1.2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .dropdown_menu_lines{
        width: 1.5rem;
        height:0.2rem;
        border-radius: 1rem;
        background-color: black;
    }
    #top_line, #middle_line, #bottom_line{
        transition: 0.5s;
    }
    .changeDropdown #top_line{
        transform: translate(0, 11px) rotate(45deg);
    }
    .changeDropdown #middle_line{
        opacity: 0;
    }
    .changeDropdown #bottom_line{
        transform: translate(0, -5px) rotate(-45deg);
    }
    #nav_container{
        display: none;
        z-index: 10;
    }
    #nav_options{
        z-index: 10;
        flex-direction: column;
        position: absolute;
        justify-content: center;
        top: 4rem;
        right: 0rem;
        width: 100vw;
        
    }
    .dropdown_box{
        height: 2rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
    }
    .nav_item{
       text-align: center;
       padding: 0.6rem;
       font-size: 1.5rem;
    }
    #dropdown_background{
        z-index: 6;
        width: 100vw;
        height: 9.4rem;
        background-color:white;
        border-style: solid;
        border-width: 3px;
        position: absolute;
        display: none;
        top: 3.4rem;
    }
    
    #map_view_search_bar{
        height: 2.5rem;
        width: 92vw;
        z-index: 4;
    }
    #search_bar_results{
        position: absolute;
        top: 6.2rem;
        left: 1rem;
        width: 90.5vw;
        max-height: 20rem;
        overflow:scroll;
        background-color: white;
        border: 2.5px solid black;
        border-bottom-left-radius: 0.7rem;
        border-bottom-right-radius: 0.7rem;
        display: none;
        z-index: 3;
    }
    #list_view_search_bar{
        top: 5rem;
        left: 0;
        width: 90vw;
        margin-left: 1rem;
        margin-right: 1rem;  
    }
    #view_mode_buttons_container{
        position: absolute;
        justify-content:flex-start;
        width: 92vw;
        top: 7rem;
        left: 1rem;
    }
    .view_mode_buttons{
        width: 8rem;
        height: 2.5rem;
        border-radius: 1rem;;
        border-width: 2px;;
        font-weight:700;
        font-size: 1rem;
        line-height: 1.1rem;  
    }
    .key_square{
        z-index: 3;
        width: 0.7rem;
        height: 0.7rem;
        margin: 0.1rem;
        margin-left: 0.2rem;
        background-color:aqua;
    }
    .key_description{
        font-size: 0.7rem;
        font-weight:lighter;
        margin-left: 0.3rem;
    }
    #status_keys{
        top:auto;
        bottom: 2.5rem;
    }
    #yearOpened_keys{
        top: auto;
        bottom: 2.5rem;
    }
    #alterations_keys{
        top: auto;
        bottom: 2.5rem;
    }
    .tell_me_more_button{
        width: 8rem;
        height: 2rem;
        border-radius: 1rem;
        border-style:none;
        font-size: 0.8rem;
        font-weight: 800;
        background-color: black;
        color: white;
        margin: 0.2rem;
        margin-top: 0.4rem;
    }
    /* Launch Popup 900px Media Queries*/
    #launchPopup{
        z-index: 10;        
        width: 80vw;
        height: 70vh;
        position: absolute;
        top: 11rem;
    
    }
    #launchPopup_close_icon{
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: 1rem;
        right: 1rem;
    }
    #launchPopup_close_icon div:hover{
        background-color:#50B848;
    }
    .launchPopup_close_icon_line1{
        width: 1.3rem;
        height:0.25rem;
        border-radius: 1rem;
        background-color: black;
        transform: translate(0, 11px) rotate(45deg);
    }
    .launchPopup_close_icon_line2{
        width: 1.3rem;
        height:0.25rem;
        border-radius: 1rem;
        background-color: black;
        transform: translate(0, 7px) rotate(-45deg);
    }
    #launchPopup_content{
        width:100%;
       height: 100%;
       padding-top: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: top;
        overflow: scroll;
    }
    .launchPopup_h1{
        font-size: 1.6rem;
        font-weight: 700;
        color:#50B848;
        margin: 0.5rem;
        width: 80%;
    }
    .launchPopup_bold{
        font-weight: 700;
        width: 80%;
        font-size: 0.8rem;
    }
    .popUp_subheading{
        font-size: 0.9rem;
    }
    #launchPopup img{
        width: 90%;
        margin: 1.2rem;
    }
    .launchPopup_text{
        width: 80%;
        font-size: 0.9rem;
    }
    /* Overlay 900px  Media Queries*/
    #parks_information_overlay_container{
        width: 100vw;
        position: absolute;
        top: 50%;
        border-style: none;
        box-shadow: 0px -10px 15px rgba(0,0,0,0.3);
    }
    #parks_information_overlay_content{
        height: 50vh;
    }
    #park_info_overlay_top_row{
        display: flex;
    }
    #park_info_overlay_header{
        margin-bottom: 0.5rem;
    }
    #parks_info_backButton{
        width: 3rem;
        height: 2em;
        margin: 0.4rem;
        margin-left: 1rem;
        margin-top: 1rem;
    }
    #arrow_line_1, #arrow_line_3{
        width: 1rem;
        height:0.2rem;
        background-color: black;
        border-radius: 5rem;
    }
    #arrow_line_2{
        width: 1.2rem;
        height: 0.2rem;
        background-color: black;
        border-radius: 5rem;
        transform: translate(5px, 14px)
    }
    #arrow_line_1{
        transform: translate(0, 12px) rotate(-45deg);
    }
    #arrow_line_3{
        transform: translate(0, 15px) rotate(45deg);
    }
    #park_info_overlay_park_name{
        font-size: 1.4rem;
        text-align: center;
        margin-bottom: 0.4rem;
        max-width: 80%;
        
    }
    #park_info_overlay_other_names{
        font-size: 1rem;
        margin: 0.8rem;
        max-width: 80%;
    }
    #park_info_overlay_coordinates{
        font-size: 1rem;
        text-align: center;
    }
    #blank_flex_box{
        flex: 1;
    }
    .park_info_overlay_section_divider{
        border-width: 0.5px;
    }
    .park_info_overlay_detailed_info_section{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .park_info_overlay_title_row{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .park_info_overlay_toggle_arrow{
        width: 1.5rem;
        height: 1.5rem;
        margin: 0.4rem;
    }
    .park_info_overlay_toggle_arrow:hover div{
        background-color:#50B848;
    }
    .park_info_overlay_toggle_arrow_line_1, .park_info_overlay_toggle_arrow_line_2{
        width: 0.6rem;
        height:0.2rem;
        background-color: black;
        border-radius: 5rem;
    }
    .park_info_overlay_toggle_arrow_line_1{
        transform: translate(1px, 10.5px) rotate(45deg);
    }
    .park_info_overlay_toggle_arrow_line_2{
        transform: translate(1px, 12px) rotate(-45deg);
    }
    .changeHistoryToggle .park_info_overlay_toggle_arrow_line_1{
        transform: translate(1px, 12.5px) rotate(45deg);
    }
    .changeHistoryToggle .park_info_overlay_toggle_arrow_line_2{
        transform: translate(6px, 9px) rotate(-45deg);
    }
    .park_info_overlay_detailed_info_section_title{
        font-size: 1.4rem;
        font-weight:700;
        text-align: center;
        margin: 1rem;
    }
    .park_info_overlay_detailed_info_section_text{
        width: 80%;
        font-size: 0.9rem;
    }
    #park_info_overlay_history_text{
        display:none;
    }

    /* List Page 900px Media Queries */
    #table_container{
        display: none;
    }
    #mobile_table_container{
        position: absolute;
        top: 12rem;
        left: 1rem;
        width: 90vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    .mobile_list_view_park_container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 80vw;
    }
    .mobile_list_view_park_name{
        font-size: 1.3rem;
        font-weight: 700;
        margin-top: 1rem;
    }
    .mobile_list_view_park_info_container{
        margin-top: 1.2rem;
        margin-bottom: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .mobile_list_view_row{
        display: flex;
        justify-content: space-between;
        margin-left: 1rem;
        font-size: 1.1rem;
        width: 18rem;
    }
    .mobile_list_view_key{
        margin: 0.2rem;
        margin-right: 1rem;
    }
    .mobile_list_view_value{
        margin: 0.2rem;
       font-weight: 700;
    }
    .mobile_list_view_info_box{
        width: 7.6rem;
        height: 1.6rem;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mobile_list_view_line{
        border-width: 0.8px;
        width: 85vw;
        border-style: solid;
        color: black;
    }

    /* About Page 900px Media Queries */
    #about_page_content{
        position: absolute;
        top: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
    }
    .about_page_h1{
        width: 90vw;
    }
    .about_page_subheading{
        width: 90vw;
        font-size: 1rem;
    }
    .about_page_bold_text{
        width: 90vw;
    }
    .about_page_text{
        width: 90vw;
    }
}

@media screen and (max-width: 400px){
    #parks_information_overlay_container{
        max-height: 40vh;
        top: 60%;
    }
    #parks_information_overlay_content{
        height: 40vh;
    }
    #park_info_overlay_top_row{
        margin-bottom: 0;
    }
    #park_info_overlay_header{
        margin-bottom: 0;
    }
    #park_info_overlay_park_name{
        margin-top: 0.6rem;
        margin-bottom: 0;
        font-size: 1.3rem;
    }
    #parks_info_backButton{
        margin-top: 0.6rem;
        margin-bottom: 0;
    }
    #park_info_overlay_info_summary_section {
        margin: 0.5rem;
    }
    .park_info_overlay_section_divider{
        margin: 0.2rem;
    }
    .park_info_overlay_detailed_info_section_title {
        margin: 0.5rem;
        font-size: 1.2rem;
    }
    .park_info_overlay_detailed_info_section_text {
        margin: 0.4rem;
    }
    #park_info_overlay_coordinates{
        font-size: 0.8rem;
    }
    #mobile_table_container{
        display: flex;
    }
}