h1 {
font-family: 'Arial', sans-serif;
font-size: 36px; 
font-weight: bold; 
color: #333; 
text-align: center;
text-transform: uppercase; 
letter-spacing: 2px; 
line-height: 1.2; 

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

animation: pulse 1s infinite alternate;
}

@keyframes pulse {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}

h1 .divider {
	margin: 0 8px;
}

h1 .sub-headline {
	color: #888;
	font-weight: 300;
}

#nyc-map {
    margin-top: 20px;
    width: 60%;
    height: 1050px;
    float: left;
}

#additional-content {
    height: 400px;
    width: 40%; /* Adjust the width as needed */
    float: left;
    padding: 20px; /* Optional: Add padding for better appearance */
}

#restaurant-list {
    height: 400px;
    overflow-y: scroll;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #fff;
}

#poi-list {
    height: 400px;
    overflow-y: scroll;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #fff;
}

#rank {
    height: 1050px;
    overflow-y: scroll;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #fff;
}

#travel-plan {
    height: 1050px;
    overflow-y: scroll;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #fff;
}

.tooltip {
    position: absolute;
    text-align: center;
    padding: 8px;
    font: 12px sans-serif;
    background: white;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.legend {
    width: 30px;
  	height: 30px;
    margin-top: 5px;
    margin-left: 5px;
}

#mapLegend{
    height: 180px;
    width: 110px;
    background-color: #ffcc00
}

.travel-plan-container .plan-item {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 5px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    text-align: left;
    transition: transform 0.3s ease;
}

.dragging {
    opacity: 0.7;
}