html{height:100dvh;width:100dvw;background:#fffa78;background:linear-gradient(0deg,#fffa78,#1dfdc6,#148eb5);overflow:hidden}body,#root{height:100%;margin:0}.app-container{height:100%;display:flex;flex-direction:column}.app-container[data-theme=dark]{background:#020b38;background:linear-gradient(0deg,#020b38,#30040d);color:#fff!important}@media (min-width: 480px){body,#root{height:100%;width:100dvw}}header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0 .1rem;padding-bottom:0;background-color:#16abb7;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-user-select:none;user-select:none}@media (min-width: 480px){header{padding:0 .3rem;justify-content:normal}}header[data-theme=dark]{background-color:#240618}header[data-theme=dark] a{color:#fff}header[data-theme=dark] .settings img{filter:invert(1)}.header-icon{font-size:1.5rem}.header-icon img{width:6rem;height:4.5rem;object-fit:cover;margin:.5rem 0 0 .5rem}nav{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:space-evenly}nav a{font-size:1.2rem;color:#000;margin:.5rem}@media (min-width: 480px){nav a{font-size:1.5rem}}@keyframes OpenModal{0%{left:100%}to{left:calc(100% - 6.2rem)}}@keyframes CloseModal{0%{display:block;left:calc(100% - 6.2rem)}to{display:none;left:100%}}.settings button{background-color:transparent;border:0}.settings button img{width:1.5rem;height:1.5rem;cursor:pointer;margin:0 1rem 0 0}@media (min-width: 480px){.settings button{padding:.5rem}.settings button img{width:2rem;height:2rem}}.settings dialog{background-color:#dbdbdb;width:6rem;top:5.3rem;left:calc(100% - 6.2rem);padding:0;margin:0;border:1px solid #a5a55d;border-radius:5px;animation:CloseModal .5s normal}.settings dialog[data-theme=dark]{background-color:gray;border:1px solid gray}@media (max-width: 480px){.settings dialog{top:5.5rem}}.settings dialog[open]{animation:OpenModal .5s normal}.theme-toggle-btn{display:flex;align-items:center;justify-content:center;margin:.5rem 0}.theme-toggle-btn label{width:5rem;height:2rem;position:relative;display:block;background:#ebebeb;border-radius:200px;box-shadow:inset 0 5px 15px #0006,inset 0 -5px 15px #fff6;cursor:pointer;transition:.3s}.theme-toggle-btn label:after{content:"";width:1.8rem;height:1.8rem;position:absolute;top:1.8px;left:2px;background:linear-gradient(180deg,#ffcc89,#d8860b);border-radius:180px;box-shadow:0 5px 10px #0003;transition:.3s}.theme-toggle-btn label svg{position:absolute;width:1.5rem;top:3.5px;z-index:100}.theme-toggle-btn label svg.sun{left:4px;fill:#fff;transition:.3s}.theme-toggle-btn label svg.moon{left:3.2rem;fill:#7e7e7e;transition:.3s}.theme-toggle-btn input{width:0;height:0;visibility:hidden;position:absolute}.theme-toggle-btn input:checked+label{background:#242424}.theme-toggle-btn input:checked+label:after{left:4.85rem;transform:translate(-100%);background:linear-gradient(180deg,#777,#3a3a3a)}.theme-toggle-btn input:checked+label svg.sun{fill:#7e7e7e}.theme-toggle-btn input:checked+label svg.moon{fill:#fff}.theme-toggle-btn input:active:after{width:5rem}.temp-unit-toggle-btn{display:flex;align-items:center;justify-content:center;margin:.5rem 0}.temp-unit-toggle-btn label{width:5rem;height:2rem;position:relative;display:block;background:#ebebeb;border-radius:200px;box-shadow:inset 0 5px 15px #0006,inset 0 -5px 15px #fff6;cursor:pointer;transition:.3s}.temp-unit-toggle-btn label:after{content:"";width:1.8rem;height:1.75rem;position:absolute;top:2px;left:2px;background:linear-gradient(180deg,#a0a0a0,#4a4a4a);border-radius:180px;box-shadow:0 5px 10px #0003;transition:.3s}.temp-unit-toggle-btn label div{position:absolute;z-index:100;font-size:1.2rem;font-weight:bolder;top:1.8px;-webkit-user-select:none;user-select:none}.temp-unit-toggle-btn label .celsius{left:5.25px}.temp-unit-toggle-btn label .fahrenheit{left:3.35rem}.temp-unit-toggle-btn input{width:0;height:0;visibility:hidden;position:absolute}.temp-unit-toggle-btn input:checked+label:after{left:4.85rem;transform:translate(-100%)}.temp-unit-toggle-btn input:active:after{width:5rem}.main-container{flex:1;overflow-y:auto}.main-container::-webkit-scrollbar{width:10px}.main-container::-webkit-scrollbar-track{background:#f1f1f1}.main-container::-webkit-scrollbar-thumb{background:#888}.main-container::-webkit-scrollbar-thumb:hover{background:#555}.home-container{height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:12% 88%}@media (min-width: 480px){.home-container{grid-template-rows:20% 80%}}.current-city-container{height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:23% 77%;justify-items:center;-webkit-user-select:none;user-select:none}@media (min-width: 480px){.current-city-container{grid-template-rows:40% 60%}}h1,h2,h3{margin:0}.current-weather-container{min-width:min(30rem,90%);max-width:95%;display:grid;grid-template-columns:1fr;grid-template-rows:auto;align-items:center}@media (max-width: 480px){.current-weather-container{align-items:start}}.current-weather-container .loading,.current-weather-container .error{margin:auto}.current-weather-container .loading h1,.current-weather-container .loading h2,.current-weather-container .error h1,.current-weather-container .error h2{font-size:2rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}@media (max-width: 480px){.current-weather-container .loading h1,.current-weather-container .loading h2,.current-weather-container .error h1,.current-weather-container .error h2{font-size:1.5rem}}.current-weather-container .first-row{display:grid;grid-template-columns:auto auto;align-items:flex-end}.current-weather-container .first-row .base-info{display:flex;flex-direction:column}.current-weather-container .first-row .base-info h1{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.9rem;text-wrap:nowrap}@media (min-width: 480px){.current-weather-container .first-row .base-info h1{font-size:3rem}}.current-weather-container .first-row .add-to-favorites{display:flex;justify-content:flex-end}.current-weather-container .first-row .add-to-favorites button{width:3rem;padding:0;background-color:transparent;border:0}.current-weather-container .first-row .add-to-favorites button img{width:3rem;height:2rem;cursor:pointer}.current-weather-container .first-row .add-to-favorites button img[data-theme=dark]{filter:invert(1)}@media (min-width: 480px){.current-weather-container .first-row{align-items:baseline;gap:1rem}}.current-weather-container .second-row{display:grid;grid-template-columns:auto auto}.current-weather-container .second-row .temperature{display:flex}.current-weather-container .second-row .temperature h2{font-size:1.8rem;font-family:Arial,Helvetica,sans-serif}@media (min-width: 480px){.current-weather-container .second-row .temperature h2{font-size:2.5rem}}.current-weather-container .second-row .weatherText{display:flex;justify-content:flex-end}.current-weather-container .second-row .weatherText h2{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.5rem}@media (min-width: 480px){.current-weather-container .second-row .weatherText h2{font-size:2.2rem}}.five-days-forecast-container{width:95%;display:grid;grid-template-rows:auto;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;padding-bottom:1rem}.five-days-forecast-container .error{margin:auto}.five-days-forecast-container .error h1,.five-days-forecast-container .error h2{font-size:2rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}@media (max-width: 480px){.five-days-forecast-container .error h1,.five-days-forecast-container .error h2{font-size:1.5rem}}@media (min-width: 480px){.five-days-forecast-container{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));grid-template-rows:auto;justify-items:stretch;align-items:center;gap:3rem}}@media (max-width: 480px){.five-days-forecast-container .forecast-card:last-child{position:sticky;left:27%}}.forecast-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;border-radius:10px;background:#22c1c3;background:linear-gradient(0deg,#22c1c3,#fbaa2d);color:#fff;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}@media (min-width: 480px){.forecast-card{min-width:155px;gap:1rem}}.forecast-card h3{font-size:1.6rem}@media (min-width: 480px){.forecast-card h3{font-size:1.8rem;margin:0 .2rem}}.forecast-card .temperature{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.5rem}.forecast-card .temperature section{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:7px;font-size:1.2rem}@media (min-width: 480px){.forecast-card .temperature section{font-size:1.5rem}}.forecast-card[data-theme=dark]{background:#3a457a;background:linear-gradient(0deg,#3a457a,#800d24)}.search-container{display:flex;align-items:center;justify-content:center}.search-container input{height:2.5rem;width:20rem;text-indent:3px;border-radius:25px;border:1px solid white;text-indent:5px;font-size:16px}@media (min-width: 480px){.search-container input{width:25rem}}.autocomplete-container[open]{width:20rem;max-height:20rem;display:flex;flex-direction:column;top:9rem;border:.5px solid #808080;border-bottom:0;border-radius:5px;overflow-y:auto;padding:0}@media (min-width: 480px){.autocomplete-container[open]{width:25rem;top:10.3rem}}.autocomplete-container[open]::-webkit-scrollbar{width:10px}.autocomplete-container[open]::-webkit-scrollbar-track{background:#f1f1f1}.autocomplete-container[open]::-webkit-scrollbar-thumb{background:#888}.autocomplete-container[open]::-webkit-scrollbar-thumb:hover{background:#555}.autocomplete-container[open] .autocomplete-card{flex:1;display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-bottom:.5px solid gray;padding:.2rem;cursor:pointer}.autocomplete-container[open] .autocomplete-card h1{font-size:1.5rem;text-indent:2px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.autocomplete-container[open] .autocomplete-card p{margin:0;font-family:monospace;font-size:.75rem}.autocomplete-container[open] .autocomplete-card:hover{background-color:#a7a7a7}.autocomplete-container[open] .autocomplete-card:active{background-color:#555}.favorites-container{margin:1rem;display:flex;flex-direction:column;align-items:center;gap:1rem}.favorite-card{display:flex;flex-direction:row-reverse;min-width:95%;background-color:#9ce4ef;border:1px solid #795548;border-radius:10px;padding:.5rem 1rem;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1rem;-webkit-user-select:none;user-select:none}@media (min-width: 480px){.favorite-card{min-width:40%}}.favorite-card[data-theme=dark]{background-color:#2d2639}.favorite-card .favorite-info{flex:1;display:flex;flex-direction:column}.favorite-card .favorite-info section{display:grid;grid-template-columns:.5fr 1.5fr;grid-template-rows:1fr}@media (max-width: 480px){.favorite-card .favorite-info h1{font-size:1.5rem}.favorite-card .favorite-info section h1{font-size:1.2rem}}.favorite-card button{width:3rem;padding:0;background-color:transparent;border:0}.favorite-card button img{width:3rem;height:2rem;cursor:pointer}