#main-container {
font-family: 'San Francisco', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
margin: 20px;
background-color: #ffffff;
} .state-selection {
display: flex;
justify-content: flex-start;
gap: 15px;
margin-bottom: 20px;
}
.state-selection .tab {
padding: 10px 15px;
background-color: #D3D3D3; color: #333;
border-radius: 12px 12px 0 0; cursor: pointer;
text-align: center;
transition: background-color 0.3s, color 0.3s;
}
.state-selection .tab:hover {
background-color: #A9A9A9; }
.state-selection .tab.active {
background-color: #808080; color: #fff; }
.state-selection .tab:not(.active):hover {
background-color: #A9A9A9;
} .city-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 15px;
margin-top: 20px;
padding: 15px;
background-color: #F3F4F6;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.city {
display: block;
background-color: #e7e4e4;
color: #333;
padding: 8px 12px;
text-align: center;
border-radius: 8px;
font-size: 13px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}
.city:hover {
background-color: #D9D9D9;
transform: translateY(-2px);
}
.city.selected {
background: linear-gradient(135deg, #ff5e00, #FF8C00);
color: #FFF;
box-shadow: 0 4px 15px rgba(255, 140, 0, 0.3);
}
.selected {
background-color: #ed8309; color: #fff; }
.tag-cloud {
display: flex;
flex-wrap: wrap;
max-width: 100%;
gap: 10px;
margin: 4px;
}
.tag {
display: inline-block;
background: linear-gradient(135deg, #b5b5b5, #e7e7e7);
color: #3c3c3c;
padding: 8px 12px;
text-decoration: none;
border-radius: 12px;
font-size: 14px;
transition: background 0.3s;
}
.tag:hover {
background: linear-gradient(135deg, #f69103, #ffec1d);
color: #ffffff;
}
.tag a:hover {
color: #cc0d0d; text-decoration: none;
}
.tag a:link {
color: #e30505; } @media (max-width: 768px) {
.state-selection {
flex-direction: column;
align-items: flex-start;
}
.state-selection .tab {
width: 100%;
margin-bottom: 10px;
} .tag-cloud {
display: grid;
grid-template-columns: repeat(3, 1fr); gap: 10px;
} .tag {
font-size: 12px; padding: 6px 10px; } .city-list {
grid-template-columns: repeat(3, 1fr); }
.city {
padding: 4px 8px;
font-size: 13px;
padding: 4px 8px;
margin: 7px;
} @media (min-width: 769px) {
.tag-cloud {
display: grid;
grid-template-columns: repeat(6, 1fr); gap: 15px;
} .city-list {
grid-template-columns: repeat(10, 1fr); }
}