body {
   background: url(../images/sunset.jpg) center / cover no-repeat fixed;
   background-repeat: no-repeat;
   background-attachment: fixed;
   font-family: "Barlow", "DM Sans", sans-serif;
}

h1 {
   font-family: "Barlow Condensed", "DM Sans", sans-serif;
   font-size: 60px;
   font-weight: 900;
   letter-spacing: 2px;
   margin: 0;
   color: #523c4e;
}

a {
   color: #523c4e;
}
.container {
   background-color: transparent;
   max-width: 700px;
   margin: 70px auto;
   padding: 40px;
   border-radius: 20px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.container.glass {
   position: relative;
   background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0.1)
   );
   backdrop-filter: blur(24px) saturate(160%) contrast(105%);
   -webkit-backdrop-filter: blur(24px) saturate(160%) contrast(105%);
   border: 1px solid rgba(255, 255, 255, 0.35);
   box-shadow: 0 12px 30px rgba(20, 24, 60, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.logo {
   padding: 18px;
}

.search-form {
   display: flex;
   gap: 10px;
   align-items: center;
   margin: 12px 0;
   padding-bottom: 30px;
   border-bottom: 1px solid #75586f;
}

.search-form input[type="search"] {
   flex: 1;
   padding: 18px 26px;
   border: 1px solid white;
   border-radius: 12px;
   font-size: 16px;
}

.search-form input[type="submit"] {
   padding: 18px 32px;
   border: 0;
   border-radius: 12px;
   background: #523c4e;
   color: white;
   font-weight: 600;
   font-size: 16px;
}
.search-form input[type="submit"]:hover {
   background: #75586f;
}

.weather-app-data {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 24px;
   padding-bottom: 30px;
   color: #523c4e;
}

.weather-app-data > div:first-child {
   flex: 1 1 auto;
   min-width: 0;
}

.weather-app-details {
   margin: 6px 0 0;
   line-height: 1.35;
}

.weather-app-details strong {
   font-family: "Barlow Condensed", "DM Sans", sans-serif;
   color: #523c4e;
}

.weather-app-temp-container {
   display: flex;
   align-items: baseline;
   gap: 12px;
   white-space: nowrap;
}

.weather-app-temp-value {
   font-family: "League Spartan", "Barlow Condensed", sans-serif;
   font-weight: 700;
   font-size: clamp(48px, 9vw, 96px);
   line-height: 0.82;
   letter-spacing: -0.5px;
}

.weather-app-temp-unit {
   font-family: "Barlow Condensed", "DM Sans", sans-serif;
   position: relative;
   font-size: 24px;
   top: -44px;
   font-weight: 700;
   margin-left: 6px;
}

.weather-app-icon {
   display: inline-flex;
   align-items: center;
   line-height: 1;
   font-size: 52px;
}

.weather-app-icon img {
   width: 72px;
   height: 72px;
   display: block;
}

.credits {
   font-size: 13px;
   text-align: center;
   padding: 20px;
   color: white;
}

.weather-forcast {
   display: flex;
   justify-content: space-around;
   border-bottom: 1px solid #75586f;
   padding-bottom: 30px;
}

.weather-forcast-date {
   text-align: center;
   color: #75586f;
   font-size: 18px;
   line-height: 20px;
   margin-bottom: 10px;
}

.weather-forcast-icon {
   font-size: 30px;
   text-align: center;
}

.weather-forcast-temps {
   font-size: 16px;
   text-align: center;
   color: #523c4e;
   display: flex;
   justify-content: center;
   margin-top: 10px;
}

.weather-forcast-temper {
   padding: 0 10px;
}