html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}@font-face{font-family:DM Sans;src:url(/Frontend-Mentor-Weather-app/fonts/DM_Sans/static/DMSans-Light.ttf);font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:DM Sans;src:url(/Frontend-Mentor-Weather-app/fonts/DM_Sans/static/DMSans-Medium.ttf);font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:DM Sans;src:url(/Frontend-Mentor-Weather-app/fonts/DM_Sans/static/DMSans-SemiBold.ttf);font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:DM Sans;src:url(/Frontend-Mentor-Weather-app/fonts/DM_Sans/static/DMSans-SemiBoldItalic.ttf);font-weight:600;font-style:italic;font-display:swap}@font-face{font-family:DM Sans;src:url(/Frontend-Mentor-Weather-app/fonts/DM_Sans/static/DMSans-Bold.ttf);font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Bricolage Grotesque;src:url(/Frontend-Mentor-Weather-app/fonts/Bricolage_Grotesque/static/BricolageGrotesque-Bold.ttf);font-weight:700;font-style:normal;font-display:swap}:root{--Neutral-900: hsl(243, 96%, 9%);--Neutral-800: hsl(243, 27%, 20%);--Neutral-700: hsl(243, 23%, 24%);--Neutral-600: hsl(243, 23%, 30%);--Neutral-300: hsl(240, 6%, 70%);--Neutral-200: hsl(250, 6%, 84%);--Neutral-0: hsl(0, 0%, 100%);--Orange-500: hsl(28, 100%, 52%);--Blue-500: hsl(233, 67%, 56%);--Blue-700: hsl(248, 70%, 36%);font-size:16px;--hoverTransition: .2s linear}body{background-color:var(--Neutral-900);color:var(--Neutral-0);font-family:DM Sans,Arial,sans-serif;padding:1rem}@media(min-width:500px){body{padding:2rem}}@media(min-width:700px){body{padding-inline:3rem}}@media(min-width:950px){body{padding-inline:3.5rem;display:grid;grid-template-areas:"header header header" "title title title" "search search search" "weather weather hourly" "status status hourly" "daily daily hourly";column-gap:2rem}}h1,h2,h3{margin:0}.hidden{display:none}.visHidden{opacity:0}.scroll{overflow:auto}.scroll::-webkit-scrollbar{width:5px}.scroll::-webkit-scrollbar-track{background-color:transparent}.scroll::-webkit-scrollbar-thumb{background-color:var(--Neutral-700);border-radius:8px;border:1px solid var(--Neutral-600)}.dropdownAnimation{opacity:0;transform:translateY(-10px);pointer-events:none}.dropdown{position:relative}.dropdown .dropdown-title{background-color:var(--Neutral-800);padding:.5rem;border-radius:.35rem;margin:0}.dropdown .dropdown-body{background-color:var(--Neutral-800);position:absolute;right:0rem;top:3rem;border-radius:12px;padding:12px;border:1px solid var(--Neutral-600);font-weight:300;width:200px;transition:.6s cubic-bezier(.4,0,.2,1) all;z-index:2}.dropdown .dropdown-item{cursor:pointer;transition:var(--hoverTransition)}.dropdown .dropdown-item:hover{background-color:var(--Neutral-700)}.dropdown .dropdown-body>.dropdown-item{padding-block:.75rem .5rem}.dropdown .dropdown-group:not(:nth-last-child(1)){border-bottom:1px solid var(--Neutral-600)}.dropdown .dropdown-group .dropdown-item{padding:.75rem;display:flex;justify-content:space-between;border-radius:.5rem}.dropdown .dropdown-group .dropdown-item:not(:last-child){margin-block-end:.25rem}.dropdown .dropdown-item.selected-item{background-color:var(--Neutral-700)}.dropdown .dropdown-group:not(:last-child) .dropdown-item:last-child{margin-block-end:.5rem}.dropdown .dropdown-group .dropdown-item.selected-item:after{content:url(/Frontend-Mentor-Weather-app/images/icon-checkmark.svg)}.dropdown .dropdown-group-title{margin:0;color:var(--Neutral-300);margin-block:1rem .5rem}.dropdown .dropdown-group-title:first-child{margin-block-start:.75rem}.header{display:flex;justify-content:space-between;align-items:center;margin-block-end:4rem;grid-area:header}.header>img{width:10rem}.header .settings .dropdown-title{font-weight:300;display:flex;gap:.5rem;cursor:pointer;transition:var(--hoverTransition);border:3px solid transparent;color:var(--Neutral-0)}.header .settings .dropdown-title:hover{background-color:var(--Neutral-700)}.header .settings .dropdown-title:focus{background-color:var(--Neutral-700);border-color:var(--Neutral-900);box-shadow:0 0 0 2px var(--Neutral-0)}.header .settings .dropdown-body>.dropdown-item{padding:.75rem;border-radius:8px}@media(min-width:450px){.header>img{width:11rem}.header .settings .dropdown-title{padding:.8rem 1rem}.header .settings .dropdown-body{top:3.5rem}}h1.page-title{margin-block:2rem 2rem;text-align:center;padding-inline:1rem;font-family:Bricolage Grotesque,Arial,sans-serif;font-size:48px;grid-area:title}.search{display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center;gap:.5rem;max-width:450px;margin-inline:auto;width:-webkit-fill-available;margin-block-end:1rem;grid-area:search}.search .dropdown .dropdown-title{position:relative;width:100%;padding:0}.search .dropdown .dropdown-title img{position:absolute;top:14px;left:15px;cursor:pointer}.search .dropdown .dropdown-title input{outline:0;border:1px solid transparent;padding:13px 10px 13px 50px;border-radius:8px;background-color:var(--Neutral-800);color:var(--Neutral-0);box-sizing:border-box;width:100%;transition:.3s linear;cursor:pointer;border:3px solid transparent}.search .dropdown .dropdown-title input::placeholder{color:var(--Neutral-200)}.search .dropdown .dropdown-title input:focus{background-color:var(--Neutral-700);border-color:var(--Neutral-900);box-shadow:0 0 0 2px var(--Neutral-0);cursor:text}.search .dropdown .dropdown-title input:hover{background-color:var(--Neutral-700)}.search .dropdown .dropdown-body{max-height:202px;width:-webkit-fill-available;top:calc(100% + .5rem);border-radius:8px}.search .dropdown .dropdown-body.progress{overflow:hidden;height:30px}.search .dropdown .dropdown-item{border-radius:8px;padding:.75rem .5rem;border:1px solid transparent;transition:70ms linear}.search .dropdown .dropdown-item:not(:last-child){margin-block-end:.5rem}.search .dropdown .dropdown-item.selected-item{background-color:var(--Neutral-700);border-color:var(--Neutral-600)}.search .dropdown .dropdown-item.progress{display:flex;gap:1rem;pointer-events:none}.search .dropdown .dropdown-item.progress:before{content:url(/Frontend-Mentor-Weather-app/images/icon-loading.svg)}.search button{border:0;color:var(--Neutral-0);background-color:var(--Blue-500);border-radius:8px;padding:12px 25px;cursor:pointer;transition:.3s linear;border:3px solid transparent}.search button:hover{background-color:var(--Blue-700)}.search button:focus{border-color:var(--Neutral-900);box-shadow:0 0 0 2px var(--Blue-500)}@media(min-width:575px){.search{flex-direction:row;flex-wrap:nowrap;max-width:600px}.search .dropdown .dropdown-title{width:350px}}@media(min-width:650px){.search .dropdown .dropdown-title{width:400px}}@media(min-width:750px){.search .dropdown .dropdown-title{width:475px}}h2.page-error{text-align:center;margin-block-start:100px;display:none}.weather{background-image:url(/Frontend-Mentor-Weather-app/images/bg-today-small.svg);background-repeat:no-repeat;background-size:contain;display:grid;justify-items:center;background-position:center;gap:1rem;padding:2rem 0;margin-block:1rem;grid-area:weather;transition:var(--hoverTransition)}.weather div:first-child{flex-direction:column;gap:2rem}.weather .city{font-weight:600}.weather .date{font-weight:300;color:var(--Neutral-200);margin-block:0}.weather div{display:flex;align-items:center}.weather div img{width:125px}.weather div .degree{font-weight:600;font-style:italic;font-size:4rem}@media(min-width:500px){.weather{background-image:url(/Frontend-Mentor-Weather-app/images/bg-today-large.svg);background-size:cover;border-radius:20px;max-width:450px;margin-inline:auto;background-position:left;width:-webkit-fill-available}}@media(min-width:700px){.weather{max-width:500px}}@media(min-width:750px){.weather{max-width:550px}}@media(min-width:950px){.weather{max-width:100%;grid-auto-flow:column;align-items:center;justify-content:space-around;padding-inline:2rem}.weather div:first-child{align-items:flex-start}}@media(min-width:1100px){.weather{padding-block:3rem}}.status{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-block-end:2rem;grid-area:status;transition:var(--hoverTransition)}.status .status-item{border-radius:8px;padding:1rem;display:flex;flex-direction:column;gap:1rem;background-color:var(--Neutral-800);border:1px solid var(--Neutral-600)}.status .status-item h2{font-size:18px;font-weight:500;text-transform:capitalize;color:var(--Neutral-300)}.status .status-item h3{font-weight:300;font-size:32px}@media(min-width:950px){.status{grid-template-columns:1fr 1fr 1fr 1fr}}.daily{grid-area:daily;transition:var(--hoverTransition)}.daily>h2{font-weight:500;font-size:20px;margin-block:2rem 1.5rem}.daily .daily-items{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-block-end:2rem}.daily .daily-item{border-radius:8px;padding:2rem 1rem;display:flex;flex-direction:column;gap:1rem;background-color:var(--Neutral-800);border:1px solid var(--Neutral-600);align-items:center}.daily .daily-item .title{font-weight:500;font-size:20px}.daily .daily-item img{width:80px}.daily .daily-item .degrees{display:flex;justify-content:space-evenly;width:100%}.daily .daily-item .degrees .high{font-weight:500}.daily .daily-item .degrees .low{font-weight:500;color:var(--Neutral-300)}@media(min-width:950px){.daily .daily-items{margin-block-end:0}}.hourly{background-color:var(--Neutral-800);border-radius:8px;display:flex;flex-direction:column;gap:1rem;position:relative;grid-area:hourly;transition:var(--hoverTransition)}.hourly .header-part{display:flex;justify-content:space-between;align-items:center;margin:1rem 1rem 0}.hourly .header-part .title{font-size:18px}.hourly .dropdown-title{font-weight:300;display:flex;gap:.5rem;cursor:pointer;transition:var(--hoverTransition);border:3px solid transparent;color:var(--Neutral-0);background-color:var(--Neutral-600);padding:8px 15px}.hourly .dropdown-title:hover{background-color:var(--Neutral-700)}.hourly .dropdown-item{padding:.75rem .5rem!important;border-radius:8px}.hourly .dropdown-item:not(:last-child){margin-block-end:.25rem}.hourly .main-part{display:flex;flex-direction:column;gap:1rem;max-height:450px;padding:0 1rem 1rem}.hourly .main-part .item{border:1px solid var(--Neutral-600);background-color:var(--Neutral-700);border-radius:8px}.hourly .main-part .item,.hourly .main-part .item .container{display:flex;justify-content:space-between;align-items:center}.hourly .main-part .item img{width:60px}.hourly .main-part .item .time{font-size:18px}.hourly .main-part .item .degree{margin-inline-end:1rem}@media(min-width:950px){.hourly{margin-block-start:1rem}.hourly .header-part{gap:1rem}.hourly .main-part{max-height:1070px}}@media(min-width:1032px){.hourly .main-part{max-height:1030px}}@media(min-width:1100px){.hourly .main-part{max-height:1060px}}@media(min-width:1115px){.hourly .main-part{max-height:830px}}