* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    transition: 1s ease;
}

/* Background Themes */
.morning { background: linear-gradient(to bottom, #74b9ff, #fff); color: #2d3436; }
.afternoon { background: linear-gradient(to bottom, #feca57, #ff9f43); color: #2d3436; }
.evening { background: linear-gradient(to bottom, #ff9f43, #2c3e50); color: #fff; }
.night { background: linear-gradient(to bottom, #2c3e50, #000); color: #fff; }

.main-container { text-align: center; width: 90%; max-width: 450px; }

/* Cartoon Face */
.cartoon-box { margin-bottom: 20px; }
.face {
    width: 120px; height: 120px; background: #ffd32a;
    border-radius: 50%; border: 5px solid #333;
    margin: 0 auto; position: relative; display: flex;
    flex-direction: column; align-items: center; justify-content: center;
}

.eye-container { display: flex; gap: 15px; }
.eye {
    width: 25px; height: 25px; background: white;
    border-radius: 50%; position: relative; overflow: hidden;
}
.pupil {
    width: 12px; height: 12px; background: black;
    border-radius: 50%; position: absolute; top: 25%; left: 25%;
}

.mouth {
    width: 40px; height: 20px; border-bottom: 5px solid #333;
    border-radius: 50%; margin-top: 10px; transition: 0.3s;
}

/* Face States */
.sleepy { height: 5px; border-bottom: 5px solid #333; }
.excited { border-radius: 50%; height: 30px; background: #333; }

/* Clock Card */
.clock-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    padding: 30px; border-radius: 25px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.2);
}

.time-display { font-size: 3.5rem; font-weight: bold; margin: 10px 0; }
#ampm { font-size: 1rem; color: #ff3f34; }

.btn-group button, .world-clock button {
    padding: 10px 15px; cursor: pointer; border: none;
    border-radius: 8px; background: #333; color: white; margin: 5px;
}

.world-clock input {
    padding: 10px; border-radius: 8px; border: 1px solid #ccc; width: 70%;
}