@import url("https://fonts.googleapis.com/css2?family=SUSE:wght@100..800&display=swap");*{margin:0;padding:0;box-sizing:border-box;font-family:SUSE,sans-serif}a{color:inherit;text-decoration:none}body{--bg-color-1:#2c3e50;--bg-color-2:#8d8f91;display:flex;flex-direction:column;justify-content:space-between;position:relative;min-height:100vh;background:var(--bg-color-1);background:linear-gradient(to bottom,var(--bg-color-1) 30%,var(--bg-color-2));transition:background 1s;&.sunny{--bg-color-1:#2f80ed;--bg-color-2:#56ccf2}&.sunset{--bg-color-1:#3b4371;--bg-color-2:#f3904f}&.partlyCloudy{--bg-color-1:#fc4a1a;--bg-color-2:#f7b733}&.cloudy{--bg-color-1:#2c3e50;--bg-color-2:#8d8f91}}img,svg{max-height:100%;max-width:100%}.glass{background:hsla(0,100%,97%,.08);border-radius:16px;box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid hsla(0,100%,97%,.058)}.glass-text{color:#d4d2d2;font-weight:400}header{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;max-width:1200px;height:4rem;padding:10px 20px;color:#fff;margin:0 auto;z-index:2;&:after{position:absolute;height:1px;width:100%;content:"";background:hsla(0,100%,97%,.29);bottom:0;left:0}svg{height:100%}h1{font-size:1.3rem}.searchbar{position:relative;display:flex;width:85%;height:80%;padding:0 10px;border-radius:12px;z-index:1;&:focus-within{#searchInput{outline:none;+svg{fill:#fff;transition:fill .3s}~.suggestions-list{display:block}}}#searchInput{width:100%;font-size:1rem;background:none;border:none;color:#fff;&::placeholder{color:hsla(0,100%,97%,.29)}}svg{padding:5px 0 5px 5px;height:100%;width:35px;fill:hsla(0,100%,97%,.2);transition:fill .3s}.suggestions-list{position:absolute;top:calc(100% + 15px);left:0;width:100%;list-style-type:none;display:none;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);background-color:var(--bg-color-1);box-shadow:0 10px 40px 0 hsla(0,0%,100%,.075);border:1px solid hsla(0,0%,100%,.096);-webkit-backdrop-filter:brightness(60%);backdrop-filter:brightness(60%);li{cursor:pointer;border-radius:16px;transition:background .5s;&:hover{background:hsla(0,100%,97%,.08);box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(500px);backdrop-filter:blur(500px);border:1px solid hsla(0,100%,97%,.058);transition:background .5s}a{width:100%;padding:10px;display:block}}}}.menu-button{height:21px;width:40px;flex-shrink:0;display:flex;flex-direction:column;justify-content:space-between;background:none;border:none;cursor:pointer;&:hover{>div{background-color:#fff;transition:background-color .3s}}.bar{width:70%;height:2px;border-radius:1px;background-color:hsla(0,100%,97%,.29);transition:background-color .3s;&:nth-child(2){align-self:center}}}}main{max-width:1200px;width:100%;height:100%;margin:auto;color:#fff;text-shadow:rgba(0,0,0,.663) 1px 0 5px;.current{display:flex;flex-direction:column;align-items:center;height:40%;justify-content:center;.currentCity{font-size:4rem;display:flex;align-items:center;svg{height:40px;cursor:pointer;stroke:#fff;fill:none;&.checked{fill:#fff}}}.date{width:100%;margin-top:10px;padding:0 20px;.day-selector{display:flex;width:100%;justify-content:space-between;overflow-x:scroll;scroll-snap-type:x mandatory;&::-webkit-scrollbar{display:none}button{scroll-snap-align:start;cursor:pointer;font-size:1.7rem;font-weight:300;background:none;border:none;color:#fff;padding:5px 25px;&.active{background:hsla(0,100%,97%,.08);border-radius:16px;box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid hsla(0,100%,97%,.058)}}}}.temperature{font-size:3rem;font-weight:600}.sky{display:flex;align-items:center;gap:3px;p{font-size:1.5rem}p,svg{display:block}svg{height:3.5rem}}}.weather-info{display:flex;gap:20px;overflow-y:visible;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-padding:20px;width:100%;height:150px;padding:20px;&::-webkit-scrollbar{display:none}.card{height:100%;min-width:calc(50% - 10px);padding:5px 10px 10px;scroll-snap-align:start;box-shadow:none;overflow:visible;position:relative;box-shadow:0 4px 30px rgba(0,0,0,.1);h3{position:relative;margin-bottom:10px;&:after{position:absolute;height:1px;width:100%;content:"";background:hsla(0,100%,97%,.29);bottom:-5px;left:0}}p{font-size:2.5rem;display:flex;justify-content:center;align-items:center;text-align:center;height:calc(100% - 25px);margin:auto auto 5px}}}.hourly{padding:5px 10px 10px;margin:20px;h3{position:relative;margin-bottom:10px;&:after{position:absolute;height:1px;width:100%;content:"";background:hsla(0,100%,97%,.29);bottom:-5px;left:0}}.preview-h.mobile{display:flex;gap:20px;overflow-x:scroll;&::-webkit-scrollbar{display:none}.h{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-size:20px;h4{font-weight:400}}}.preview-h.desktop{display:none}}.daily{padding:5px 10px 0;margin:0 20px;h3{position:relative;margin-bottom:5px;&:after{position:absolute;height:1px;width:100%;content:"";background:hsla(0,100%,97%,.29);bottom:-5px;left:0}}.preview-d{display:flex;flex-direction:column;font-weight:400;font-size:1.3rem;.day{display:flex;align-items:center;height:50px;&:not(:last-child){border-bottom:1px solid hsla(0,100%,97%,.29)}h4{font-weight:400;width:95px}svg{height:90%;margin:0 auto 0 30px}.temp{display:flex;justify-self:flex-end;gap:10px;.min{color:#c7d1d1;text-shadow:#4c4c4c 1px 0 5px}}}}}}footer{width:100%;max-width:1200px;margin:20px auto 0;padding:10px;border-top:1px solid hsla(0,100%,97%,.29);display:flex;justify-content:center;.credits{display:flex;gap:20px;align-items:center;color:#fff;text-shadow:rgba(0,0,0,.663) 1px 0 5px}}@media screen and (max-width:449px){h1#title{display:none}svg#favicon{display:block;padding:5px}.weather-info{.card{p{font-size:2rem!important;text-overflow:ellipsis}}}}@media screen and (min-width:821px){main{.weather-info{overflow:visible;.card{min-width:auto;width:25%}}}}@media screen and (min-width:1241px){header{padding:10px 0}main{display:flex;flex-direction:column;gap:20px;margin:0 auto;justify-content:space-between;.current{.date{padding:0}}.informations{display:flex;gap:20px;height:525px;.left{width:50%;display:flex;flex-direction:column;height:100%;justify-content:space-between;.current{gap:12px;margin-bottom:25px}.weather-info{flex-wrap:wrap;justify-content:space-between;flex-direction:row;padding:0;height:-moz-fit-content;height:fit-content;.card{width:calc(50% - 10px);height:150px}}.daily{margin:10px 0 0}}.hourly{margin:0;width:50%;max-width:50%;.preview-h.mobile{display:none}.preview-h.desktop{display:flex;flex-direction:column;justify-content:space-around;height:calc(520px - 15px - 23px);font-weight:400;font-size:1.3rem;.day{display:flex;align-items:center;height:25%;&:not(:last-child){border-bottom:1px solid hsla(0,100%,97%,.29)}>p{justify-content:center;align-items:center;height:100%;width:49px;padding-right:10px}.hours,>p{display:flex}.hours{justify-content:space-around;border-left:1px solid hsla(0,100%,97%,.29);width:520px;.h{flex-direction:column;align-items:center;justify-content:center;gap:0;font-size:20px;padding:3px 0;h4{font-weight:400}}}}}}}}}.menu{visibility:hidden;position:fixed;top:0;left:0;width:100%;height:110%;z-index:100;display:flex;justify-content:space-around;align-items:center;-webkit-backdrop-filter:blur(0) opacity(0);backdrop-filter:blur(0) opacity(0);filter:opacity(0);transition:all .2s;color:#fff;text-shadow:rgba(0,0,0,.663) 1px 0 5px;.wrapper{display:flex;flex-direction:column;align-items:center;height:80%;width:60%;gap:30px;h2{font-size:3rem}ul{list-style-type:none;display:flex;flex-direction:column;align-items:center;width:100%;li{font-size:1.5rem;padding:10px 0;width:100%;max-width:500px;display:flex;align-items:center;justify-content:space-between;&:not(&:last-child){border-bottom:1px solid hsla(0,100%,97%,.29)}svg{width:35px;height:35px;stroke:#fff;fill:#fff;cursor:pointer;&:hover{fill:none}}}}}.close-menu{position:absolute;background:none;border:none;width:30px;height:30px;cursor:pointer;top:20px;right:20px;svg{fill:#fff}}&.visible{-webkit-backdrop-filter:blur(40px) opacity(1);backdrop-filter:blur(40px) opacity(1);filter:opacity(1);visibility:visible}}main.noCity{z-index:1;padding:20px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:30px;p{font-size:3rem;text-align:center;text-wrap:wrap}button{z-index:2;background:hsla(0,100%,97%,.08);display:flex;align-items:center;gap:10px;border-radius:16px;box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid hsla(0,100%,97%,.058);color:#fff;cursor:pointer;font-size:2rem;padding:10px 30px;transition:all .5s;&:hover{color:var(--bg-color-1);background-color:#fff;transition:all .5s;svg{fill:var(--bg-color-1);transition:all .5s}}svg{z-index:1;transition:all .5s;height:2rem;fill:#fff}}&>svg{position:absolute;height:70%;fill:#fff;opacity:.1;filter:blur(2px)}}.loader{margin:auto}.loader,main.notfound{display:flex;justify-content:center;align-items:center}main.notfound{position:relative;font-size:3rem;p{z-index:2}span{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:25rem;z-index:1;transform:rotate(-25deg);filter:blur(2px);color:#fff;opacity:.1;border:1px solid red;font-weight:500}}