.cityheader {
	text-align: center;
	margin-bottom: 30px;
	margin-top: 30px;
	padding: 20px;
	background-color: #f4d08212;
	border-radius: 10px;
	color: white;
}
.cityheader h1 {
	font-size: 1.8rem;
	margin-bottom: 10px;
}
.city-list {
display: flex;
flex-direction: column;
gap: 30px;
}
.city-list a{color:black}
.list-container {
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.list-container h2 {
	font-size: 1.4rem;
	color: orangered;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 2px solid gray;
}
.cityheader p {
	color: orangered;
}
.list-container ul {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
gap: 12px;
}

.list-container ul li {
padding: 5px;
background: #f8f9fa;
border-radius: 5px;
transition: background 0.3s;
text-align:center;
}
.list-container ul li:hover {
	background: #ecf0f1;
}

@media (max-width: 480px) {
.cityheader h1 {
	font-size: 1.4rem;
}

h2 {
	font-size: 1.2rem;
}

.list-container ul {
	grid-template-columns: repeat(4, 1fr);
}
}