*{font-family:Arial,Helvetica,sans-serif}html{height:100vh;width:100%;background:linear-gradient(-45deg,#6fd8fb,#067ae0)}.app-name{font-size:2.3rem;margin-bottom:16px;color:#fff}.App{display:flex;flex-direction:column;justify-content:center;align-items:center;width:600px;min-height:440px;background-color:#fff;text-align:center;margin:128px auto;border-radius:10px;padding-bottom:32px;box-shadow:0 4px 10px #0000001a;background:#ffffff40}.city-search{width:100%;max-width:400px;box-sizing:border-box;font-size:16px;background-color:#e5eef0;background-position:10px 12px;background-repeat:no-repeat;padding:12px 40px;transition:width .4s ease-in-out;color:#333;background:transparent;color:#fff;border-radius:.5rem;border:none;outline:none;border:1px solid white}.city-search:focus{width:100%}.city-name{font-size:1.5rem;color:#444;margin-bottom:8px}.date{font-size:1.25em;font-weight:500;color:#777}.icon-temp{font-size:3rem;font-weight:700;color:#1e2432;text-align:center}.deg{font-size:1.3rem;vertical-align:super}.des-wind{font-weight:500;color:#666}.error-message{display:block;text-align:center;color:#d32f2f;font-size:24px;margin-top:auto}.Loader{display:flex;justify-content:center;align-items:center;height:100%}.Loader>div{margin:0 auto}.weather-icon{display:flex;justify-content:center;align-items:center}.weather-icon img{width:100px;height:100px;border-radius:50%;box-shadow:0 4px 8px #0003}h2,.date span,.icon-temp,.des-wind{color:#fff}