:root{--landing-bg: hsl(243, 96%, 9%);--dark-grey: hsl(243, 27%, 20%);--grey-700: hsl(243, 23%, 24%);--border-grey: hsl(243, 23%, 30%);--grey-300: hsl(240, 6%, 70%);--grey-200: hsl(250, 6%, 84%);--white: hsl(0, 0%, 100%);--orange-500: hsl(28, 100%, 52%);--Blue-500: hsl(233, 67%, 56%);--Blue-700: hsl(248, 70%, 36%)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:DM Sans,sans-serif;background-color:var(--landing-bg);color:var(--white)}input,button{font-family:DM Sans,sans-serif}h1{font-family:Bricolage Grotesque,sans-serif;font-size:52px;font-weight:700;line-height:120%;text-align:center;color:var(--white);margin-bottom:64px}h2{font-family:DM Sans,sans-serif;font-size:28px;font-weight:700;line-height:120%;color:var(--white)}h3{font-family:Bricolage Grotesque,sans-serif;font-size:22px;font-weight:700;color:var(--white)}h4{font-family:DM Sans,sans-serif;font-size:18px;font-weight:500}h5{font-family:DM Sans,sans-serif;font-size:16px;font-weight:500}h6{font-family:DM Sans,sans-serif;font-size:32px;font-weight:300}@media only screen and (max-width: 768px){body{padding:16px 16px 48px}main.container{margin:0!important}.current-weather-container{width:343px}.main-info{padding:41px 24.5px!important;flex-direction:column}.weather-details-grid{grid-template-columns:repeat(2,1fr)!important}.forecast-grid{grid-template-columns:repeat(3,1fr)!important}.header-container{margin-top:0!important}h1{width:343px;font-size:52px;margin:48px auto!important;text-align:center}.search-input-wrapper{width:100%!important}.search-container{width:100%!important;flex-direction:column}.search-button{width:100%!important}}@media only screen and (max-width: 375px){header{width:100%}.container{width:91.46%!important}.header-container{width:100%;margin-top:16px!important}header .logo{width:138px}header .logo img{width:100%}header h1{width:100%}.units-container{width:89px;font-size:14px;padding:8px 10px!important}.units-container .dropdown{width:9px;height:14px}.units-container img{width:14px;height:14px}.search-container{flex-wrap:wrap}.search-button{width:100%}}
