@import"https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap";*{margin:0;padding:0;font-family:Ubuntu,Tahoma,Geneva,Verdana,sans-serif}.principal-container.input{background-color:#4b5257;height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column;transition:background-color 1s ease-in-out}.principal-container.output{height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column;transition:background-color 1s ease-in-out}.principal-container.output.day{background-color:#0477bf}.principal-container.output.night{background-color:#060710}.weather-container{transition:all 1s ease-in-out}.weather-container.input{background-color:#6e7980;width:520px;height:220px;border-radius:10px;color:#fff;padding:10px;display:flex;justify-content:center;align-items:center;flex-direction:column}.weather-container.input input{margin:20px 0;height:40px;width:80%;padding-left:10px;font-size:1.3em;border-radius:10px;border:none;box-sizing:border-box}.weather-container.input input:focus{outline:none;border:#4B5257 solid 2px}.weather-container.input button{background-color:#fff;transition:background-color .5s ease;height:50px;width:100px;font-size:1.5em;border:none;border-radius:10px}.weather-container.input button:hover{background-color:#d7eefa}.weather-container.output{width:530px;height:230px;border-radius:10px;color:#fff;padding:20px;display:flex;flex-direction:column;align-items:center;gap:20px;transition:all 1s ease-in-out}.weather-container.output.day{background-color:#04b2d9}.weather-container.output.night{background-color:#0b133f}.weather-container.output h2{text-align:center;width:100%;font-size:1.8em}.weather-content{display:flex;flex-direction:row;align-items:center;justify-content:start}.weather-container img{width:150px;height:150px}.info1{display:flex;flex-direction:column;gap:10px;font-size:1.1em;margin-right:30px}.temp{font-size:2em}.separator{width:2px;height:80px;background-color:#fff;margin-right:30px}@media (max-width: 800px){.weather-container.input{width:310px}.weather-container.output{width:310px;height:400px}.weather-content{flex-direction:column;justify-content:center;text-align:center}.info1{margin:0}.separator{width:100px;height:2px;margin:10px 0}}