html {
    overflow-y: scroll;
    scrollbar-width: none;
}
body{
    width: 100%;
    position: relative;
    background-color: #111015;
    overflow: hidden;
    flex-direction: column;
    padding: var(--padding-11xl) var(--padding-5xl) var(--padding-3xl);
    line-height: normal;
    letter-spacing: normal;
    box-sizing: border-box;
    border-radius: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-2xs);
}
.navbar {
    width: 1352px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-xl);
    max-width: 100%;
    text-align: left;
    font-size: var(--font-size-base);
    color: var(--color-gray-100);
    font-family: var(--font-montserrat);
}
.material-symbols-outlined{
    height: 24px;
    width: 24px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    min-height: 24px;
    color: var(--color-gray-100);
}
.city-name {
    flex-direction: column;
    padding: var(--padding-11xs) 0 0;
    position: relative;
}
.city-name,
.city-weather,
.city-loc{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.city-weather {
    flex-direction: row;
    gap: var(--gap-3xs);
}
.city-loc{
    flex-direction: column;
    padding: var(--padding-4xs) 0 0;
}
.weather-line {
    font-size: var(--font-size-5xl);
}
.span {
    font-size: var(--font-size-17xl);
}
.weather-forecast {
    height: 45px;
    width: 230px;
    position: relative;
    font-family: var(--font-);
    display: inline-block;
    white-space: nowrap;
    font-size: var(--font-size-13xl);
}
.search{
    height: 46px;
    width: 492px;
    position: relative;
    border-radius: var(--br-3xs);
    background-color: var(--color-gray-600);
    display: none;
    max-width: 100%;
}
.search-city {
    text-decoration: none;
    position: relative;
    color: inherit;
    display: inline-block;
    min-width: 79px;
    z-index: 1;
    width: 400px;
    background-color: var(--color-gray-600);
    color: var(--color-white);
    border-style: solid;
    border-color: var(--color-white);
    border-width: 0;
}
.search-bar,
.search-city-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-10xs) 0 0;
}
.search-bar {
    width: 492px;
    border-radius: var(--br-3xs);
    background-color: var(--color-gray-600);
    flex-direction: row;
    padding: var(--padding-2xs) var(--padding-10xl);
    box-sizing: border-box;
    gap: var(--gap-3xs);
    max-width: 100%;
}
.search {
    display: flex;
    align-self: center;
    max-width: 100%;
}
#weather-image .material-symbols-outlined {
    font-size: 48px;
    height: 48px;
    width: 48px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 1;
    color: var(--color-gray-800);
}
.forecast-panel {
    align-self: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 0 0 var(--padding-lg);
    gap: var(--gap-20xl);
    text-align: left;
    font-size: var(--font-size-base);
    color: var(--color-gray-800);
    font-family: var(--font-montserrat);
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box;
    max-width: 100%;
}
.temperature {
    align-self: stretch;
    display: flex;
    border-radius: var(--br-6xl);
    background-color: var(--color-lightblue);
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 0 var(--padding-2xs);
    gap: var(--gap-2xs);
    width: 257px;
    height: 230px;
    flex-direction: column;
    font-size: var(--font-size-base);
    color: var(--color-gray-800);
    font-family: var(--font-montserrat);
    text-align: left;
}
.date-today,
.date-time{
    position: relative;
    font-weight: 600;
    display: inline-block;
    min-width: 52px;
    z-index: 1;
}
.date-today-date{
    position: relative;
    font-size: var(--font-size-sm);
    font-weight: 300;
    display: inline-block;
    min-width: 52px;
    z-index: 1;
}
.datetime {
    align-self: stretch;
    border-radius: var(--br-6xl) var(--br-6xl) 0 0;
    background-color: var(--color-lightsteelblue-200);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--padding-lg) var(--padding-sm);
    gap: var(--gap-smi);
    z-index: 1;
}
.temp-details {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 var(--padding-5xs) 0 var(--padding-sm);
    font-size: var(--font-size-17xl);
}
.temp-icon {
    flex: 1;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gap-2xs);
}
.sunrise-sunset,
.temp-icon,
.weather-icon {
    display: flex;
    justify-content: flex-start;
}
.current-temp,
.real-feel,
.temp-sub-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.temp-sub-details {
    flex: 1;
    padding: var(--padding-9xs) 0 0;
}
.current-temp {
    align-self: stretch;
    gap: 16px;
}
.temp-curr{
    height: 44px;
    position: relative;
    font-weight: 600;
    display: inline-block;
    min-width: 52px;
    z-index: 1;
}
.real-feel {
    align-self: stretch;
    font-size: var(--font-size-xs);
    color: var(--color-dimgray);
}
.real-feel-container{
    position: relative;
    line-height: 22px;
    display: inline-block;
    min-width: 80px;
    z-index: 1;
}
.real-feel-temp {
    font-family: var(--font-montserrat);
}
.wind-pressure-humidity {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-9xs);
    color: var(--color-dimgray);
}
.wind-container {
    position: relative;
    line-height: 150.55%;
    display: inline-block;
    min-width: 117px;
    z-index: 1;
}
.humidity,
.pressure {
    position: relative;
    line-height: 150.55%;
    display: inline-block;
    min-width: 97px;
    z-index: 1;
}
.humidity{
    min-width: 82px;
}
.real-feel-value,
.wind-value,
.pressure-value,
.humidity-value{
    display: inline-block;
    font-weight: 600;
}
.sun-time{
    font-weight: 600;
}
.weather-icon {
    flex-direction: column;
    align-items: flex-end;
    gap: 31px;
    font-size: var(--font-size-xs);
    color: var(--color-dimgray);
}
.weather-image{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 6px;
}
.sunrise-sunset {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-9xs);
}
.week-forecast {
    box-sizing: border-box;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    min-width: 712px;
    color: var(--color-gainsboro);
    display: flex;
    box-sizing: border-box;
    max-width: 100%;
}
.week-temp {
    display: flex;
    flex-direction: row;
    align-self: stretch;
    align-items: flex-end;
    justify-content: center;
    gap: var(--gap-11xl-5);
    max-width: 100%;
}
.daily-detail {
    width: 107px;
    box-sizing: border-box;
    flex-direction: column;
}
.day {
    width: 107px;
    height: 230px;
    flex-direction: column;
    align-self: stretch;
    border-radius: var(--br-11xl);
    background-color: var(--color-gray-700);
    box-sizing: border-box;
    padding: var(--padding-smi) 0 var(--padding-10xl);
    gap: var(--gap-11xl-5);
}
.daily-detail,
.day{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.day-detail,
.day-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.day-detail {
    align-self: stretch;
    flex-direction: column;
    gap: var(--gap-smi);
}
.day-icon {
    flex-direction: row;
    padding: 0 var(--padding-10xl);
    height: 50px;
    width: 50px;
    position: relative;
    object-fit: cover;
    z-index: 1;
}
.day-label {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}
.divider {
    align-self: stretch;
    height: 1px;
    position: relative;
    border-top: 1px solid var(--color-darkslategray);
    box-sizing: border-box;
    z-index: 1;
}
.day-temp {
    flex: 1;
    position: relative;
    font-weight: 600;
    z-index: 1;
    align-self: center;
    flex-direction: row;
    padding: 0 var(--padding-3xl) 0 var(--padding-3xl);
    font-size: var(--font-size-13xl);
    color: var(--color-gray-200);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.day-icon .material-symbols-outlined {
    font-size: 48px;
    height: 49px;
    width: 49px;
    overflow: hidden;
    flex-shrink: 0;
    align-items: center;
    z-index: 1;
    color: var(--color-white);
}
.humidity-graph {
    display: flex;
    flex-direction: row;
    width: 297px;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: var(--font-size-xs);
    color: var(--color-gray-100);
    background-color: #1a1a1a; /* Dark background */
    color: #ffffff; /* White text */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
canvas{
    max-width: 297px;
    max-height: 227px;
    border-radius: var(--br-mini);
}
.highlights,
.highlights-details-parent {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.highlights {
    box-sizing: border-box;
    width: 1380px;
    flex-direction: row;
    padding: 0 49px;
    max-width: 100%;
    text-align: left;
    font-size: var(--font-size-base);
    color: var(--color-white);
    font-family: var(--font-montserrat);
}
.todays-overview{
    margin: 0;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    padding: 0 var(--padding-4xs);
    font-size: var(--font-size-xl);
    font-family: var(--font-montserrat);
    color: var(--color-white);
    font-weight: 400;
}
.highlights-details-parent {
    flex: 1;
    flex-direction: column;
    gap: 58px;
    max-width: 100%;
}
.highlights-details {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}
.humidity-box,
.visibility,
.wind-status-container {
    flex: 1;
    border-radius: var(--br-mini);
    background-color: var(--color-gray-700);
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--padding-7xl) var(--padding-sm);
    box-sizing: border-box;
    gap: var(--gap-xl);
    min-width: 262px;
    max-width: 290px;
}
div .wind-status-container{
    display: flex;
}
div .visibility{
    display: flex;
}
div .humidity-box{
    display: flex;
}
.wind-status {
    position: relative;
    font-weight: 500;
    display: inline-block;
    min-width: 100px;
    z-index: 1;
    display: flex;
    align-items: flex-start;
}
.wind-status-rectangle {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 9.3px;
    z-index: 1;
}
.empty-bar,
.empty-bar1,
.empty-bar2,
.empty-bar3,
.empty-bar4,
.empty-bar5,
.empty-bar6,
.empty-bar7,
.empty-bar8,
.empty-bar9 {
    width: 5px;
    position: relative;
    border-radius: var(--br-8xs);
    background: linear-gradient(180deg, #bad4eb, rgba(212, 230, 247, 0));
}
.empty-bar {
    height: 20px;
}
.empty-bar1 {
    height: 25px;
}
.empty-bar2 {
    height: 30px;
}
.empty-bar3 {
    height: 35px;
}
.empty-bar4 {
    height: 40px;
}
.empty-bar5 {
    height: 45px;
}
.empty-bar6 {
    height: 50px;
}
.empty-bar7 {
    height: 55px;
}
.empty-bar8 {
    height: 60px;
}
.empty-bar9 {
    height: 65px;
}
.humidity-frame,
.visibility-frame,
.view-frame,
.speed-frame,
.degree-frame{
    display: flex;
    align-items: flex-start;
}
.humidity-frame,
.visibility-frame,
.speed-frame{
    align-self: stretch;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--gap-xl);
}
.view-frame,
.degree-frame {
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--padding-11xs) 0 0;
    font-size: var(--font-size-sm);
}
.humidity-value-box,
.visibility-value,
.speed {
    font-weight: 600;
}
.view,
.kmh,
.degree {
    position: relative;
    display: inline-block;
    min-width: 75px;
    z-index: 1;
}
.kmh {
    font-size: var(--font-size-sm);
    min-width: 25px;
}
.view,
.degree {
    min-width: 30px;
}
.humidity-box,
.visibility {
    display: flex;
    align-items: flex-start;
}
.humidity-parent,
.visibility-parent {
    min-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-2xl);
}
.humidity-title,
.visibility-title {
    position: relative;
    font-weight: 500;
    display: inline-block;
    min-width: 68px;
    z-index: 1;
}
.humidity-icon-wrapper,
.visibility-icon-wrapper {
    align-self: stretch;
    width: 262px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}
#visibility-icon .material-symbols-outlined{
    font-size: 65px;
    height: 65px;
    width: 65px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 1;
    color: var(--color-white);
}
#humidity-icon .material-symbols-outlined{
    font-size: 65px;
    height: 65px;
    width: 65px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 1;
    color: var(--color-white);
}
.copyright-info,
.copyright-info-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    max-width: 100%;
}
.copyright-info-wrapper {
    align-self: stretch;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--padding-xl) 0 var(--padding-11xl);
    box-sizing: border-box;
    font-size: var(--font-size-5xl);
    color: var(--color-gray-100);
    font-family: var(--font-montserrat);
}
.designed-and-developed,
.div4 {
    position: relative;
    font-weight: 300;
}
.developer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 0 var(--padding-9xs);
    font-size: 15px;
}
.div4 {
    height: 17px;
    width: 23px;
    font-size: var(--font-size-5xl);
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
    z-index: 1;
}
@media screen and (max-width: 1400px) {
    .forecast-panel {
        justify-content: center;
    }
}
@media screen and (max-width: 1200px) {
    .highlights {
        padding-left: var(--padding-5xl);
        padding-right: var(--padding-5xl);
        box-sizing: border-box;
    }
}
@media screen and (max-width: 1050px) {
    .week-temp {
      flex-wrap: wrap;
    }
    .week-forecast {
      min-width: 100%;
    }
    .week-days {
        flex-wrap: wrap;
        justify-content: center;
    }
}
@media screen and (max-width: 750px) {
    .search {
        gap: var(--gap-5xl);
    }
    .temperature {
        gap: var(--gap-lgi);
    }
    .search-city {
        width: 350px;
    }
}