@import"https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Jura:wght@300..700&family=Pathway+Extreme:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Quicksand:wght@300..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";.loading{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:#1e1e1e}.loader{--cloud-color: #4e4e4e;--time-animation: 1s;transform:scale(1)}.loader #cloud{width:150px;height:150px}.loader #cloud rect{fill:var(--cloud-color)}.loader #cloud g:nth-child(3){transform-origin:50% 72.8938%;filter:drop-shadow(0 0 8px #1e1e1e);animation:rotation var(--time-animation) linear infinite}.loader #shapes g g circle{animation:cloud calc(var(--time-animation) * 2) linear infinite}.loader #shapes g g circle:nth-child(2){animation-delay:calc(var(--time-animation) * 2 / -3)}.loader #shapes g g circle:nth-child(3){animation-delay:calc(var(--time-animation) * 2 / -1.5)}.loader svg #lines g line{stroke-width:5;transform-origin:50% 50%;rotate:-65deg;animation:lines calc(var(--time-animation) / 1.32) linear infinite}@keyframes lines{0%{transform:translateY(-10px)}to{transform:translateY(8px)}}@keyframes cloud{0%{cx:20;cy:60;r:15}50%{cx:50;cy:45;r:20}to{cx:80;cy:60;r:15}}.menu-main{display:flex;flex-direction:column;height:100vh;width:100%;overflow:auto;background:linear-gradient(to bottom,#101010,#303030);color:#eaeaea;font-family:Quicksand,sans-serif}.menu-main ::-webkit-scrollbar{display:none}@media(min-width:700px){.menu-main{height:900px;width:400px;min-height:unset;overflow:auto}}.menu-head{display:flex;flex-direction:row;align-items:self-start;padding:20px 40px 0 20px;gap:10px;position:relative;z-index:1}.menu-logo{width:50px;height:50px;filter:brightness(0) saturate(100%) invert(61%) sepia(33%) saturate(4995%) hue-rotate(331deg) brightness(98%) contrast(87%)}.menu-title{font-size:32px;font-weight:700;margin:0;color:#eaeaea}.menu-divider{display:flex;flex-direction:row;text-align:center;align-items:center;justify-content:space-between;margin:15px 40px}.menu-divider__subtitle{font-size:16px;font-weight:200;color:#fffc;margin:0}.menu-divider__button{font-size:16px;font-weight:700;color:#eb6e4c;font-family:Quicksand,sans-serif;background:transparent;border:none;cursor:pointer}.menu-body{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;padding:10px;position:relative;z-index:1;flex:1;overflow-y:auto}.menu-body ::-webkit-scrollbar{display:none}.menu-item{display:flex;flex-direction:row;position:relative;justify-content:space-between;align-items:center;margin:10px;padding:18px;border:2px solid #3e3e3e;color:#eaeaea;height:fit-content;width:90vw;box-sizing:border-box;background-size:cover;background-position:center;box-shadow:#3131318f 0 22px 70px 4px;border-radius:100px;text-align:center;background-repeat:no-repeat;cursor:pointer;transition:background-color .3s ease,color .3s ease;overflow:hidden}@media(min-width:700px){.menu-item{width:370px}}.menu-item:before{content:"";position:absolute;inset:0;background-color:#00000080;z-index:0;border-radius:8px;pointer-events:none;transition:background-color .3s ease}.menu-item>*{position:relative;z-index:1}.menu-item:hover:before{background-color:#0000004d}.menu-item__left-side{display:flex;flex-direction:row;align-items:center;gap:15px}.menu-item__left-content{display:flex;flex-direction:row;align-items:center}.menu-item__center{display:flex;flex-direction:column;align-items:start;justify-content:start}.menu-item__right{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-around;gap:2px}.menu-item__center-top{display:flex;flex-direction:row;gap:10px;align-items:center;justify-content:center}.menu-item__center-bottom{display:flex;flex-direction:column;width:100%;gap:10px;align-items:start;justify-content:center}.menu-item__icon{background-color:#d3d3d380;border-radius:25px;width:50px;height:50px}.menu-item__delete-icon{display:none;filter:invert(30%) sepia(90%) saturate(4000%) hue-rotate(350deg) brightness(90%) contrast(90%);width:40px;height:40px;margin:5px;cursor:pointer;z-index:2}.menu-item__location{font-size:20px;font-weight:700;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.menu-item__country{font-size:12px;font-weight:300}.menu-item__condition{font-size:14px;font-weight:500;margin:12px 0 0}.menu-item__temp{font-size:32px;font-weight:700}.menu-item__temp-unit{font-size:16px;font-weight:700;padding-top:5px;margin:0 5px 0 0}.search-container{display:flex;right:25px;bottom:25px;width:100%;align-items:center;justify-content:flex-end;position:relative;z-index:1}.search-container__button{font-family:inherit;font-size:20px;background:#212121;color:#fff;fill:#9b9999;padding:.7em 1em .7em .9em;display:flex;align-items:center;cursor:pointer;border:none;border-radius:15px;font-weight:1000;box-shadow:#0006 0 2px 4px,#0000004d 0 7px 13px -3px,#0003 0 -3px inset}.search-container__button span{display:block;margin-left:.3em;transition:all .3s ease-in-out}.search-container__button svg{display:block;transform-origin:center center;transition:transform .2s ease-in-out}.search-container__button:hover{background:#212121}.search-container__button:hover .svg-wrapper{transform:scale(1.25);transition:.2s linear}.search-container__button:hover svg{transform:translate(1.5em) scale(1.3);fill:#eb6e4c}.search-container__button:hover span{opacity:0;transition:.2s linear}.search-container__button:active{transform:scale(.95)}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1000;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.modal-overlay.show{opacity:1;visibility:visible}.modal-content{position:relative;background:linear-gradient(to bottom,#101010,#303030);border-radius:20px;padding:30px 30px 10px;max-width:80%;width:360px;max-height:80vh;height:50vh;overflow-y:auto;box-shadow:0 10px 40px #00000080;transform:scale(.9) translateY(-20px);transition:transform .3s ease}.modal-overlay.show .modal-content{transform:scale(1) translateY(0)}.modal-close{position:absolute;top:30px;right:35px;background:transparent;border:none;font-size:30px;color:#eaeaea;cursor:pointer;z-index:1;transition:all .2s ease}.modal-close:hover{color:#eb6e4c;transform:scale(1.1)}.search-view__title{color:#eaeaea;margin-bottom:30px;padding-left:5px;font-size:24px;text-align:start}.search-view__input{width:90%;padding:12px 15px;border:none;border-radius:10px;background:#ffffff1a;color:#eaeaea;font-size:16px;outline:none;margin-bottom:20px}.search-view__input::placeholder{color:#ffffff80}.search-view__input:focus{background:#ffffff26}.search-view__results{max-height:300px;overflow-y:auto;padding-right:5px}.search-view__results::-webkit-scrollbar{display:none}.search-view__result-item{padding:12px 15px;background:#ffffff0d;border-radius:8px;margin-bottom:8px;cursor:pointer;transition:all .2s ease}.search-view__result-item:hover{background:#ffffff26;transform:translate(5px)}.search-view__result-item:last-child{margin-bottom:0}.search-view__result-name{color:#eaeaea;font-size:16px;font-weight:500;margin-bottom:4px}.search-view__result-details{color:#fff9;font-size:13px}.search-view__no-results,.search-view__error,.search-view__loading{color:#fff9;text-align:center;padding:20px;font-size:14px}.search-view__error{color:#ff6b6b}.search-view__loading{color:#ffffffb3;font-style:italic}.u-hidden{display:none!important}.u-flex{display:flex!important}.u-block{display:block!important}.weather-forecast__arrow-icon--hiding{opacity:0!important;transition:opacity .2s ease}.weather-forecast__arrow-icon--showing{opacity:1!important;transition:opacity .2s ease}.weather-panel__option-button--rotating-exit{transform:rotate(90deg) scale(.8)!important;transition:transform .15s ease}.weather-panel__option-button--rotation-reset{transform:none!important;transition:transform .15s ease}.weather-panel__option-button--fading-out{opacity:0!important;transition:opacity .2s ease}.weather-panel__option-button--fading-in{opacity:1!important;transition:opacity .2s ease}.u-opacity-0{opacity:0!important;transition:opacity .2s ease}.u-opacity-1{opacity:1!important;transition:opacity .2s ease}.u-rotate-exit{transform:rotate(90deg) scale(.8)!important;transition:transform .15s ease}.u-transform-reset{transform:none!important;transition:transform .15s ease}*{padding:0;margin:0}body{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#242424;font-family:Quicksand,sans-serif;color:#eaeaea}#app{font-family:Quicksand,sans-serif;height:100vh;height:100dvh;width:100vw;overflow:hidden}@media(min-width:700px){#app{height:900px;width:400px;min-height:unset;overflow:hidden}#app ::-webkit-scrollbar{display:none}}.weather-main{display:flex;flex-direction:column;isolation:isolate;height:100%;width:100%;position:relative;overflow:auto}.weather-main ::-webkit-scrollbar{display:none}.weather-main:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:var(--bg-image, linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, .1)));background-size:cover;background-position:center;background-repeat:no-repeat;z-index:-1}.weather-main:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,#00000080,#0000001a);pointer-events:none;z-index:-1}.weather-panel{display:flex;flex-direction:row;justify-content:space-between;padding:40px 20px 0 30px;transition:all .3s ease}.weather-panel--sticky{position:sticky;top:-1px;background-color:#000c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10;padding:15px 20px;border-radius:0 0 15px 15px;transition:all .3s ease;flex-direction:row}.weather-panel--sticky .weather-panel__overview{display:flex;flex-direction:row;margin:0;align-items:center;gap:25px}.weather-panel--sticky .weather-panel__current-date{display:none}.weather-panel--sticky .weather-panel__header{margin:0}.weather-panel--sticky .weather-panel__header-location{font-size:16px!important}.weather-panel--sticky .weather-panel__header-location-icon{width:16px!important}.weather-panel--sticky .weather-panel__min-max-temp,.weather-panel--sticky .weather-panel__sunrise-sunset{display:none}.weather-panel--sticky .weather-panel__temp-container{display:flex;flex-direction:row;align-items:flex-start}.weather-panel--sticky .weather-panel__temp-container .weather-panel__temperature{font-size:35px!important}.weather-panel--sticky .weather-panel__temp-container .weather-panel__temperature-unit{font-size:15px!important;margin-top:4px!important;margin-left:1px}.weather-panel--sticky .weather-panel__options{display:flex;margin:0}.weather-panel--sticky .weather-panel__options__menu-icon,.weather-panel--sticky .weather-panel__options .weather-panel__options-left{display:none}.weather-panel--sticky .weather-panel__options .weather-panel__options-right{display:block;height:40px;margin:0}.weather-panel--sticky .weather-panel__options .weather-panel__condition-text{display:none}.weather-panel--sticky .weather-panel__options .weather-panel__condition-icon{transform:rotate(0)}.weather-panel--sticky .weather-panel__options #cancel,.weather-panel--sticky .weather-panel__options #arrow,.weather-panel--sticky .weather-panel__options #favorite,.weather-panel--sticky .weather-panel__options #menu{display:none}.weather-panel__overview{display:flex;flex-direction:column;align-items:left;width:fit-content;height:fit-content;margin-top:10px}.weather-panel__header{display:flex;width:fit-content;background-color:#eb6e4c;border-radius:25px;padding:8px 15px 10px 12px;margin-left:-5px;box-shadow:#0000001a 0 4px 12px;flex-direction:row;text-align:center;align-items:center;gap:5px}.weather-panel__header-location-icon{width:24px}.weather-panel__header-location{font-size:20px;font-weight:700;max-width:175px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.weather-panel__current-date{width:fit-content;margin-top:10px;font-size:18px;font-weight:700;color:#eb6e4c}.weather-panel__temp-container{display:flex;align-items:center;justify-content:start;width:fit-content}.weather-panel__temperature-unit{margin-top:-90px;font-size:40px;font-weight:600;color:#eaeaea;margin-left:5px;text-shadow:#242424 2px 2px 4px}.weather-panel__temperature{font-family:Do Hyeon,sans-serif;font-size:150px;font-weight:400;color:#eaeaea;text-shadow:#242424 2px 2px 4px}.weather-panel__sunrise-sunset{display:flex;align-items:center;gap:8px;padding:6px 15px 6px 4px;margin-top:2rem;font-weight:700;width:fit-content;font-size:16px;color:#eaeaea;border:1px solid rgba(136,136,136,.45);background-color:#0000001a;text-shadow:#242424 2px 2px 4px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:15px}.weather-panel__sunrise-icon,.weather-panel__sunset-icon{width:40px;filter:invert(90%) drop-shadow(.06em .06em .06em #242424)}.weather-panel__min-max-temp{display:flex;gap:10px;padding:16px;width:fit-content;font-weight:700;font-size:16px;color:#eaeaea;margin-top:.5rem;text-shadow:#242424 2px 2px 4px;border:1px solid rgba(136,136,136,.45);background-color:#0000001a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:15px}.weather-panel__options{display:flex;flex-direction:row;justify-content:space-between;align-items:start;margin-top:1rem;gap:1rem}.weather-panel__options #cancel,.weather-panel__options #arrow,.weather-panel__options #favorite{display:none}.weather-panel__options-left{display:flex;flex-direction:row;align-items:center;gap:1rem}.weather-panel__options-right{display:flex;flex-direction:column;align-items:center;gap:2rem}.weather-panel__condition{display:flex;flex-wrap:nowrap;flex-direction:column;margin-bottom:2rem;align-items:center;justify-content:center;gap:1rem;cursor:pointer}.weather-panel__menu-icon{width:30px;filter:invert(90%);transition:all .3s cubic-bezier(.68,-.55,.265,1.55),opacity .2s ease;cursor:pointer;opacity:1}.weather-panel__menu-icon:hover{transform:scale(1.1);filter:invert(100%)}.weather-panel__menu-icon:active{transform:scale(.95)}.weather-panel__menu-icon#menu:hover,.weather-panel__menu-icon#cancel:hover{transform:rotate(90deg) scale(1.1)}.weather-panel__menu-icon#favorite:hover{transform:scale(1.4);filter:invert(60%) sepia(100%) saturate(500%) hue-rotate(320deg)}.weather-panel__menu-icon#arrow:hover{transform:translate(-8px) scale(1.4)}.weather-panel__condition-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:18px;color:#eb6e4c;font-weight:700}.weather-panel__condition-icon{transform:rotate(270deg);width:40px;filter:invert(100%) drop-shadow(#606060 .5px .5px .5px)}.weather-panel__details{display:flex;justify-content:space-around;align-items:center;gap:20px;margin:30px;font-weight:700;padding:15px;min-width:max-content;color:#eaeaea;text-shadow:#242424 2px 2px 4px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(136,136,136,.45);background-color:#0003;border-radius:15px}.weather-panel__detail-item{display:flex;flex-direction:column;align-items:center;gap:10px}.weather-forecast{border-top:1px solid #444444;padding:20px 0;margin-top:auto;display:flex;justify-content:center;align-items:center;transition:padding .3s ease}.weather-forecast__container{display:flex;flex-direction:column;width:100%;height:100%;margin:1px;background-color:#eaeaea;border-radius:15px 15px 0 0;color:#242424;box-shadow:#00000040 0 .0625em .0625em,#00000040 0 .125em .5em,#ffffff1a 0 0 0 1px inset}.weather-forecast__container.with-sticky-header{border-radius:0}.weather-forecast__title-Hours{font-size:20px;font-weight:600;text-align:start;padding:40px 15px 5px 25px;color:#242424}.weather-forecast__title-Hours.with-sticky-header{padding:90px 15px 5px 25px}.weather-forecast__title-Days{font-size:20px;font-weight:600;text-align:start;padding:30px 15px 10px 25px;color:#242424}.weather-forecast__items{display:flex;flex-direction:row;overflow-x:auto;align-items:start;justify-content:left;padding:1rem .5rem 0;margin:0 2rem;min-height:max-content;gap:1.7rem;scrollbar-width:none}.weather-forecast__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.weather-forecast__item__time{font-size:14px;color:gray}.weather-forecast__item__icon{width:50px;height:50px;background-color:#d3d3d3;border-radius:25px}.weather-forecast__item__temp{justify-content:flex-start;font-size:20px;font-weight:600;color:#242424}.weather-forecast__dayItems{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;align-items:center;justify-content:start;height:100%;padding:5px 15px 15px;gap:15px}.weather-forecast__dayItem{display:flex;flex-direction:column;align-items:center;justify-content:start;max-width:100%;padding:10px 15px;border-radius:10px}.weather-forecast__dayItem-head{display:flex;flex-direction:row;align-items:center;justify-content:start;gap:1rem;width:85vw;padding:.8rem 1.5rem .8rem 1rem;background-color:#d3d3d3;border-radius:20px 20px 0 0;color:#555;font-weight:600;box-sizing:border-box}@media(min-width:700px){.weather-forecast__dayItem-head{width:370px}}.weather-forecast__dayHeader{display:flex;flex-direction:column;width:100%;gap:5px}.weather-forecast__dayHeader__title{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;gap:10px}.weather-forecast__dayHeader__day{font-size:16px;font-weight:600;color:#242424}.weather-forecast__dayHeader__tempRange{font-size:1rem;color:#eb6e4c}.weather-forecast__dayHeader__description{font-size:14px;color:gray}.weather-forecast__dayItem-body{display:flex;flex-direction:column;width:85vw;padding:5px 0;scrollbar-width:none;height:fit-content;border-radius:0 0 25px 25px;border:lightgray 2px solid;box-sizing:border-box}@media(min-width:700px){.weather-forecast__dayItem-body{width:370px}}.weather-forecast__body-details{display:none;flex-direction:row;scrollbar-width:none;justify-content:space-around;align-items:center;padding:10px 0 25px;width:100%;color:#555;opacity:0;transform:translateY(-10px);transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}.weather-forecast__body-details.show{opacity:1;transform:translateY(0)}.weather-forecast__body-detail-item{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:14px}.weather-forecast__body-detail-item__icon{width:50px;filter:invert(30%)}.weather-forecast__body-detail-item__value{font-size:14px;font-weight:500;color:#242424}.weather-forecast__arrow-down-icon{display:flex;width:25px;filter:invert(40%);align-self:center;cursor:pointer;transition:transform .3s ease,filter .2s ease}.weather-forecast__arrow-down-icon:hover{transform:translateY(3px) scale(1.1);filter:invert(20%)}.weather-forecast__arrow-down-icon:active{transform:translateY(1px) scale(.95)}.weather-forecast__arrow-up-icon{display:none;width:25px;filter:invert(40%);align-self:center;cursor:pointer;transition:transform .2s ease-in,filter .2s ease-in}.weather-forecast__arrow-up-icon:hover{transform:translateY(-3px) scale(1.1);filter:invert(20%)}.weather-forecast__arrow-up-icon:active{transform:translateY(-1px) scale(.95)}.weather-forecast__dayItem-body-divider{display:none;height:1px;background-color:#d3d3d3;margin:0 10px;opacity:0;transform:scaleX(0);transition:opacity .2s cubic-bezier(.4,0,.2,1) .04s,transform .2s cubic-bezier(.4,0,.2,1) .04s}.weather-forecast__dayItem-body-divider.show{opacity:1;transform:scaleX(1)}.weather-forecast__hourlyItems{display:none;flex-direction:row;overflow-x:auto;align-items:start;justify-content:left;height:fit-content;padding:1rem 1rem 0;margin:1rem;gap:1.8rem;scrollbar-width:none;opacity:0;transform:translateY(-10px);transition:opacity .2s cubic-bezier(.4,0,.2,1) .04s,transform .2s cubic-bezier(.4,0,.2,1) .04s}.weather-forecast__hourlyItems.show{opacity:1;transform:translateY(0)}