@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,sans-serif;background-color:#000;color:#fff}.container{min-height:100vh;min-height:100svh;min-height:100dvh;background-color:#000;font-weight:700;text-align:center;display:grid;margin-inline:auto;grid-template-columns:1fr;grid-template-rows:minmax(4rem,.5fr) minmax(18rem,18rem) minmax(2rem,2rem) minmax(1.5rem,1.5rem) minmax(1.5rem,1.5rem) minmax(7rem,7rem) minmax(9rem,10rem) minmax(2.5rem,.2fr);grid-template-areas:"condition" "sunrise-sunset" "location" "country" "local-time" "forecast" "next-days" "form";max-width:768px}.condition{grid-area:condition;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:1rem}.condition img{width:5rem}.sunrise-sunset{grid-area:sunrise-sunset;margin:auto;display:flex;align-items:center;justify-content:center;width:16rem;aspect-ratio:1;border:2px solid rgba(255,223,25,1);border-radius:50%;background:transparent;position:relative}.sunrise-sunset .sun{position:absolute}.sunrise-sunset .day-time{width:13rem;display:flex;align-items:center;justify-content:space-between}.sunrise-sunset .day-time .sun-icons-wrapper{font-size:1rem;display:grid;place-items:center}.sunrise-sunset .day-time .sun-icons-wrapper :not(span){font-size:1.25rem;color:#ffdf19}.sunrise-sunset .day-time .local-temp{height:10rem;width:5rem;display:flex;flex-direction:column;justify-content:space-between}.sunrise-sunset .day-time .local-temp .temp-icons{display:flex;justify-content:center}.sunrise-sunset .day-time .local-temp .temp-icons .icon-thermometer{color:#ffdf19;font-size:1rem}.sunrise-sunset .day-time .local-temp .temp-icons .temps{font-size:1rem}.sunrise-sunset .day-time .local-temp .wind-speed-dir{border:2px solid rgba(255,223,25,1);width:5rem;aspect-ratio:1;border-radius:50%;position:relative;display:grid;place-content:center}.sunrise-sunset .day-time .local-temp .wind-speed-dir .wind-direction-icon{width:calc(5rem - 4px);aspect-ratio:1;position:absolute;rotate:0deg}.sunrise-sunset .day-time .local-temp .wind-speed-dir .wind-direction-icon .arrow-icon{color:#ffdf19;border-top:4px double rgba(255,223,25,1);border-radius:50%;font-size:1.125rem;position:absolute;top:-18px;right:calc(50% - 1.5rem);bottom:auto;left:calc(50% - 1.5rem)}.sunrise-sunset .day-time .local-temp .wind-speed-dir span{font-size:1rem}.sunrise-sunset .day-time .local-temp .air-humidity{display:flex;align-items:center;justify-content:center}.sunrise-sunset .day-time .local-temp .air-humidity .humidity-icon{font-size:1.25rem;line-height:1rem;color:#ffdf19}.location{grid-area:location;font-size:1.25rem}.country{grid-area:country;font-size:1rem}.local-time{grid-area:local-time;font-size:1rem}.forecast{grid-area:forecast;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth}.forecast .hourly{list-style-type:none;display:flex;justify-items:center}.forecast .hourly .each-hour{border-right:1px solid rgba(255,255,255,1);padding-inline:1.5rem;padding-block:.5rem;width:2rem;display:flex;justify-content:center;font-size:.75rem;scroll-snap-align:start}.forecast .hourly img{border-right:1px solid rgba(255,255,255,1);width:3.0625rem;scroll-snap-align:start}.form{grid-area:form;display:flex}.form input{grid-area:form;font-size:1.25rem;font-weight:700;border:none;outline:none;width:70%;text-align:center;caret-color:#b22222}.form input::placeholder{text-align:center;font-weight:700;letter-spacing:2px}.form button{font-size:1rem;border:none;background-color:#b22222;color:#fff;font-weight:700;letter-spacing:2px;width:30%;cursor:pointer}.form button:hover{background-color:#b22222d9}@media screen and (min-width: 768px){.next-days{padding-top:1rem}}.next-days a{color:#fff;text-decoration:none}.next-days a li{border-top:1px solid firebrick;list-style-type:none;display:flex;align-items:center;justify-content:space-between;margin:.25rem 1rem}.next-days a li .forecast-day{width:6rem}.next-days a li img{width:2rem}.next-days a li div{display:flex;column-gap:.5rem}