@import"https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;font-family:Poppins,sans-serif;min-height:100dvh;overflow:hidden;color:#fff;font-weight:200;transition:background 1s ease}body.morning{background-color:#8cbff2;background-image:radial-gradient(ellipse farthest-side at left top,#fc9,#8cbff2)}body.afternoon{background-color:#6cf;background-image:radial-gradient(ellipse farthest-side at top center,#99e6ff,#6cf)}body.evening{background-color:#ed5ea6;background-image:radial-gradient(ellipse farthest-side at bottom right,#f96,#ed5ea6)}body.night{background-color:#0f0f3d;background-image:radial-gradient(ellipse farthest-side at bottom,#262f59,#0f0f3d)}.weather-container{padding:0 2em}.text-center{text-align:center}.bold{font-weight:700}.flex{display:flex}.loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);--r1: 154%;--r2: 68.5%;width:60px;aspect-ratio:1;border-radius:50%;background:radial-gradient(var(--r1) var(--r2) at top,#0000 79.5%,#269af2 80%),radial-gradient(var(--r1) var(--r2) at bottom,#269af2 79.5%,#0000 80%),radial-gradient(var(--r1) var(--r2) at top,#0000 79.5%,#269af2 80%),#ccc;background-size:50.5% 220%;background-position:-100% 0%,0% 0%,100% 0%;background-repeat:no-repeat;animation:l9 2s infinite linear}@keyframes l9{33%{background-position:0% 33%,100% 33%,200% 33%}66%{background-position:-100% 66%,0% 66%,100% 66%}to{background-position:0% 100%,100% 100%,200% 100%}}.greetings-container{text-align:center;padding:2em 0}.greetings-container h1{font-size:2.2rem;font-weight:200}.greetings-container .current-time{font-size:2.2rem;margin:.1em 0;font-weight:200}.search-container{width:16em;margin:0 auto}.search-container input{font-family:Poppins,sans-serif;width:100%;border:none;outline:none;border-radius:1.6em;padding:1.2em}.search-results{margin-top:.5rem;z-index:1000;position:relative}.results-container{position:absolute;width:100%;overflow:hidden;border-radius:10px;background-color:#fafafa99}.result{color:#000;padding:.2rem}.result:hover{background-color:#fafafab3}.weather-data-container{display:flex;flex-direction:column}.weather-icon{display:flex;justify-content:center;align-items:center;width:18em;height:10em;overflow:hidden;margin:0 auto}.weather-icon img{width:100%;height:auto}.weather-unit{font-size:5rem;justify-content:center;display:flex;position:relative}.weather-feels-container{justify-content:center;flex-direction:column}.weather-feels-container .weather-feels-like,.weather-feels-like,.search-container,.weather-condition,.city-location{margin-bottom:.8em}.weather-extra-data{justify-content:center;align-items:center;gap:.4em}.wind-speed,.humidity{flex-direction:column;text-align:left}.wind-speed span,.humidity span{font-weight:700}.icon{font-size:3.5rem}.error{position:absolute;bottom:0;color:#fff;display:flex;margin:1em;align-items:center;font-size:.9rem;padding-inline:min(1em,8%);gap:1em;padding-block:min(1.2em,8%);font-weight:500;background-color:#ea4b4b;border-radius:.5em}.error .icon{font-size:2.2rem}.error .error-container{text-align:left}.error .title{text-transform:uppercase;font-size:1rem;font-weight:700}@media (max-width: 1580px){.weather-data-container{justify-content:center;align-items:center;display:flex;flex-direction:row}.weather-icon img{width:300px}}@media (max-width: 1280px){.weather-data-container{justify-content:center;align-items:center;display:flex;flex-direction:row}.weather-icon{width:250px}}@media (max-width: 640px){.weather-data-container{display:flex;flex-direction:column}}