/* 🌸 Anime / Pastel Theme 🌸 */

body {
    font-family: "Poppins", "Segoe UI", sans-serif;
    max-width: 700px;
    margin: 40px auto;
    line-height: 1.6;
    background: linear-gradient(135deg, #ffe6f2, #e6f0ff);
    color: #333;
}

/* Title */
h1 {
    text-align: center;
    font-size: 2.4rem;
    color: #ff66a3;
    text-shadow: 0 0 10px rgba(255, 102, 163, 0.4);
}

h2 {
    color: #6a5acd;
    margin-top: 30px;
    text-shadow: 0 0 6px rgba(106, 90, 205, 0.3);
}

/* City cards */
.city-box {
    background: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
    border: 2px solid #ffd6e7;
    box-shadow: 0 4px 10px rgba(255, 182, 193, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.city-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(255, 182, 193, 0.6);
}

/* Dropdown */
select {
    padding: 12px;
    font-size: 16px;
    border-radius: 12px;
    border: 2px solid #c8b6ff;
    background: #f3e8ff;
    color: #4b0082;
    width: 100%;
    box-shadow: 0 4px 10px rgba(200, 182, 255, 0.4);
    transition: 0.2s ease;
}

select:hover {
    background: #e9d8ff;
    box-shadow: 0 6px 14px rgba(200, 182, 255, 0.6);
}

/* Result box */
#result {
    margin-top: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 15px;
    border: 2px solid #bde0fe;
    box-shadow: 0 4px 10px rgba(173, 216, 230, 0.4);
    font-size: 1.1rem;
    color: #003366;
}

/* Divider */
hr {
    border: none;
    height: 2px;
    background: linear-gradient(to right, #ffb3d9, #b3c6ff);
    margin: 30px 0;
}