* {
     margin: 0;
     padding: 0;
 }

 body {
     background-color: hsl(243, 96%, 9%);
     font-size: 1rem;
     /* base size for rem scaling */
 }

 /* Fonts */
 @font-face {
     font-family: "DM Sans";
     src: url("./assets/fonts/DMSans-VariableFont_opsz\,wght.ttf") format("truetype");
     font-weight: 100 900;
     font-style: normal;
 }

 @font-face {
     font-family: "DM Sans";
     src: url("./assets/fonts/DMSans-Italic-VariableFont_opsz\,wght.ttf") format("turetype");
     font-style: italic;
 }

 @font-face {
     font-family: "DM Sans";
     src: url("./assets/fonts/DM_Sans/DMSans-Italic-VariableFont_opsz%2Cwght.ttf") format("truetype");
     font-weight: 100 900;
     font-style: italic;
 }


 @font-face {
     font-family: "Bricolage Grotesque";
     src: url("./assets/fonts/BricolageGrotesque-VariableFont_opsz\,wdth\,wght.ttf") format("truetype");

     font-weight: 100 900;
     font-style: normal;
 }


 nav {
     margin-top: 4rem;
 }

 .nav-elements {
     display: flex;
     justify-content: space-between;
     margin-top: -2rem;
 }

 .logo {
     margin-left: 5%;
 }


 .dropdown {
     position: absolute;
     right: 5%;
     margin-top: 0.5rem;
     background-color: hsl(242, 27%, 20%);
     padding: 0.5rem;
     border-radius: 0.5rem;
     font-family: "DM Sans", sans-serif;
     display: none;
     width: 12rem;

     max-width: 90%;
     z-index: 20;

 }

 .dropdown.dropdowndisplay {
     display: block;
     /* visible when toggled */
 }

 .dropdown-btn {
     display: flex;
     align-items: center;
     background-color: rgb(38, 37, 65);
     color: rgb(213, 212, 217);
     font-size: 0.82rem;
     cursor: pointer;
     margin-right: 5%;
     gap: 0.18rem;
     border: none;
     padding: 1.11rem 0.36rem;
     border-radius: 0.40rem;
     height: 1.6rem;
     min-width: unset;

 }

 .dropdown-btn:hover {
     outline: 2px solid hsl(250, 6%, 84%);
     outline-offset: 0.25rem;
 }


 .unitimg {
     height: 0.875rem;
     width: 0.875rem;
     margin-left: 8px;
 }

 .downimgunit {
     height: 1rem;
     width: 1rem;
     margin-top: 0.25rem;
 }

 .drop-down-item-switch {
     color: hsl(250, 6%, 84%);
     font-size: 0.9rem;
     text-align: left;
     cursor: pointer;
     padding: 0.25rem 0.5rem;
 }

 .drop-down-item-switch:hover {
     border-radius: 0.25rem;
     background-color: hsl(243, 23%, 24%);
 }

 .temperature p,
 .wind-speed p,
 .Precipitation p {
     font-size: 0.9rem;
     margin-top: 0.25rem;
     color: hsl(240, 6%, 70%);
     font-weight: 300;
 }

 .temperature,
 .wind-speed,
 .Precipitation {
     display: flex;
     flex-direction: column;
 }

 .line,
 .line2 {
     width: 90%;
     height: 1px;
     background-color: hsl(240, 6%, 70%);
     margin: 0.5rem 0;
     border-radius: 0.25rem;
 }


 .Celsiusbtn,
 .Fahrenheitbtn,
 .kmh-btn,
 .mph,
 .Millimetersbtn,
 .Inchesbtn {
     display: flex;
     align-items: center;
     border: none;
     background: none;
     color: hsl(250, 6%, 84%);
     margin-top: 0.5rem;
     cursor: pointer;
     font-size: 0.9rem;
 }

 .checkimg {
     height: 0.9rem;
     width: 0.75rem;
     margin-left: 0.75rem;
     display: none;
 }

 .clicked {
     background-color: hsl(243, 23%, 24%);
     border-radius: 0.25rem;
     padding: 0.25rem;
 }


 .main-heading {
     display: flex;
     justify-content: center;
     margin-top: 0rem;
 }

 .main-heading h1 {
     color: hsl(0, 0%, 100%);
     font-family: "Bricolage Grotesque";
     font-size: 2rem;
 }


 .input {
     display: flex;
     justify-content: center;
     margin-top: 1rem;
     gap: 5.3rem;
 }

 .input input {
     font-size: 1rem;
     padding: 0.5rem 1rem;
     border-radius: 0.5rem;
     width: 115%;
     max-width: 313px;
     margin-right: 2rem;
     background-color: hsl(243, 27%, 20%);
     border: none;
 }

 input {
     color: hsl(0, 0%, 100%);

 }

 input ::placeholder {
     color: hsl(0, 0%, 100%);
     opacity: 1;
 }

 .searchbtn button {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: rgb(68, 85, 218);
     color: rgb(255, 255, 255);
     font-size: 0.9rem;
     cursor: pointer;
     border-radius: 8px;
     border: none;
     height: 80%;
     width: 6vw;
     padding-bottom: 0.6rem;
     padding-top: 0.6rem;
     margin-top: 0.1rem;
     text-align: center;
 }

 .searchbtn button:hover {
     background-color: hsl(248, 70%, 36%);
 }

 .not-found {
     color: hsl(0, 0%, 100%);
     font-family: "DM Sans";
     text-align: center;
     margin-top: 1rem;
     display: none;
 }

 .failed-api {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     text-align: center;
     font-family: "DM Sans";
     gap: 10px;
     display: none;
 }

 .failed-api h1 {
     color: hsl(0, 0%, 100%);
 }

 .failed-api p {
     color: hsl(240, 6%, 70%);
 }

 .main-wheather-continer {
     display: flex;
     gap: 1rem;
 }


 .show-wheather-container {
     display: flex;
     gap: 13rem;
     background: url("./assets/images/bg-today-large.svg");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     border-radius: 8px;
     min-height: 34vh;
     width: 100%;
     max-width: 505px;
     margin-left: 9rem;
     margin-top: 1.5rem;


 }



 .temperauremain {
     display: flex;
     gap: 0.5vw;
 }

 .temperauremain img {
     height: 8rem;
     width: auto;
     margin-left: -8rem;
     margin-top: -2rem;
 }

 .city-info {
     margin-top: 3.5rem;
     margin-left: 1rem;
     font-size: 0.6rem;
     color: hsl(0, 0%, 100%);
     font-family: "DM Sans";
 }

 .temperauremain {
     margin-top: 3rem;
     color: hsl(250, 6%, 84%);
     margin-left: 3.2rem;
     font-size: 1.5rem;
     font-family: "Dm Sans";
     font-weight: 300;
 }

 .weather-stats {
     display: flex;
     justify-content: center;
     gap: 1rem;
     margin-top: 2rem;
     margin-left: 9rem;
     flex-wrap: wrap;
     color: hsl(0, 0%, 100%);
 }

 .weather-stats>div {
     flex: 0 1 auto;
     min-width: 90px;
     max-width: 110px;
     padding: 0.8rem;
     border-radius: 0.5rem;
     text-align: left;
     background-color: hsl(243, 27%, 20%);
     font-family: "Dm Sans";

 }


 .weather-stats p:first-child {
     font-size: 0.8rem;
     opacity: 0.8;
     margin-bottom: 0.2rem;
 }

 .weather-stats p:last-child {
     font-size: 1rem;
     font-weight: bold;
 }

 .weather-stats>div:hover {
     background-color: rgba(255, 255, 255, 0.1);

 }

 .forecast-heading {
     color: hsl(0, 0%, 100%);
     font-size: 1rem;
     font-weight: 600;
     margin-bottom: 0.8rem;
     transform: translateY(28px);
     margin-left: 9rem;
     font-family: "DM Sans";
 }

 .daily-forcast {
     display: flex;
     gap: 0.6rem;
     margin-top: 3rem;
     margin-left: 8.8rem;
     overflow-x: auto;
     padding-bottom: 0.5rem;
     font-family: "DM Sans";
 }

 .daily-forcast::-webkit-scrollbar {
     display: none;
 }

 .forecast-card {
     flex: 0 0 48px;
     background: hsl(243, 27%, 20%);
     border-radius: 0.8rem;
     padding: 0.5rem;
     text-align: center;
     color: white;
     backdrop-filter: blur(6px);
     transition: transform 0.2s ease, background 0.2s ease;
     min-height: 85px;
 }

 .forecast-card:hover {
     transform: translateY(-4px);
     background: rgba(255, 255, 255, 0.1);
 }

 .forecast-card .day {
     font-weight: 600;
     font-size: 0.75rem;
     margin-bottom: 0.2rem;
 }

 .forecast-card img {
     width: 22px;
     height: 22px;
     margin: 0.3rem 0;
 }

 .forecast-card .temp {
     font-size: 0.7rem;
     line-height: 1.1;
     opacity: 0.8;
 }


 .hourly-forcast {
     height: 69vh;
     width: 20vw;
     margin-top: 1.6rem;
     background-color: hsl(243, 27%, 20%);
     border-radius: 10px;


 }

 .hourly-forcast {
     background: hsl(243, 27%, 20%);
     border-radius: 16px;
     width: auto;
     max-width: 271px;
     min-width: 140px;
     padding: 0 0 1.2rem 0;
     margin-top: 1.3rem;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
     height: auto;
     min-height: 420px;
     max-height: 80vh;
 }

 .hourly-forecast-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1rem 0.8rem 0.6rem 0.8rem;
     gap: 1.3rem;
     flex-wrap: nowrap;
 }

 .hourly-forecast-title {
     color: #fff;
     font-size: 0.9rem;
     font-weight: 600;
     font-family: "DM Sans", sans-serif;
     letter-spacing: 0.01em;
     white-space: nowrap;
 }

 .days-dropdownmain {
     background: hsl(243, 23%, 24%);
     color: #fff;
     border: none;
     border-radius: 7px;
     padding: 0.3rem 0.5rem 0.3rem 0.5rem;
     font-size: 0.9rem;
     font-family: "DM Sans", sans-serif;
     display: flex;
     align-items: center;
     gap: 0.2rem;
     cursor: pointer;
     transition: background 0.18s;
     outline: none;
     min-width: unset;
     max-width: 84px;
 }

 .days-dropdownmain:active,
 .days-dropdownmain:focus {
     background: hsl(243, 33%, 30%);
 }

 .dropdown-arrow {
     width: 16px;
     height: 16px;
     margin-left: 0.08rem;
 }


 .hourly-forecast-cards {
     display: flex;
     flex-direction: column;
     gap: 0.60rem;
     padding: 0 0.8rem;
 }

 .hourly-forecast-card {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     background: hsla(0, 0%, 100%, 0.06);
     border-radius: 7px;
     padding: 0.34rem 0.5rem;
     margin: 0;
     transition: background 0.18s;
     cursor: pointer;
     gap: 0.5rem;
 }

 .hourly-forecast-card:hover {
     background: hsla(0, 0%, 100%, 0.12);
 }

 .hour-label {
     color: hsl(0, 0%, 100%);
     font-size: 0.97rem;
     font-family: "DM Sans", sans-serif;
     font-weight: 500;
     opacity: 0.93;
     flex: 1 1 38%;
     min-width: 0;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     order: 1;
 }

 .hourly-weather-icon {
     width: 20px;
     height: 20px;
     margin-right: 0.35rem;
     flex: 0 0 20px;
     order: 0;
 }

 .hour-temp {
     color: #fff;
     font-size: 0.97rem;
     font-family: "DM Sans", sans-serif;
     font-weight: 600;
     flex: 1 1 22%;
     min-width: 0;
     text-align: right;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     order: 2;
 }



 .days-dropdown-wrapper {
     position: relative;
     display: inline-block;
     width: 100%;
 }

 .days-dropdown-btn {
     display: flex;
     align-items: center;
     background: hsl(243, 23%, 24%);
     color: #fff;
     border: none;
     border-radius: 7px;
     padding: 0.3rem 0.6rem;
     font-size: 0.92rem;
     font-family: "DM Sans", sans-serif;
     cursor: pointer;

     justify-content: space-between;
     transition: background 0.18s;
     outline: none;
 }

 .days-dropdown-btn:active,
 .days-dropdown-btn:focus {
     background: hsl(243, 33%, 30%);
 }

 .dropdown-arrow {
     margin-left: 0.15rem;
     width: 16px;
     height: 16px;
     pointer-events: none;
 }

 .days-dropdown-list {
     display: block;
     position: absolute;
     top: 120%;
     right: 0;
     left: auto;
     z-index: 10;
     min-width: 140px;
     background: hsl(243, 27%, 20%);
     border-radius: 10px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
     padding: 0.25rem 0;
     margin-top: 0.3rem;
     font-family: "DM Sans", sans-serif;
 }

 .days-dropdown-list.show {
     display: flex;
     flex-direction: column;
     animation: fadeIn 0.13s;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(-8px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .dropdown-day-item {
     color: #fff;
     padding: 0.58rem 1.2rem 0.58rem 1rem;
     font-size: 1rem;
     cursor: pointer;
     transition: background 0.18s;
     border-radius: 6px;
     white-space: nowrap;
     user-select: none;
 }

 .dropdown-day-item.selected,
 .dropdown-day-item:hover {
     background: hsl(243, 23%, 24%);
 }




 .dropdown-x-days.custom-days-dropdown {
     display: block;
     position: absolute;
     right: 0;
     top: 120%;
     min-width: 180px;
     background: hsl(243, 27%, 20%);
     border-radius: 12px;
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
     padding: 0.3rem 0;
     z-index: 20;
     flex-direction: column;
     animation: fadeIn 0.13s;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(-8px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }



 .dropdown-day-item {
     color: #fff;
     padding: 0.75rem 1.5rem 0.75rem 1.2rem;
     font-size: 1.03rem;
     cursor: pointer;
     background: transparent;
     transition: background 0.16s;
     border: none;
     text-align: left;
     border-radius: 8px;
     outline: none;
     font-family: "DM Sans", sans-serif;
 }

 .dropdown-day-item.selected,
 .dropdown-day-item:hover,
 .dropdown-day-item:focus {
     background: hsl(243, 23%, 24%);
 }



 .days-dropdown-btn:active,
 .days-dropdown-btn:focus {
     background: hsl(243, 33%, 30%);
 }

 .dropdown-arrow {
     margin-left: 0.15rem;
     width: 16px;
     height: 16px;
     pointer-events: none;
 }

 .days-dropdown-btn {
     display: flex;
     align-items: center;
     background: hsl(243, 23%, 24%);
     color: #fff;
     border: none;
     border-radius: 7px;
     padding: 0.25rem 0.6rem;
     font-size: 0.92rem;
     font-family: "DM Sans", sans-serif;
     cursor: pointer;
     min-width: 80px;
     justify-content: space-between;
     transition: background 0.18s;
     outline: none;
     width: auto;
     max-width: 200px;
     height: 2rem;
 }

 .days-dropdown-btn:active,
 .days-dropdown-btn:focus {
     background: hsl(243, 33%, 30%);
 }

 .dropdown-arrow {
     margin-left: 0.1rem;
     width: 16px;
     height: 16px;
     pointer-events: none;
 }



 .dropdown-x-days.custom-days-dropdown {
     display: none;
     position: absolute;
     right: 0;
     top: 110%;
     min-width: 80px;
     background: hsl(243, 27%, 20%);
     border-radius: 9px;
     box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
     padding: 0.2rem 0;
     z-index: 20;
     flex-direction: column;
     animation: fadeIn 0.13s;
 }

 .custom-days-dropdown.show {
     display: flex;
 }



 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(-8px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .dropdown-day-item {
     color: #fff;
     padding: 0.45rem 1rem 0.45rem 1rem;
     font-size: 0.97rem;
     cursor: pointer;
     background: transparent;
     transition: background 0.16s;
     border: none;
     text-align: left;
     border-radius: 7px;
     outline: none;
     font-family: "DM Sans", sans-serif;
     width: 100%;
     display: block;
 }

 .dropdown-day-item.selected,
 .dropdown-day-item:hover,
 .dropdown-day-item:focus {
     background: hsl(243, 23%, 24%);
 }

 .dropdown-arrow {
     transition: transform 0.2s ease;
 }

 .dropdown-arrow.open {
     transform: rotate(180deg);
 }

 @media only screen and (max-width: 600px) {
     .nav-elements {
         margin-top: -3rem;
     }

     .main-logo {
         height: 3vh;
         width: auto;
     }

     .dropdown-btn {
         display: flex;
         justify-content: flex-end;
         align-items: center;
         background-color: rgb(38, 37, 65);
         color: rgb(213, 212, 217);
         font-size: 0.82rem;
         cursor: pointer;
         gap: 0.18rem;
         border: none;
         padding: 1.11rem 0.36rem;
         border-radius: 0.40rem;
         height: 1.6rem;
         min-width: unset;
     }

     .main-heading {
         max-width: 13rem;
         text-align: center;
         margin-left: auto;
         margin-right: auto;
         margin-top: 3vh;
         font-size: larger;
     }

     .main-heading h1 {
         font-size: 9vw;
     }

     .input {

         align-items: center;
         flex-direction: column;
         gap: 1rem;
         margin-top: 2rem;

     }

     .input input {
         font-size: 1rem;
         padding: 0.7rem 1rem;
         border-radius: 0.5rem;
         width: 24rem;
         max-width: 24rem;
         margin: 0 auto;
         background-color: hsl(243, 27%, 20%);
         border: none;
         box-sizing: border-box;
     }


     .searchbtn button {
         height: 80%;
         text-align: center;
         width: 24rem;
         max-width: 24rem;
         max-width: 24rem;
         padding: 0.9rem 1rem;
         font-size: 18px;

     }


     .main-wheather-continer {
         flex-direction: column;
     }


     .show-wheather-container {
         display: flex;
         flex-direction: column;
         gap: 13rem;
         background: url(./assets/images/bg-today-small.svg);
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center;
         border-radius: 8px;
         min-height: 24vh;
         width: 100%;
         max-width: 24rem;
         margin: 0 auto;
         margin-top: 2rem;
         text-align: center;

     }

     .city-info {
         margin-top: 3.5rem;
         margin-left: 1rem;
         font-size: 0.9rem;
         color: hsl(0, 0%, 100%);
         font-family: "DM Sans";
     }

     .city-info h1 {
         font-size: 2.2rem;
         font-weight: 700;
     }

     .city-info h3 {
         margin-top: 0.7rem;

         color: hsl(240, 6%, 70%);
     }

     .temperauremain {
         margin-top: -7rem;
         gap: 1rem;
         color: hsl(250, 6%, 84%);
         margin-left: 12.2rem;
         font-size: 2.9rem;
         font-family: "Dm Sans";
         font-weight: 300;
     }

     .temperauremain h1 {
         margin-top: -2.9rem;
     }

     .temperauremain img {
         height: 11rem;
         width: auto;
         margin-left: -11rem;
         margin-top: -5rem;
     }

     .weather-stats {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 1.2rem 1rem;
         margin: 1.5rem auto 0;
         padding: 0 1rem;
         justify-items: center;
     }

     .weather-stats>div {
         width: 81%;
         height: 8vh;
         max-width: none;
         min-width: auto;
         padding: 1rem;
         border-radius: 0.7rem;
         text-align: left;
         background-color: hsl(243, 27%, 20%);
     }

     .weather-stats p:first-child {
         font-size: 1.2rem;
         opacity: 0.8;
         margin-bottom: 0.3rem;
     }

     .weather-stats p:last-child {
         font-size: 1.4rem;
         margin-top: 1.3rem;
         font-weight: bold;
     }

     .daily-forcast {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 1rem;
         margin-top: 2rem;
         margin-left: 0;
         padding: 0 1rem;
     }

     .forecast-card {
         background: hsl(243, 27%, 20%);
         border-radius: 0.9rem;
         /* padding: 0.8rem; */
         padding: 2rem 0.5rem;
         text-align: center;
         color: white;
         backdrop-filter: blur(6px);
         transition: transform 0.2s ease, background 0.2s ease;
         min-height: 95px;
     }

     .forecast-card .day {
         font-size: 1rem;
         font-weight: 600;
         margin-bottom: 0.3rem;
     }

     .forecast-card img {
         width: 50px;
         height: 50px;
         margin: 0.4rem 0;
     }

     .forecast-card .temp {
         font-size: 0.80rem;
         line-height: 1.2;
         opacity: 0.9;
     }



     .hourly-forcast {
         width: auto;
         max-width: 90vw;
         min-width: 80vw;
         margin: 1.5rem auto 0;
         border-radius: 14px;
         background: hsl(243, 27%, 20%);
         padding: 0 0 1rem 0;
         display: flex;
         flex-direction: column;
         gap: 0.6rem;
         box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
         min-height: auto;
         min-height: 35rem;
         max-height: 41rem;
         height: 35rem;
     }

     .hourly-forecast-header {
         display: flex;
         padding: 1rem 1.2rem 0.8rem 1.2rem;
         gap: 7.8rem;
     }

     .hourly-forecast-title {
         font-size: 1rem;
     }

     .days-dropdown-btn {
         display: flex;
         align-items: center;
         background: hsl(243, 23%, 24%);
         color: #fff;
         border: none;
         border-radius: 7px;
         padding: 0.25rem 0.6rem;
         font-size: -2.08rem;
         font-family: "DM Sans", sans-serif;
         cursor: pointer;
         min-width: 80px;
         justify-content: space-between;
         transition: background 0.18s;
         outline: none;
         width: 80px;
         height: 2rem;
         max-width: 100px;
     }

     .days-dropdownmain {
         padding: 0.4rem 0.7rem;
         font-size: 0.9rem;
         border-radius: 8px;
         max-width: 100px;
     }

     .hourly-forecast-cards {
         gap: 0.7rem;
         padding: 0 1rem;
     }

     .hourly-forecast-card {
         padding: 0.7rem 0.7rem;
         border-radius: 9px;
         gap: 0.8rem;
     }

     .hour-label {
         font-size: 0.95rem;
     }

     .hourly-weather-icon {
         width: 24px;
         height: 24px;
     }

     .hour-temp {
         font-size: 1rem;
     }
 }