@import"https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Nunito,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{position:relative;display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(180deg,#df7861,#afbeff 48%,#6e8cff)}body:after{background:linear-gradient(0deg,#152a38,#29435c 40%,#152038 91%);content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s ease-in-out}body.dark-mode:after{opacity:1}.wrapper{width:25rem;border-radius:.4rem;background:#d6d9da;box-shadow:0 0 10px #0003;transition:background-color .3s ease-in-out}.wrapper header{color:#708dff;font-size:1.3rem;font-weight:600;padding:1rem .9rem;display:flex;align-items:center;justify-content:space-between;border-block-end:1px solid #dadef0;transition:color .3s ease-in-out,border .3s ease-in-out}.wrapper header i{cursor:pointer;font-size:0rem;transition:color .3s ease-in-out}.wrapper.active header i{font-size:1.2rem}.wrapper.active header i:before{padding:1rem .6rem}.wrapper.active .input{display:none}.wrapper.active .weather-sect{display:flex}.wrapper.active .weather-sect img{max-width:8rem}.wrapper.active .weather-sect .temp{display:flex;font-size:4.5rem;font-weight:600;color:#333;transition:color .3s ease-in-out}.wrapper.active .weather-sect .temp .numb{font-weight:600}.wrapper.active .weather-sect .temp .deg{font-size:2.5rem;margin:.6rem .3rem 0 0;display:block}.wrapper.active .weather-sect .weather{color:#333;transition:color .3s ease-in-out}.wrapper.active .weather-sect .location{display:flex;align-items:center;font-size:1.3rem;margin-block-end:1.9rem;color:#333;transition:color .3s ease-in-out}.wrapper.active .weather-sect .location i{font-size:1.4rem;margin-inline-end:.3rem}.wrapper.active .weather-sect .bottom-details{width:100%;border-block-start:1px solid #dadef0;display:flex;align-items:center;justify-content:space-between;color:#333;transition:color .3s ease-in-out,border .3s ease-in-out}.wrapper.active .weather-sect .bottom-details .column{width:100%;padding-block:.9rem;display:flex;align-items:center;justify-content:center}.wrapper.active .weather-sect .bottom-details .column i{color:#708dff;font-size:2.5rem;padding-inline-end:.5rem}.wrapper.active .weather-sect .bottom-details .column.humidity{border-inline-start:1px solid #dadef0;transition:border .3s ease-in-out}.wrapper.active .weather-sect .bottom-details .column.humidity span,.wrapper.active .weather-sect .bottom-details .column .details .temp{font-size:1.2rem;font-weight:600;margin-block-start:-.2rem}.wrapper.active .weather-sect .bottom-details .column .details .temp .deg{margin:0;font-size:1.1rem;padding:0 2px 0 1px}.wrapper.active .weather-sect .bottom-details .column .details p{font-size:.9rem;margin-block-start:-.3rem}.wrapper .input{margin:1.2rem 1.5rem 1.9rem}.wrapper .input .info-txt{display:none;font-size:1.1rem;text-align:center;padding:.7rem .6rem;border-radius:.4rem;margin-block-end:.9rem}.wrapper .input .info-txt.error{display:block;color:#721c24;background:#f8d7da;border:1px solid #dadef0}.wrapper .input .info-txt.pending{display:block;color:#0c5460;background:#d1ecf1;border:1px solid #bee5eb}.wrapper .input :where(input,button){width:100%;height:3.4rem;border:none;outline:none;font-size:1.1rem;border-radius:.4rem}.wrapper .input input{text-align:center;border:1px solid #dadef0;transition:color .3s ease-in-out,border .3s ease-in-out,background-color .3s ease-in-out}.wrapper .input input:is(:focus,:valid){border:2px solid #708dff;transition:border .3s ease-in-out}.wrapper .input .seperator{height:1px;width:100%;margin-block:1.5rem;background:#dadef0;display:flex;align-items:center;justify-content:center;transition:background-color .3s ease-in-out}.wrapper .input .seperator:before{content:"or";color:#999;font-size:1.2rem;padding-inline:.9rem;background:#d6d9da;transition:color .3s ease-in-out,background-color .3s ease-in-out}.wrapper .input button{color:#fff;cursor:pointer;background:#829bfb;background:linear-gradient(180deg,#829bfb 48%,#6e8cff);transition:background-color .3s ease-in-out,box-shadow .2s ease-in-out}.wrapper .input button:hover{box-shadow:inset 0 0 10px #0009}.wrapper .weather-sect{margin:1.9rem 0 0;display:none;align-items:center;flex-direction:column}.theme-switch{position:relative;width:3.6rem;height:2rem}.theme-switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;background-color:#fff;transition:.3s;border-radius:2rem}.slider:before{position:absolute;content:"";height:1.5rem;width:1.5rem;left:.25rem;bottom:.25rem;background:transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='226.416 231.619 47.167 45.04' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: rgb(130, 130, 130);' d='M46.369,28.793c-11.852,5.935-26.271,1.138-32.206-10.714c-2.748-5.488-3.191-11.524-1.702-17.016 C1.197,7.236-3.255,21.263,2.544,32.844C8.479,44.696,22.898,49.493,34.75,43.558c6.364-3.187,10.69-8.821,12.417-15.19 C46.903,28.513,46.64,28.658,46.369,28.793z' transform='matrix(1, 0, 0, 1, 226.416672, 230.555847)'/%3E%3C/svg%3E") no-repeat right top;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#545454}input:checked+.slider:before{transform:translate(1.6rem)}input:focus+.slider{box-shadow:0 0 3px #000}.dark-mode .wrapper{background:#423f3e}.dark-mode .wrapper header{color:#f6e9e9;border-block-end:1px solid #333}.dark-mode .wrapper .slider:before{background:transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 420 420' style='enable-background:new 0 0 420 420;' xml:space='preserve'%3E%3Cg%3E%3Cpolygon style='fill:%23F5C525;' points='420,210 375.774,247.857 399.238,301.145 342.926,315.986 340.945,374.184 283.764,363.211 256.724,414.779 210,380 163.276,414.779 136.236,363.211 79.055,374.184 77.073,315.986 20.762,301.144 44.226,247.858 0,210 44.226,172.143 20.762,118.855 77.074,104.014 79.055,45.816 136.236,56.789 163.276,5.221 210,40 256.723,5.221 283.764,56.789 340.945,45.816 342.927,104.014 399.238,118.856 375.774,172.142 '/%3E%3Ccircle style='fill:%23F8A805;' cx='210' cy='210' r='140'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A") no-repeat right top}.dark-mode .wrapper .input input{color:#f6e9e9;border:1px solid #423f3e;background:#272121}.dark-mode .wrapper .input input:is(:focus,:valid){border:2px solid #708dff}.dark-mode .wrapper .input button{background:#708dff}.dark-mode .wrapper .seperator{background:#999}.dark-mode .wrapper .seperator:before{color:#999;background:#423f3e}.dark-mode .wrapper .weather-sect .temp,.dark-mode .wrapper .weather-sect .location{color:#f6e9e9}.dark-mode .wrapper .weather-sect .bottom-details{border-block-start:1px solid #333;color:#f6e9e9}.dark-mode .wrapper .weather-sect .bottom-details .column.humidity{border-inline-start:1px solid #333}.dark-mode .wrapper .weather-sect .weather{color:#f6e9e9}