*{box-sizing:border-box}html,body{height:100%}body{font-family:Arial,sans-serif;background-color:#20b2aa;display:flex;justify-content:center;align-items:center;margin:0}.weather-card{width:400px;padding:20px;border-radius:20px;background-color:#fff;box-shadow:0 4px 6px #0000001a}@media (max-width: 600px){body{padding:0}.weather-card{width:350px;padding:20px;box-shadow:none}}@media (max-width: 400px){#root{width:100%;padding:0 5px}.weather-card{width:100%}}.search-bar{display:flex;margin-bottom:20px}.search-bar .random-button{padding:10px;border:1px solid #ccc;border-radius:20px 0 0 20px;cursor:pointer;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center}.search-bar input{flex-grow:1;padding:10px;font-size:16px;border:1px solid #ccc;border-radius:0}.search-bar button[type=submit]{padding:10px;border:1px solid #ccc;border-left:none;border-radius:0 20px 20px 0;cursor:pointer;background-color:#f0f0f0}.message{color:#333}.weather-details{position:relative;text-align:center}.weather-icon{font-size:80px;margin-bottom:20px}.temperature{font-size:48px;margin-bottom:10px}.condition{font-size:24px;margin-bottom:20px}.details{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}.detail{display:flex;align-items:baseline;width:50%;padding-bottom:4px}.detail-icon{font-size:24px;margin-right:10px}