@import"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap";html{box-sizing:border-box;font-size:62.5%}*,*:before,*:after{box-sizing:inherit}body,h1,h2,h3,h4,h5,h6,p,ol,ul{margin:0;padding:0;font-weight:400}ol,ul{list-style:none}img{max-width:100%;height:auto}.dm-sans{font-family:DM Sans,sans-serif;font-optical-sizing:auto}body{background-color:#000;height:100vh}#root{height:100%}.weather-app-wrapper{display:flex;align-items:center;justify-content:center;height:100%}.weather-app-wrapper .weather-app-grid{display:grid;grid-template-areas:"search" "time" "main" "detailed" "forecast";height:100%;border-radius:10px;box-shadow:#f3009880 0 0 200px 1px;background-size:cover;background-position:center;background-image:url(/assets/bg-Aqx-Tdk1.jpg);padding-inline:3em}.weather-app-wrapper .weather-app-grid .search-section{grid-area:search;margin-block:auto}.weather-app-wrapper .weather-app-grid .time-section{grid-area:time}.weather-app-wrapper .weather-app-grid .weather-detailed{grid-area:detailed}.weather-app-wrapper .weather-app-grid .main-content-section{grid-area:main}.weather-app-wrapper .weather-app-grid .forecast-section{grid-area:forecast;display:flex;justify-content:space-evenly;align-items:center;margin-top:50px}@media screen and (min-width: 700px){.weather-app-grid{display:grid;grid-template-columns:auto auto;grid-template-rows:100px auto auto;grid-template-areas:"search search" "time main" "detailed main" "forecast forecast"!important;padding-inline:10em!important;width:1150px!important;height:850px!important}.weather-main-info{text-align:right!important}}.current{color:#fff}.current .time-wrapper .time{font-size:2.5rem;font-weight:700;padding-right:.3em}.current .time-wrapper .type{font-size:1.5rem;font-weight:700}.current .day{font-size:2.5rem}.weather-main-info{display:flex;flex-direction:column;color:#fff;text-align:center}.weather-main-info .ph-planet{font-size:6rem}.weather-main-info .type{font-size:4.5rem;font-weight:600}.weather-main-info .location{font-size:2.2rem;color:#f20097}.weather-main-info .degrees{font-size:4.5rem;margin-top:.5em;font-weight:700}.search-box{position:relative}.search-box .search{border:0px solid transparent;border-radius:5px;padding:.5em .7em;font-size:1.4rem;transition:all .4s ease;opacity:.3}.search-box .search:hover{outline:1px solid hsl(318,70%,55%);opacity:1}.search-box .search:focus{opacity:1;outline:1px solid hsl(318,70%,55%);box-shadow:#ff1cbb 0 0 15px}.search-box .suggestions{position:absolute;background-color:#fff;border-radius:5px 0 5px 5px/5px 0px 5px 5px;width:30%}.search-box .suggestions .suggestion{padding:.5em .7em;font-size:1.3rem;cursor:pointer}.search-box .suggestions .suggestion:hover,.selected{background-color:#ff1cbb1a}.forecast-day{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:2em 3em}.forecast-day:after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:linear-gradient(#ffffff03,#fff3);border-radius:10px 30px;transition:all .3s ease-in-out;opacity:0}.forecast-day:hover:after{cursor:pointer;opacity:1}.forecast-day .day{color:#fff;font-size:1.6rem;font-weight:600;letter-spacing:3px}.forecast-day .icon{filter:invert(1);height:70px}.forecast-day .temp{color:#fff;font-size:1.6rem}.weather-detailed-info{display:flex;flex-direction:column;gap:30px}.weather-detailed-info .detailed-item{display:flex;align-items:center;gap:20px}.weather-detailed-info .detailed-item .icon{width:30px;filter:invert(1)}.weather-detailed-info .detailed-item .value{font-size:1.8rem;color:#fff;font-weight:600}