@import"https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;700&display=swap";*{font-family:Poppins,sans-serif}body{margin:0}#root,.App{width:100vw;height:100vh;overflow:hidden}.layout-animation{width:100vw;height:100vh;background-color:#1b1f2d;box-sizing:border-box;position:relative;padding:1em}.layout-animation .container-searchbar{width:100vw;height:100vh;position:fixed;margin:auto;top:0;bottom:0;left:0;right:0;z-index:50;box-sizing:border-box;overflow:hidden;background-color:#1b1f2d;display:flex;justify-content:center;padding-top:8em}.layout-animation .layout,.layout-animation .page{position:relative;width:100%;height:100%}.layout-animation .layout .right-informations,.layout-animation .page .right-informations{position:absolute;right:0;top:0;width:fit-content}.layout-animation .layout .day-details-container,.layout-animation .page .day-details-container{position:absolute;top:150px}.layout-animation .layout .day-temperatures-container,.layout-animation .page .day-temperatures-container{position:absolute;bottom:55px;width:100%}.layout-animation .layout .week-temperatures-container,.layout-animation .page .week-temperatures-container{position:absolute;bottom:85px}.layout-animation .layout .menu-nav-bar,.layout-animation .page .menu-nav-bar{position:absolute;z-index:99;bottom:0}.weather-background{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0;z-index:0;background-size:cover;background-position:center;transition:all .5s;-webkit-user-select:none;user-select:none;margin:auto}.weather-background .opacity{width:100%;height:100%;position:absolute;background-color:#1b1f2d;opacity:.4}.display-temp{color:#fff}.display-temp .temperature{font-size:72px;font-weight:300}.display-temp .location{font-size:15px;margin-top:-1em}.display-temp .date{font-weight:100;font-size:12px}.icon-weather{width:90px;aspect-ratio:1;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.icon-weather svg{width:100%;height:100%}.moon-phase{display:flex;flex-direction:column;justify-content:center;align-items:center}.moon-phase .container-icon{width:39px;height:39px}.moon-phase .container-icon img{width:100%;height:100%}.moon-phase .container-text{width:68px;color:#fff;font-size:8px;font-weight:200;text-align:center}.unit-day-details{display:flex;justify-content:space-between;align-items:center;background-color:#ffffff80;border-radius:16px;padding:10px 12px;min-width:140px;width:fit-content;gap:1em}.unit-day-details .column{display:flex;flex-direction:column;line-height:18px}.unit-day-details .column .title{font-size:10px;font-weight:200}.unit-day-details .column .text{font-size:20px;font-weight:300}.day-details{display:flex;flex-direction:column;gap:.5em}.unit-week{width:67px;position:relative;border-radius:16px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#f6958899;color:#fff;padding:10px 0;flex-shrink:0}.unit-week .container-date{width:100%;text-align:center;font-size:10px;font-weight:300}.unit-week .container-icon{display:flex;justify-content:center;align-items:center}.unit-week .container-temp{font-size:20px}.week-temperatures,.week-temperatures .draggable{display:flex;width:auto;gap:.5em}@keyframes enter{0%{transform:translate(-150%)}to{transform:translate(0)}}.day-temperatures{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding-top:50px;color:#fff;font-weight:200;font-size:12px}.day-temperatures .container{width:100%;height:100%;display:flex;justify-content:space-between;align-items:center;position:relative}.day-temperatures .container-max-min{top:-5px;align-items:stretch;justify-content:stretch;gap:0}.day-temperatures .container-max-min .temp{text-align:center;width:100%}.day-temperatures .container-icons{top:0;height:45px;padding-top:0}.day-temperatures .container-icons .container-icon{width:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.day-temperatures .container-icons .container-icon .icon-weather{max-width:55px}.day-temperatures .container-grid{max-height:100px}.day-temperatures .container-grid .container-lines{position:absolute;top:0;width:100%;height:100%;display:flex;justify-content:space-between;align-items:center}.day-temperatures .container-grid .line-grid{width:0px;height:100%;border-right:1px dotted white;opacity:.5}.nav-big-btn{width:68px;height:68px;display:flex;justify-content:center;align-items:center;background-color:#fdc98e;border-radius:100%;box-shadow:0 4px 10px #00000040;cursor:pointer;transition:all .2s linear}.nav-big-btn .container-icon{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.nav-big-btn[data-selected=true]{background-color:#fff}.nav-big-btn[data-selected=true] svg path{fill:#fdc98e}.nav-big-btn:hover{transform:scale(1.05)}.nav-big-btn:active{transform:scale(1.1)}.nav-button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;margin:6px;cursor:pointer;-webkit-user-select:none;user-select:none}.nav-button .container-icon{width:24px;height:24px;display:flex;justify-content:center;align-items:center;position:relative}.nav-button .container-icon svg{transition:all .2s linear}.nav-button .container-icon svg path{fill:#fff;fill-opacity:.5;transition:all .2s linear}.nav-button .container-icon .date{position:absolute;font-size:10px;font-weight:300;padding-top:6px;width:100%;text-align:center;opacity:.5;color:#fff}.nav-button .container-text{width:100%;text-align:center;font-size:10px;font-weight:200;transition:all .2s linear;color:#fff}.nav-button[data-active=true] .container-icon svg{filter:drop-shadow(0px 0px 4px #FDC98E)}.nav-button[data-active=true] .container-icon svg path{fill:#fdc98e;fill-opacity:1}.nav-button[data-active=true] .container-icon .date{color:#fdc98e;opacity:1;text-shadow:0px 0px 4px #FDC98E}.nav-button[data-active=true] .container-text{font-weight:300;color:#fdc98e;text-decoration:solid underline #FDC98E}.nav-button:hover .container-icon svg path{fill-opacity:1}.nav-button:hover .container-icon .date{opacity:1;text-shadow:0px 0px 4px white}.nav-button:hover .container-text{opacity:1}.menu-nav-bar{display:flex;justify-content:center;align-items:center;width:100%;max-width:400px;position:relative}.menu-nav-bar .background-menu{width:100%;height:50px;display:flex;justify-content:space-around;align-items:center;gap:5px;background-color:#1b1f2d;padding:5px;border-radius:16px;box-shadow:0 4px 10px #00000040}.searchbar-position{position:relative;width:300px}.searchbar-position .container-input{width:300px;display:flex;justify-content:space-between;align-items:center;background-color:#ffffffb3;border-radius:16px;padding:0 1em;box-sizing:border-box}.searchbar-position .container-input input{outline:none;border:none;height:3em;box-sizing:border-box;background-color:transparent}.searchbar-position .container-input svg{opacity:.7;cursor:pointer}.searchbar-position .autocomplete-container{margin-top:5px;width:300px;background-color:#ffffffb3;border-radius:16px;padding:.5em 0;display:flex;flex-direction:column;overflow:hidden}.searchbar-position .autocomplete-container .item{cursor:pointer;padding:.5em 1em}.searchbar-position .autocomplete-container .item:hover{background-color:#e2e2e2}