#weather{position:relative;width:360px;min-height:420px;background-color:#77a7ff;border-radius:15px;background-size:cover;background-repeat:no-repeat;padding:15px;box-sizing:border-box;text-align:center;overflow:hidden}#weather .rain-drop,#weather .snow-flake{position:absolute;pointer-events:none}#weather .rain-drop{width:2px;height:10px;background:#add8e6;opacity:.7}#weather .snow-flake{width:6px;height:6px;background:#fff;border-radius:50%;opacity:.8}#weather.cloud.day{background:radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.7), transparent 55%),radial-gradient(circle at 60% 45%, rgba(255, 255, 255, 0.6), transparent 60%),linear-gradient(to bottom, #cfd9df, #e2ebf0)}#weather.cloud.night{background:radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.25), transparent 55%),linear-gradient(to bottom, #2c3e50, #1c2833)}#weather.partly-cloudy.day{background:radial-gradient(circle at 30% 30%, #fff4a3, transparent 35%),radial-gradient(circle at 60% 45%, rgba(255, 255, 255, 0.6), transparent 55%),linear-gradient(to bottom, #6dd5fa, #c2e9fb)}#weather.partly-cloudy.night{background:radial-gradient(circle at 30% 25%, #f5f3ce, transparent 30%),radial-gradient(circle at 60% 45%, rgba(255, 255, 255, 0.25), transparent 55%),linear-gradient(to bottom, #141e30, #243b55)}#weather.rain.day{background:repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.25) 0 2px, transparent 2px 8px),linear-gradient(to bottom, #4b79a1, #283e51)}#weather.rain.night{background:repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.15) 0 2px, transparent 2px 8px),linear-gradient(to bottom, #0f2027, #203a43)}#weather.snow.day{background:linear-gradient(to bottom, #eef2f3, #dbe6f6)}#weather.snow.night{background:linear-gradient(to bottom, #0f172a, #020617)}#weather.rain-snow.day{background:repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.35) 0 2px, transparent 2px 8px),linear-gradient(to bottom, #d7d2cc, #304352)}#weather.rain-snow.night{background:repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0 2px, transparent 2px 8px),linear-gradient(to bottom, #1e293b, #020617)}#weather.rain-sun.day{background:radial-gradient(circle at 30% 30%, #fff6a0, transparent 35%),repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.25) 0 2px, transparent 2px 8px),linear-gradient(to bottom, #56ccf2, #2f80ed)}#weather.rain-sun.night{background:radial-gradient(circle at 30% 30%, #f5f3ce, transparent 30%),repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.15) 0 2px, transparent 2px 8px),linear-gradient(to bottom, #141e30, #243b55)}#weather.snow-sun.day{background:radial-gradient(circle at 30% 28%, rgba(255, 245, 170, 0.95) 0%, transparent 40%),linear-gradient(to bottom, #c9e7ff, #fefefe)}#weather.snow-sun.night{background:radial-gradient(circle at 70% 22%, rgba(240, 245, 255, 0.8) 0%, transparent 35%),linear-gradient(to bottom, #0b132b, #020617)}#weather.sunny.day{background:radial-gradient(circle at 35% 30%, #fff6a0, transparent 40%),linear-gradient(to bottom, #4facfe, #00f2fe)}#weather.sunny.night{background:radial-gradient(circle at 30% 25%, #f5f3ce, transparent 30%),linear-gradient(to bottom, #0b132b, #1c2541)}#weather.thunder.day{background:linear-gradient(115deg, transparent 45%, rgba(255, 255, 255, 0.9) 50%, transparent 55%),linear-gradient(to bottom, #373b44, #4286f4)}#weather.thunder.night{background:linear-gradient(115deg, transparent 45%, rgba(255, 255, 255, 0.8) 50%, transparent 55%),linear-gradient(to bottom, #0f2027, #000000)}