body{margin:0;padding:0}body::-webkit-scrollbar{display:none}.app h1{font-family:Orbitron,sans-serif}.app{flex-direction:column;justify-content:start;align-items:center;width:100%;min-height:100vh;display:flex;position:relative;overflow:hidden}.app:before{content:"";background-image:var(--gradient), var(--bg-image);filter:blur(4px);z-index:-1;background-position:50%;background-repeat:no-repeat;background-size:cover;position:absolute;inset:0;transform:scale(1.1)}.app h1{-webkit-user-select:none;user-select:none;color:var(--text-color);text-shadow:0 2px 5px #000000b3, 0 0 15px var(--glow-color);justify-content:center;align-items:center;gap:10px;font-size:3.5rem;display:flex}.h2Part-2{gap:5px;display:flex}.app-icon svg{color:var(--text-color);filter:drop-shadow(0 2px 5px #0009) drop-shadow(0 0 15px var(--glow-color));font-size:3.5rem}@media (width<=850px){.app h1{text-align:center;letter-spacing:4px;flex-wrap:wrap;justify-content:center;align-items:center;gap:0;margin:40px 0 20px;display:flex}.h2Part-2{font-size:2.9rem}}.experimental-btn{color:#fff;cursor:pointer;background:linear-gradient(270deg,#f0c,#33f,#ff8c00,#00c3ff) 0 0/600% 600%;border-radius:5px;justify-content:center;align-items:center;width:3rem;height:3rem;transition:all .3s;animation:6s infinite gradientFlow;display:flex;position:absolute;bottom:20px;right:30px}.experimental-btn svg{font-size:2rem}.experimental-btn:hover{transform:scale(1.05)}.experimental-btn.hide{display:none}@keyframes gradientFlow{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@media (width<=850px){.experimental-btn{position:unset;border:2px solid var(--glow-color);background:0 0;border-radius:4px;width:40px;height:40px;margin-right:5px;animation:none}.experimental-btn svg{color:var(--text-color);font-size:1.5rem}.experimental-btn:hover{transform:none}.experimental-btn.hide{display:flex}}.searchBox{-webkit-backdrop-filter:blur(14px);border:1px solid var(--text-color);justify-content:center;align-items:top;background:#00000059;border-radius:5px;width:333px;margin-bottom:10px;padding:8px;display:flex;box-shadow:0 0 2px #0009}.searchBar input{color:var(--text-color)}.searchBar label{color:var(--text-color)!important}.searchBar .MuiInputLabel-root{font-size:13px;transform:translate(14px,11px)scale(1)}.searchBar .MuiInputLabel-root.Mui-focused,.searchBar .MuiInputLabel-shrink{transform:translate(14px,-6px)scale(.75)}.searchBar .MuiOutlinedInput-root fieldset{border:2px solid var(--glow-color)}.searchBar:hover .MuiOutlinedInput-root fieldset,.searchBar .MuiOutlinedInput-root.Mui-focused fieldset{border-color:var(--glow-color)}.searchBtn{height:40px;color:var(--text-color)!important;border:2px solid var(--glow-color)!important;padding:7px 11px!important}.mobileBtn{border:2px solid var(--glow-color);width:40px;height:40px;color:var(--text-color);background-color:#0000;border-radius:4px;justify-content:center;align-items:center;display:inline-flex}.searchBar{flex:1;min-width:0}.searchBox form{flex:1;gap:5px;min-width:0;display:flex}.compass{justify-content:center;align-items:center;width:95px;height:95px;display:flex}.compass svg{color:#000;width:100%;height:100%}rect,polygon{color:var(--glow-color)}.needle{transform-origin:50%;transition:none}.sun-container{justify-content:center;align-items:center;height:80px;margin-top:20px;display:flex}.sun-track{background-color:var(--glow-color);z-index:1;border-radius:999px;align-items:center;width:80%;height:6px;display:flex;position:relative}.sun-marker-wrapper{z-index:3;position:absolute;transform:translate(-50%)}.sun-marker{background-color:var(--glow-color);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);justify-content:center;align-items:center;width:15px;height:20px;display:flex}.sun-marker span{background-color:var(--text-color);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);width:10px;height:15px;display:inline-block}.sun-indicator{z-index:2;background-color:#000;border-radius:50%;width:12px;height:12px;position:absolute;transform:translate(-50%)}.sun-indicator svg{font-size:2rem;position:relative;top:-40px;transform:translate(-35%)}.sun-label{text-align:center;color:#000;white-space:nowrap;font-size:.7rem;font-weight:600;line-height:.8rem;position:absolute;top:25px;transform:translate(-30%)}.sun-label>:first-child{font-size:.6rem}.sun-label p{margin:0}.sun-label.current{top:-46px;transform:translate(-156%)}.sun-label.current.exp{transform:translate(-122%)}.sun-marker-wrapper,.sun-indicator{transition:left 3s ease-in-out}.sun-indicator.crazy{animation:3s ease-in-out infinite alternate moveSun}@keyframes moveSun{0%{left:0%}to{left:100%}}.sun-marker-wrapper.crazy{animation:1s ease-in-out infinite alternate markerMove}@keyframes markerMove{0%{transform:translate(-50%)translateY(5px)}to{transform:translate(-50%)translateY(-5px)}}.satellite{animation:1.5s ease-in-out infinite alternate float}@keyframes float{0%{transform:translate(-35%)rotate(-20deg)}to{transform:translate(-35%)rotate(20deg)}}.moon{animation:1.5s ease-in-out infinite alternate moonfloat}@keyframes moonfloat{0%{transform:translate(-35%)rotate(-30deg)}to{transform:translate(-35%)rotate(0)}}.sun{animation:3s linear infinite sunfloat}@keyframes sunfloat{0%{transform:translate(-35%)rotate(0)}to{transform:translate(-35%)rotate(360deg)}}.sounnd-btn{color:var(--text-color);font-size:2rem!important}.btn-container{border:2px solid var(--glow-color);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;background-color:#0000004d;border-radius:5px;justify-content:center;align-items:center;width:2.8rem;height:2.8rem;padding:0;transition:all .3s;display:flex;position:absolute;top:20px;left:20px}.btn-container:hover{box-shadow:0 0 8px var(--glow-color)}.btn-container:active{transform:scale(.9)}.btn-container.active{opacity:.5;transform:scale(.8)}.btn-container.active:hover{opacity:.8;transform:scale(1)}@media (width<=850px){.btn-container{top:10px;left:10px;transform:scale(.8)}.btn-container.active{transform:scale(.7)}.btn-container.active:hover{transform:scale(.8)}}.mediaOverlay{background:linear-gradient(#0000,#0003);flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.para{margin:0}.cityName{margin:0;font-size:2.5rem;position:absolute;top:153px;left:5px}.temp{margin:0;font-size:2rem;font-weight:700;position:absolute;top:160px;right:5px}.condition{flex-direction:column;justify-content:center;align-items:center;margin:0;display:flex;position:absolute;top:-15px;right:0}.cityName,.temp,.condition{color:#fff}.icon svg{color:#fff6;margin:0;font-size:10rem;position:absolute;top:24px;left:98px}.condition p{text-align:center;margin:0;font-size:.7rem;font-weight:700;position:absolute;top:75px}.wind{justify-content:space-between;align-items:center;display:flex}.wind div{text-align:center;width:100px;font-size:.7rem;font-weight:550}.wind div p{margin:0}.wind div p:last-child{font-size:.9rem;font-weight:700}.PanelContainer{z-index:8;transition:all .4s;position:absolute;bottom:20px;right:-400px}.PanelContainer.open{right:20px}.ExperimentalPanel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid #ffffff1a;align-items:center;position:relative;box-shadow:0 0 20px #f0f3,0 10px 40px #00000080;color:#fff!important;background:#0000008c!important;border-radius:5px!important}.ExperimentalPanel h3{margin:0 0 8px;font-weight:600;font-size:1.2rem!important}.ExperimentalPanel p{opacity:.9;font-size:.9rem}.closeBtnContainer{justify-content:end;display:flex}.closeBtnContainer button{color:#fff;font-weight:700}.options{flex-direction:column;gap:8px;margin-top:12px;display:flex}.option{border-radius:6px;justify-content:space-between;align-items:center;padding:6px 8px;transition:all .2s;display:flex}.option:hover{background:#ffffff14}.info{flex-direction:column;display:flex}.info p{opacity:1;margin:0;font-size:.95rem;font-weight:500}.info small{opacity:.7;font-size:.7rem}.option button{color:#00c3ff!important;min-width:auto!important;padding:4px 10px!important;font-size:.7rem!important}.option:not(:last-child){border-bottom:1px solid #ffffff0d}@media (width<=850px){.PanelContainer{width:90%;max-width:400px;inset:500px auto auto 50%;transform:translate(-50%,100%)}.PanelContainer.open{inset:190px auto auto 50%;transform:translate(-50%)}.panelHeading{text-align:center}.closeBtnContainer{justify-content:center}}