*,*:before,*:after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased;font-family:Lato,sans-serif}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}html{--shadow-color: 250deg 35% 11%;--shadow-card: 0px 1px 2px hsl(50deg 20% 50% / .2), 0px 2px 4px hsl(50deg 20% 50% / .2), 0px 4px 8px hsl(50deg 20% 50% / .2), 0px 8px 16px hsl(50deg 20% 50% / .2);--font-family: "Work Sans"}body{background-attachment:fixed;font-family:var(--font-family);background-image:hsl(156,71%,51%) 50%}.Weather-card{background-color:#fff;border-radius:.5rem;padding:1rem;width:50%;box-shadow:var(--shadow-card)}.weather-header{display:flex;align-items:start;justify-content:space-between;position:relative;padding-bottom:.5rem}.weather-header h1{font-size:2.5rem;font-weight:900}.weather-icon{position:absolute;left:80%;bottom:10%;width:150px}.weather-search{width:100%;padding:.75rem;border-radius:.25rem;outline:none;border:2px solid rgb(121,109,158)}.search-input{position:relative}.search-icon{position:absolute;left:95%;bottom:25%;color:#362f4b}.weather-info-layout{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-block-start:1rem}.weather-info{font-weight:500;font-size:1.125rem;background-color:#cfc8e6;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem;border-radius:.5rem;font-weight:600;transition:all 1s}.weather-info:hover{transform:scale(1.3);background-color:#a792ea}.error-message{padding:.5rem;padding-inline-start:1rem;background-color:#b7334c;border-radius:.5rem;margin-block-start:1rem;color:#f4edee}@media (max-width: 1024px){.Weather-card{width:80%}.weather-icon{width:120px;left:75%}}@media (max-width: 768px){.Weather-card{width:90%;padding:.75rem}.weather-header h1{font-size:2rem}.weather-icon{width:100px;left:70%}.weather-info{font-size:1rem;padding:.75rem}.weather-info:hover{transform:none;background-color:#a792ea}.search-icon{left:90%;bottom:25%}}@media (max-width: 480px){.Weather-card{width:95%;padding:.5rem}.weather-header{flex-direction:column;align-items:flex-start}.weather-header h1{font-size:1.5rem}.weather-icon{position:static;align-self:center;width:80px;margin-top:.5rem}.weather-info-layout{flex-direction:column;align-items:stretch}.weather-info{width:100%;font-size:.95rem;padding:.5rem}.search-icon{left:auto;right:1rem}}.layout{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:1rem;background-color:#796d9e}
