:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;color-scheme:light;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary-color: #212121;--primary-bg: #fff;--secondery-bg: #F9FBFF;--invert: 0%;--invert-img: invert(10%) contrast(144%) brightness(100%) hue-rotate(320deg)}::spelling-error{text-decoration:underline dotted #f348}::selection{background:#0f86}*{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{background:transparent;color:transparent;width:0}body{height:100dvh;max-width:100dvw;background-color:var(--primary-bg);color:var(--primary-color)}#root{height:100%}.loader-container{height:100%;display:grid;place-items:center}.loader{height:50px;aspect-ratio:1 / 1;border-radius:50%;background-image:conic-gradient(rgba(14,103,255,.6) 50deg,transparent 230deg);animation:loading .4s linear infinite}.loader:before{content:"";top:5px;right:5px;bottom:5px;left:5px;position:absolute;background-color:#fff;border-radius:50%}@keyframes loading{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}@media (prefers-color-scheme: dark){:root{--primary-color: #efefef;--primary-bg: #030303;--invert: 100%;--hue: 164deg;--invert-img: invert(100%) contrast(204%) brightness(160%) hue-rotate(var(--hue));--secondery-bg: #ffffff15}}.items{background:#fff;border:2px solid lime}.Navbar{height:64px;grid-area:navbar}.Section1{height:100%;grid-area:section1}.Section2{grid-area:section2;height:100%}.Section3{grid-area:section3;height:100%}._mainFrame_w9deb_1{height:100%;display:grid;grid-template-areas:"navbar navbar navbar" "section1 section2 section2" "section3 section3 section3";grid-template-columns:clamp(300px,100%,380px) 1fr 1fr;grid-template-rows:64px clamp(430px,60dvh,430px) 1fr}@media (max-width: 780px){._mainFrame_w9deb_1{align-items:center;grid-template-areas:"navbar navbar navbar" "section1 section1 section1" "section2 section2 section2" "section3 section3 section3";grid-template-rows:64px clamp(430px,60dvh,430px) clamp(300px,55vh,400px) clamp(300px,20dvh,360px);grid-template-columns:1fr 1fr 1fr}}.Navbar{width:100%;display:grid;grid-template-columns:minmax(max-content,20%) 1fr;align-items:center;position:sticky;top:0;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);z-index:2}.nav-menu{object-fit:contain;height:70%;margin-left:20%;filter:invert(var(--invert))}.SButton{border-radius:50%;height:60%;filter:invert(var(--invert))}.SBox{height:60%;width:clamp(150px,60%,600px)}.SBox>input{height:100%;width:100%;border-radius:1px;border:1px solid #ddd6;background:var(--secondery-bg);caret-color:#56aa55;outline:none;padding:6px;color:var(--primary-color);font-size:17px;letter-spacing:1px}.SBox>input:focus{outline:2px solid #ddd3}.SBox>input::placeholder{font-size:13px;color:var(--primary-color)}.Searchbox{height:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-around}.Section1{display:grid;grid-template-rows:max-content max-content 1fr}.Section1 .weather-main{display:grid;align-items:center;grid-template-columns:1fr 1fr;padding:10px}.weather-main .icon-{--default-width: clamp(150px, 45%, 200px);width:var(--default-width);filter:drop-shadow(-2px 5px 50px #58b7ff76) brightness(103%) var(--invert-img)}.tf{font-size:2rem}.temperature>.temp{font-size:4.5rem;text-align:center;font-weight:500;font-family:Arial,Helvetica,sans-serif}.description{text-align:center;font-size:1.2rem;font-weight:350;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.cityName{display:flex;flex-direction:column;gap:5px;font-size:2rem;padding:15px;font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif}.date{font-size:.9rem;font-family:Cambria,Cochin,Georgia,Times,Times New Roman,serif}@keyframes react-loading-skeleton{to{transform:translate(100%)}}.react-loading-skeleton{--base-color: #ebebeb;--highlight-color: #f5f5f5;--animation-duration: 1.5s;--animation-direction: normal;--pseudo-element-display: block;background-color:var(--base-color);width:100%;border-radius:.25rem;display:inline-flex;line-height:1;position:relative;-webkit-user-select:none;user-select:none;overflow:hidden}.react-loading-skeleton:after{content:" ";display:var(--pseudo-element-display);position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:linear-gradient(90deg,var(--base-color),var(--highlight-color),var(--base-color));transform:translate(-100%);animation-name:react-loading-skeleton;animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite}@media (prefers-reduced-motion){.react-loading-skeleton{--pseudo-element-display: none}}.skeleton,.weatherbox.skeleton{border:1px solid red;border-radius:10px}.skeleton.text{display:inline}.temp-icon{display:hidden;opacity:0}.box-shadow{background:var(--secondery-bg);box-shadow:-2px 3px 10px 1px #3331,-1px 1px 25px #2251;border-radius:25px}.weatherbox{width:95%;height:60%;min-height:88px;max-height:105px;margin:auto;display:grid;border-radius:25px;grid-template-columns:repeat(3,1fr);padding:10px 0}.weatherbox .infos .icon{object-fit:contain;height:40%;filter:contrast(160%) hue-rotate(326deg)}.weatherbox .infos{display:flex;overflow:hidden;flex-direction:column;justify-content:center;align-items:center;gap:2px}.weatherbox .infos>.value{font-size:.8rem;font-weight:600;padding-top:6px;font-family:Cambria,Cochin,Georgia,Times,Times New Roman,serif}.weatherbox .infos>.name{font-size:.8rem;font-family:Cambria,Cochin,Georgia,Times,Times New Roman,serif}.weatherbox *{border:none}.forecast-container::-webkit-scrollbar{width:0px;height:0px}.forecast-container{display:flex;gap:10px;overflow-x:auto;flex-wrap:nowrap;scroll-behavior:smooth;width:100%;height:100%;flex-direction:row;padding:5px 10px;flex-basis:40%;position:relative;align-items:center}.forecast-details{background-color:#f0f1;border:1px solid #f0f8;margin:8px;display:grid;border-radius:8px;place-items:center;flex-grow:1}.forecast{border-radius:12px;aspect-ratio:1 / 1.7;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:grid;grid-template-rows:3fr 1.8fr 1fr;transition:.2s;height:80%;cursor:pointer;position:relative}.forecast:hover{transform:scale(1.3);z-index:2}.forecast:hover+.forecast{transform:scale(1.2);z-index:1}.forecast:hover+.forecast+.forecast{transform:scale(1.1)}.forecast:has(+.forecast:hover){transform:scale(1.2)}.forecast:has(+.forecast+.forecast:hover){transform:scale(1.1)}.forecast>.forecast-icon{align-self:center;justify-self:center;width:70%;margin-top:20%;filter:drop-shadow(-2px 5px 15px #58b7ff76) blur(0px) brightness(103%) var(--invert-img)}.forecast>.percentage{justify-self:center;align-self:center;transform:translate(15%)}.forecast>.time-stamp{font-size:.6rem;justify-self:center;font-weight:350;display:flex;gap:2px;align-self:center}.Section2{display:flex;flex-direction:column}*{margin:0;padding:0;box-sizing:border-box}._error_n1s2x_1{color:#dd2260;font-size:1.2rem;text-align:center;font-weight:700;font-family:Roboto,sans-serif;border:1px solid rgba(255,0,128,.629);margin-top:20px;grid-area:section1;align-self:baseline;position:absolute;top:64px;width:clamp(70px,calc(100% - 40px),680px);place-self:center;aspect-ratio:1 / .8;display:flex;max-height:200px;flex-direction:column;justify-content:space-evenly;background-color:#e30f6b13;border-radius:8px;animation:_fade-in_n1s2x_1 .5s ease}._button_n1s2x_27{all:unset;width:clamp(20px,calc(100% - 40px),400px);background:var(--primary-color);color:var(--primary-bg);border-radius:6px;height:50px;cursor:pointer;box-shadow:0 0 50px 1px #0001;transition:.6s;outline:4px solid transparent}._error_n1s2x_1:hover ._button_n1s2x_27{box-shadow:0 0 30px 1px #d221;animation:_float_n1s2x_1 .1s ease-in 3}._error_n1s2x_1:hover ._button_n1s2x_27:hover{transition:.1s;outline:4px solid #0004;animation:none}._button_n1s2x_27:active{transform:scale(.9)}@keyframes _float_n1s2x_1{0%,to{transform:rotate(1deg) translate(1%,1%)}50%{transform:rotate(-1deg) translate(-1%,-1%)}}@keyframes _fade-in_n1s2x_1{0%{transform:translateY(-50%)}50%{transform:translateY(10%)}to{transform:translate(0)}}