@import"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap";:root{--font: "Nunito", sans-serif;--accent: #77dde7;--accent-rgb: 119, 221, 231;--light: #ffffff;--border-radius: 10px;--width-line: 2px;--tr: .3s}body,html{height:100vh}body{font-family:var(--font);height:100%}*{margin:0;padding:0}input,button{font-family:var(--font)}#app{height:100%}.weather{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.weather-bg{position:absolute;left:0;right:0;top:0;margin:0 auto;width:100%;height:100%;z-index:-1}.weather-bg>div{width:100%;height:100%;position:relative;overflow:hidden}.weather-bg_img{width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);object-fit:cover;opacity:0;transition:var(--tr) ease-in-out}.weather-bg_img.bg{opacity:1}.weather.sunny .weather-bg_img:not(.sunny){opacity:0}.weather.sunny .weather-bg_img.sunny{opacity:1}.weather.overcast .weather-bg_img:not(.overcast){opacity:0}.weather.overcast .weather-bg_img.overcast{opacity:1}.weather.partly-cloudy .weather-bg_img:not(.partly-cloudy){opacity:0}.weather.partly-cloudy .weather-bg_img.partly-cloudy{opacity:1}.weather.light-snow .weather-bg_img:not(.light-snow){opacity:0}.weather.light-snow .weather-bg_img.light-snow{opacity:1}.weather.snow .weather-bg_img:not(.snow){opacity:0}.weather.snow .weather-bg_img.snow{opacity:1}.weather.heavy-snow .weather-bg_img:not(.heavy-snow){opacity:0}.weather.heavy-snow .weather-bg_img.heavy-snow{opacity:1}.weather.rain-and-snow .weather-bg_img:not(.rain-and-snow){opacity:0}.weather.rain-and-snow .weather-bg_img.rain-and-snow{opacity:1}.weather.light-rain .weather-bg_img:not(.light-rain){opacity:0}.weather.light-rain .weather-bg_img.light-rain{opacity:1}.weather.moderate-rain .weather-bg_img:not(.moderate-rain){opacity:0}.weather.moderate-rain .weather-bg_img.moderate-rain{opacity:1}.weather.heavy-intensity-rain .weather-bg_img:not(.heavy-intensity-rain){opacity:0}.weather.heavy-intensity-rain .weather-bg_img.heavy-intensity-rain{opacity:1}.weather.very-heavy-rain .weather-bg_img:not(.very-heavy-rain){opacity:0}.weather.very-heavy-rain .weather-bg_img.very-heavy-rain{opacity:1}.container{width:100%;max-width:1000px;margin:0 auto;padding-right:15px;display:grid;grid-template-columns:1fr 100px 200px;gap:20px;box-sizing:border-box}.card{background-color:var(--light);border-radius:var(--border-radius);padding:20px 30px;box-sizing:border-box}.weather-form{display:flex;align-items:stretch;gap:20px}.weather-form_input{flex-grow:1;font-size:20px;border:var(--width-line) solid rgba(var(--accent-rgb),.3);border-radius:var(--border-radius);padding:10px 15px;box-sizing:border-box;transition:var(--tr)}.weather-form_input:focus{outline:none;border-color:var(--accent)}.weather-form_btn{flex-basis:180px;font-size:20px;background-color:rgba(var(--accent-rgb),.3);border:none;border-radius:var(--border-radius);padding:10px 15px;box-sizing:border-box;cursor:pointer;transition:var(--tr)}.weather-form_btn:hover{background-color:var(--accent)}.weather-form,.weather-load,.weather-info{grid-column:1 / 4}.weather-load{display:flex;align-items:center;height:87px}.weather-info_text{display:grid;grid-template-columns:1fr auto auto;gap:20px;font-size:40px}@media screen and (min-width:100px) and (max-width:1024px){.container{width:80%}.card{padding:15px 20px;font-size:25px}}@media screen and (min-width:100px) and (max-width:768px){.container{width:100%;grid-template-columns:1fr 10px 5px;gap:20px;padding:10px}.card{padding:10px;font-size:20px}.weather-form_btn,.weather-form_input{padding:10px;font-size:15px}.weather-form{gap:5px;display:flex;align-items:center}}