header nav{display:flex;justify-content:space-between;align-items:center;padding-top:var(--spacing-600)}.weather-options{display:flex;justify-content:center;align-items:center;column-gap:8px;background-color:var(--Neutral-800);width:119px;height:43px;border-radius:var(--radius-8)}.weather-options-span{font-size:var(--preset-7-size);font-weight:var(--preset-7-weight);letter-spacing:var(--preset-7-letter-spacing);line-height:var(--preset-7-line-height);font-family:var(--preset-7-family);font-style:var(--preset-7-style);text-align:center;color:var(--Neutral-0)}.options-menu-units{display:none;position:absolute;right:0;width:100%;max-width:214px;min-width:214px;background-color:var(--Neutral-800);border:1px solid var(--Neutral-600);padding:var(--spacing-100) var(--spacing-075);border-radius:var(--radius-12);margin-top:10px;z-index:100}.options-menu-units-active{display:flex;flex-direction:column}.menu{list-style:none;margin-top:var(--spacing-075)}.options-menu-units hr{border:1px solid var(--Neutral-600)}.menu li{width:198px;padding:var(--spacing-100) var(--spacing-075);border-radius:var(--radius-8)}.select{position:relative}.option-selected-celsius{background-color:var(--Neutral-700);color:var(--Neutral-100)}.option-selected-fahrenheit{background-color:var(--Neutral-700)}.title-temperature,.title-wind-speed,.title-precipitation{color:var(--Neutral-300)}.btn-menu-units{background-color:transparent;border:none;color:var(--Primary-300);cursor:pointer;width:100%;text-align:left;font-size:var(--preset-7);margin-bottom:var(--spacing-125)}.option-selected-kmh,.option-selected-mph,.option-selected-mm,.option-selected-in{background-color:var(--Neutral-700)}.search-section{margin-bottom:var(--spacing-600);width:100%}.search-section form{display:flex;justify-content:center;width:100%}.search-suggest{font-size:var(--preset-7-size);top:60px;left:0;position:absolute;margin-top:var(--spacing-100);background-color:var(--Neutral-800);list-style:none;display:none;width:100%;max-width:526px;max-height:184px;overflow-y:auto;border-radius:var(--radius-12);padding:var(--spacing-100)}@supports (scrollbar-color: auto){.search-suggest{scrollbar-color:var(--Neutral-700) transparent}}.search-suggest::-webkit-scrollbar{width:12px}.search-suggest::-webkit-scrollbar-track{background:transparent}.search-suggest::-webkit-scrollbar-thumb{background-color:var(--Neutral-600);border-radius:12px}.search-suggest.active{display:block}.search-suggest li:hover{padding:var(--spacing-100);background-color:var(--Neutral-700);border:groove 1px solid var(--Neutral-600);border-radius:var(--radius-8);cursor:pointer}.search-suggest li{padding:var(--spacing-100)}.input-search{position:relative;height:56px;background-color:var(--Neutral-800);border-radius:var(--radius-12);display:flex;align-items:center;padding:var(--spacing-200) var(--spacing-300);width:100%;max-width:526px}#search{background-color:transparent;border:none;outline:none;margin-left:var(--spacing-200);color:var(--Neutral-200);font-size:var(--preset-5m-size);line-height:var(--preset-5m-line-height);width:100%}#search::placeholder{color:var(--Neutral-200);font-size:var(--preset-5m-size);font-weight:var(--preset-5m-weight);letter-spacing:var(--preset-5m-letter-spacing);line-height:var(--preset-5m-line-height);font-family:var(--preset-5m-family);font-style:var(--preset-5m-style)}.btn-search-submit{width:114px;height:56px;margin-left:var(--spacing-200);border:none;outline:none;border-radius:var(--radius-12);background-color:var(--Blue-500);font-size:var(--preset-5m-size);font-weight:var(--preset-5m-weight);letter-spacing:var(--preset-5m-letter-spacing);line-height:var(--preset-5m-line-height);font-family:var(--preset-5m-family);font-style:var(--preset-5m-style);text-align:center;color:var(--Neutral-0);cursor:pointer}.search-first{font-size:var(--preset-4-size);font-weight:var(--preset-4-weight);letter-spacing:var(--preset-4-letter-spacing);line-height:var(--preset-4-line-height);font-family:var(--preset-4-family);font-style:var(--preset-4-style);text-align:center;color:var(--Neutral-0)}.animation-fade-in{transition:transform .3s ease-in-out}.animation-fade-in:hover{transform:scale(1.1)}.animation-daily{transition:transform .3s ease-in-out}.animation-daily:hover{transform:scale(1.1)}.main-section{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:286px 150px 257px;column-gap:var(--spacing-400)}.main-weather{background-image:url(/Weather-app-intermediate/assets/bg-today-large-CqYszFxp.svg);background-repeat:no-repeat;background-size:cover;height:286px;display:flex;justify-content:space-between;align-items:center;border-radius:var(--radius-20);padding:var(--spacing-300)}.main-weather-h2{font-size:var(--preset-4-size);font-weight:var(--preset-4-weight);letter-spacing:var(--preset-4-letter-spacing);line-height:var(--preset-4-line-height);font-family:var(--preset-4-family);font-style:var(--preset-4-style);color:var(--Neutral-0);margin-bottom:var(--spacing-150)}.main-weather-date-p{font-size:var(--preset-6-size);font-weight:var(--preset-6-weight);letter-spacing:var(--preset-6-letter-spacing);line-height:var(--preset-6-line-height);font-family:var(--preset-6-family);font-style:var(--preset-6-style);color:var(--Neutral-0)}.weather-temp-picture{height:120px;width:120px}.weather-temp-picture img{height:100%;width:100%}#weather-temp-day{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:80.57px;padding:0}#weather-temp-day span{font-size:var(--preset-7-size);font-weight:var(--preset-7-weight);letter-spacing:var(--preset-7-letter-spacing);line-height:var(--preset-7-line-height);font-family:var(--preset-7-family);font-style:var(--preset-7-style);color:var(--Neutral-0)}.weather-temp p{font-size:var(--preset-1-size);font-weight:var(--preset-1-weight);letter-spacing:var(--preset-1-letter-spacing);line-height:var(--preset-1-line-height);font-family:var(--preset-1-family);font-style:var(--preset-1-style);color:var(--Neutral-0)}.picture-day{width:60px;height:60px}.picture-day img{width:100%;height:100%}.weather-temp{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-100)}.daily-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-100);border:solid 1px var(--Neutral-600)}.current-weather{grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:3}.additional-info{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--spacing-300);margin-top:var(--spacing-400)}.additional-info article{border-radius:var(--radius-16);padding:var(--spacing-250);height:118px;border:1px solid var(--Neutral-600)}.additional-info article p{margin-bottom:var(--spacing-300);font-size:var(--preset-6-size);font-weight:var(--preset-6-weight);letter-spacing:var(--preset-6-letter-spacing);line-height:var(--preset-6-line-height);font-family:var(--preset-6-family);font-style:var(--preset-6-style);color:var(--Neutral-0)}.additional-info article span{font-size:var(--preset-3-size);font-weight:var(--preset-3-weight);letter-spacing:var(--preset-3-letter-spacing);line-height:var(--preset-3-line-height);font-family:var(--preset-3-family);font-style:var(--preset-3-style);color:var(--Neutral-0)}.daily-forecast-article{grid-column-start:1;grid-column-end:2;grid-row-start:3;grid-row-end:4;margin-top:var(--spacing-600)}.daily-forecast-article h3{margin-bottom:var(--spacing-250);font-size:var(--preset-5-size);font-weight:var(--preset-5-weight);letter-spacing:var(--preset-5-letter-spacing);line-height:var(--preset-5-line-height);font-family:var(--preset-5-family);font-style:var(--preset-5-style);color:var(--Neutral-0)}.weather-day-specific{font-size:var(--preset-6-size);font-weight:var(--preset-6-weight);letter-spacing:var(--preset-6-letter-spacing);line-height:var(--preset-6-line-height);font-family:var(--preset-6-family);font-style:var(--preset-6-style);color:var(--Neutral-0)}.hourly-forecast-article{grid-column-start:2;grid-column-end:3;grid-row:1 / span 3;background-color:var(--Neutral-800);border-radius:var(--radius-20);padding:var(--spacing-300) 0;display:flex;min-height:0;flex-direction:column}.daily-items{display:grid;grid-template-columns:repeat(7,1fr);column-gap:var(--spacing-200)}.daily-items div{padding:var(--spacing-125) var(--spacing-200);height:165px;border-radius:var(--radius-12)}.bg-neutral-800{background-color:var(--Neutral-800)}.hourly-items-content{height:100%;overflow-y:auto;padding-right:var(--spacing-300);padding-left:var(--spacing-300);margin-top:var(--spacing-300);padding-bottom:var(--spacing-300)}@supports (scrollbar-color: auto){.hourly-items-content{scrollbar-color:var(--Neutral-700) transparent}}.hourly-specific-day{display:flex;justify-content:space-between;width:100%;padding-left:var(--spacing-300);padding-right:var(--spacing-300);margin:auto}.hourly-specific-day h3{font-size:var(--preset-5-size);font-weight:var(--preset-5-weight);letter-spacing:var(--preset-5-letter-spacing);line-height:var(--preset-5-line-height);font-family:var(--preset-5-family);font-style:var(--preset-5-style);color:var(--Neutral-0)}.hourly-items-content::-webkit-scrollbar{width:8px}.hourly-items-content::-webkit-scrollbar-track{background:transparent}.hourly-items-content::-webkit-scrollbar-thumb{background-color:var(--Neutral-700);border-radius:4px}.hourly-specific-day h3{display:flex;align-items:center;color:var(--Neutral-0)}.hourly-day-selector{position:relative;width:100%;max-width:120px}.hourly-day-selector button{padding:var(--spacing-100) var(--spacing-200);border-radius:var(--radius-8);width:100%;background-color:var(--Neutral-600);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--spacing-100);height:37px;font-size:16px;font-weight:medium;letter-spacing:var(--preset-5m-letter-spacing);line-height:var(--preset-5m-line-height);font-family:var(--preset-5m-family);font-style:var(--preset-5m-style);text-align:center;color:var(--Neutral-0)}.hourly-days-dropdown{position:absolute;width:214px;top:100%;left:0;right:0;background-color:var(--Neutral-800);border:1px solid var(--Neutral-600);border-radius:var(--radius-8);padding:var(--spacing-100) var(--spacing-075);list-style:none;margin-top:5px;max-height:313px;overflow-y:auto;z-index:10;display:none}.hourly-days-dropdown li{padding:10px 16px;color:var(--Neutral-0);transition:background-color .2s ease;cursor:pointer}.hourly-days-dropdown li:hover{background-color:var(--Neutral-700);border-radius:var(--radius-8)}.hourly-days-dropdown li:last-child{border-bottom:none}.hourly-items{list-style:none;display:flex;flex-direction:column;align-items:center;width:100%;row-gap:var(--spacing-200)}.hourly-items li{width:100%;height:60px;background-color:var(--Neutral-700);border:solid 1px var(--Neutral-600);padding:10px 16px 10px 12px;border-radius:var(--radius-8)}.hour-specific{display:flex;justify-content:space-between;font-size:var(--preset-5m-size);font-weight:var(--preset-5m-weight);letter-spacing:var(--preset-5m-letter-spacing);line-height:var(--preset-5m-line-height);font-family:var(--preset-5m-family);font-style:var(--preset-5m-style);color:var(--Neutral-0)}.hour-specific div{display:flex;align-items:center;gap:var(--spacing-100)}.hour-specific-picture{width:40px;height:40px}.hour-specific-picture img{width:100%;height:100%}.hourly-active{display:block}@media(max-width:1200px){.main-section{grid-template-columns:1fr;grid-template-rows:auto;row-gap:var(--spacing-600)}.current-weather{grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:2}.daily-forecast-article{grid-column-start:1;grid-column-end:2;grid-row-start:2;grid-row-end:3}.hourly-forecast-article{grid-column-start:1;grid-column-end:2;grid-row-start:3;grid-row-end:4}}@media(max-width:794px){.input-search{max-width:none}.btn-search-submit{width:100%;margin-left:0}.additional-info article span{font-size:var(--preset-4-size)}.search-section form{flex-direction:column;row-gap:var(--spacing-200)}.main-weather{flex-direction:column;background-image:url(/Weather-app-intermediate/assets/bg-today-small-DEQrvfY6.svg);justify-content:center;align-items:space-around}.additional-info{grid-template-columns:repeat(2,1fr);row-gap:var(--spacing-400)}.daily-items{grid-template-columns:repeat(3,1fr);row-gap:var(--spacing-200)}}:root{--Neutral-900:#02012C;--Neutral-800: #262540;--Neutral-700:#302F4A;--Neutral-600: #3C3B5E;--Neutral-300:#ACACB7;--Neutral-200:#D4D3D9;--Neutral-0:#FFFFFF;--Orange-500: #FF820A;--Blue-500: #4658D9;--Blue-700: #2B1B9C;color:#ffffffde;background-color:#242424;--weight-light: 300;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--font-dm: "DM Sans",system-ui, sans-serif;--font-bricolage: "Bricolage Grotesque",system-ui, sans-serif;--font-family-base: var(--font-dm);--font-size-base: 16px;--style-normal: normal;--style-italic: italic;--letter-spacing-normal: 0;--letter-spacing-negative: -.125rem;--line-height-normal: 120%;--line-height-tight: 100%;--preset-1-letter-spacing:var(--letter-spacing-negative);--preset-1-line-height:var(--line-height-tight);--preset-1-weight:var(--weight-semibold);--preset-1-style:var(--style-italic);--preset-1-size:6rem;--preset-1-family: var(--font-dm);--preset-2-letter-spacing:var(--letter-spacing-normal);--preset-2-line-height:var(--line-height-normal);--preset-2-weight:var(--weight-bold);--preset-2-style:var(--style-normal);--preset-2-size:3.25rem;--preset-2-family: var(--font-bricolage);--preset-3-letter-spacing:var(--letter-spacing-normal);--preset-3-line-height:var(--line-height-tight);--preset-3-weight:var(--weight-light);--preset-3-style:var(--style-normal);--preset-3-size:2rem;--preset-3-family: var(--font-dm);--preset-4-letter-spacing:var(--letter-spacing-normal);--preset-4-line-height:var(--line-height-normal);--preset-4-weight:var(--weight-bold);--preset-4-style:var(--style-normal);--preset-4-size:1.75rem;--preset-4-family: var(--font-dm);--preset-5-letter-spacing:var(--letter-spacing-normal);--preset-5-line-height:var(--line-height-normal);--preset-5-weight:var(--weight-semibold);--preset-5-style:var(--style-normal);--preset-5-size:1.25rem;--preset-5-family: var(--font-dm);--preset-5m-letter-spacing:var(--letter-spacing-normal);--preset-5m-line-height:var(--line-height-normal);--preset-5m-weight:var(--weight-medium);--preset-5m-style:var(--style-normal);--preset-5m-size:1.25rem;--preset-5m-family: var(--font-dm);--preset-6-letter-spacing:var(--letter-spacing-normal);--preset-6-line-height:var(--line-height-normal);--preset-6-weight:var(--weight-medium);--preset-6-style:var(--style-normal);--preset-6-size:1.125rem;--preset-6-family: var(--font-dm);--preset-7-letter-spacing:var(--letter-spacing-normal);--preset-7-line-height:var(--line-height-normal);--preset-7-weight:var(--weight-medium);--preset-7-style:var(--style-normal);--preset-7-size:1rem;--preset-7-family: var(--font-dm);--preset-8-letter-spacing:var(--letter-spacing-normal);--preset-8-line-height:var(--line-height-normal);--preset-8-weight:var(--weight-medium);--preset-8-style:var(--style-normal);--preset-8-size:.875rem;--preset-8-family: var(--font-dm);--spacing-0: 0;--spacing-025: .125rem;--spacing-050: .25rem;--spacing-075: .375rem;--spacing-100: .5rem;--spacing-125: .625rem;--spacing-150: .75rem;--spacing-200: 1rem;--spacing-250: 1.25rem;--spacing-300: 1.5rem;--spacing-400: 2rem;--spacing-500: 2.5rem;--spacing-600: 3rem;--spacing-800: 4rem;--spacing-1000: 5rem;--spacing-1200: 6rem;--spacing-1400: 7rem;--spacing-1600: 8rem;--spacing-1800: 8.75rem;--radius-0: 0;--radius-4: 4px;--radius-6: 6px;--radius-8: 8px;--radius-10: 10px;--radius-12: 12px;--radius-16: 16px;--radius-20: 20px;--radius-24: 24px;--radius-full: 9999px}html{font-size:var(--font-size-base)}body{font-family:var(--font-family-base);color-scheme:light dark;background-color:var(--Neutral-900);color:var(--Neutral-0);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}.daily-items div{background-color:var(--Neutral-800)}.main-weather-loader{background-image:none;background-color:var(--Neutral-800);color:var(--Neutral-0);display:flex;align-items:center;flex-direction:column;justify-content:center}.circle-loader-1,.circle-loader-2,.circle-loader-3{width:12px;height:12px;background-color:var(--Neutral-0);border-radius:50%}.loading-circle-loader{display:flex;justify-content:center;align-items:center;column-gap:10px;margin-bottom:10px}.circle-loader-1{opacity:0;animation:loadingFadeIn 1.2s ease infinite;animation-delay:0s}.circle-loader-2{opacity:0;animation:loadingFadeIn 1.2s ease infinite;animation-delay:.2s}.circle-loader-3{opacity:0;animation:loadingFadeIn 1.2s ease infinite;animation-delay:.4s}@keyframes loadingFadeIn{0%{opacity:0}50%{opacity:1}to{opacity:0}}.App{max-width:1440px;margin:auto;min-height:100dvh;padding-right:24px;padding-left:24px}.h1-title-App{text-align:center;color:var(--Neutral-0);margin-top:var(--spacing-800);margin-bottom:var(--spacing-800);font-size:var(--preset-2-size);font-weight:var(--preset-2-weight);letter-spacing:var(--preset-2-letter-spacing);line-height:var(--preset-2-line-height);font-family:var(--preset-2-family);font-style:var(--preset-2-style)}footer{min-height:80px;text-align:center;color:var(--Neutral-0)}@media(max-width:540px){.App{padding-right:8px;padding-left:8px}}@media(max-width:338px){.App{padding-right:2px;padding-left:2px}}.error-api-container{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--Neutral-0);text-align:center;padding:20px}.error-api-container h2{font-size:var(--preset-2-size);font-weight:var(--preset-2-weight);letter-spacing:var(--preset-2-letter-spacing);line-height:var(--preset-2-line-height);font-family:var(--preset-2-family);font-style:var(--preset-2-style);margin-bottom:var(--spacing-200)}.error-api-container p{font-size:var(--preset-5m-size);font-weight:var(--preset-5m-weight);letter-spacing:var(--preset-5m-letter-spacing);line-height:var(--preset-5m-line-height);font-family:var(--preset-5m-family);font-style:var(--preset-5m-style)}.error-api-container button{margin-top:var(--spacing-400);padding:var(--spacing-200) var(--spacing-400);font-size:var(--preset-7-size);font-weight:var(--preset-7-weight);letter-spacing:var(--preset-7-letter-spacing);line-height:var(--preset-7-line-height);font-family:var(--preset-7-family);font-style:var(--preset-7-style);background-color:#262540;color:var(--Neutral-0);border:none;border-radius:8px;cursor:pointer;transition:background-color .3s ease;display:flex;align-items:center;justify-content:center;column-gap:10px}.error-api-container .picture-error{margin-top:var(--spacing-800);width:42px;height:42px}.error-api-container .picture-error img{width:100%;height:100%;object-fit:contain}