@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body {
   position: relative;
   font-family: "Inter", sans-serif;
   min-height: 100vh;
   display: flex;
   color: #ffffff;
   background: linear-gradient(135deg, #293b50 0%, #3f5369 100%);
   overflow-x: hidden;
}
.background {
   position: absolute;
   background-image: url('https://images.unsplash.com/photo-1534088568595-a066f410bcda?q=80&w=2000');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   width: 100%;
   height: 100%;
   z-index: -1;
   transition: all 0.3s ease;
   filter: brightness(0.8);
}
.background::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(180deg, rgba(18, 18, 18, 0.3) 0%, rgba(18, 18, 18, 0.6) 100%);
}
.svg {
   width: 40px;
   height: 40px;
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
   transition: transform 0.2s ease;
}
.climate-svg {
   width: 84px;
   height: 84px;
   animation: float 3s ease-in-out infinite;
}

@keyframes float {

   0%,
   100% {
      transform: translateY(0px);
   }
   50% {
      transform: translateY(-10px);
   }
}

main {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   flex: 1;
   padding: 40px;
   position: relative;
   z-index: 1;
}

header {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 24px;
   animation: fadeInDown 0.6s ease;
}

@keyframes fadeInDown {
   from {
      opacity: 0;
      transform: translateY(-20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.logo img {
   width: 90px;
   height: 90px;
   filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
   transition: transform 0.3s ease;
}
.logo img:hover {
   transform: rotate(360deg) scale(1.1);
}
.input-area {
   display: flex;
   align-items: center;
   gap: 8px;
   border-bottom: 2px solid rgba(255, 255, 255, 0.6);
   width: 320px;
   padding: 8px;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   border-radius: 12px 12px 0 0;
   transition: all 0.3s ease;
}
.input-area:focus-within {
   border-bottom: 2px solid #ffffff;
   background: rgba(255, 255, 255, 0.15);
   transform: translateY(-2px);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.search-input {
   font-size: 18px;
   background-color: transparent;
   color: #ffffff;
   border: none;
   outline: none;
   width: 100%;
   padding: 8px 16px;
}
.search-input::placeholder {
   color: rgba(255, 255, 255, 0.7);
}
#send-city {
   width: 28px;
   height: 28px;
   cursor: pointer;
   transition: transform 0.2s ease;
}
#send-city:hover {
   transform: scale(1.2) rotate(15deg);
}
.main-center {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   height: 100%;
   animation: fadeInUp 0.8s ease 0.2s both;
}

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}


.center-infos {
   display: flex;
   align-items: flex-end;
   gap: 24px;
   margin-bottom: 24px;
}
.celsius {
   font-size: 120px;
   font-weight: bold;
   margin-bottom: -8px;
   text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
   background: linear-gradient(180deg, #ffffff 0%, #a8daff 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}
.celsius span {
   font-weight: normal;
}
.city-name {
   font-size: 52px;
   font-weight: bold;
   margin-bottom: 12px;
   text-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
.date {
   font-size: 18px;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   opacity: 0.95;
}
.climate-area {
   text-align: center;
}
.description {
   margin-top: 4px;
   font-size: 16px;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.main-bottom {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 32px;
   height: fit-content;
   margin-top: 20px;
   animation: fadeInUp 1s ease 0.4s both;
}
.info-box {
   min-width: 200px;
   border-radius: 20px;
   padding: 20px;
   backdrop-filter: blur(12px);
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(255, 255, 255, 0.18);
   transition: all 0.3s ease;
}
.info-box:hover {
   transform: translateY(-5px);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
}
.temp-min-max {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}
.info-item {
   display: flex;
   margin-bottom: 16px;
}
.info-item:last-child {
   margin-bottom: 0;
}
.info-item img {
   margin-right: 4px;
}
.info-title {
   color: rgba(255, 255, 255, 0.85);
   margin-bottom: 8px;
   font-size: 14px;
   font-weight: 500;
}
.info-value {
   font-size: 20px;
   font-weight: bold;
   color: #DDFFFF;
   text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}


footer {
   margin-top: 20px;
   animation: fadeIn 1.2s ease 0.6s both;
}
@keyframes fadeIn {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}
footer p {
   font-size: 15px;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
footer p a {
   position: relative;
   color: #ffffff;
   text-decoration: none;
   font-weight: 600;
}
footer p a::before {
   position: absolute;
   content: '';
   width: 0%;
   height: 2px;
   left: 50%;
   bottom: -2px;
   background: linear-gradient(90deg, #a8daff 0%, #ffffff 100%);
   transition: all 0.3s ease;
   box-shadow: 0 2px 8px rgba(168, 218, 255, 0.5);
}
footer p a:hover::before {
   width: 100%;
   left: 0%;
}

@media screen and (max-width: 768px) {
   main {
      padding: 24px 16px;
   }
   .logo img {
      width: 64px;
      height: 64px;
   }
   .input-area {
      width: 280px;
   }
   .center-infos {
      gap: 16px;
   }
   .celsius {
      font-size: 64px;
   }
   .city-name {
      font-size: 28px;
   }
   .date {
      font-size: 14px;
   }
   .climate-svg {
      width: 48px;
      height: 48px;
   }
   .main-bottom {
      flex-direction: column;
   }
}

@media screen and (max-width: 420px) {
   header {
      gap: 12px;
   }
   .logo img {
      width: 56px;
      height: 56px;
   }
   .input-area {
      width: 100%;
   }
   #send-city {
      width: 24px;
      height: 24px;
   }
   .center-infos {
      gap: 12px;
   }
   .celsius {
      font-size: 52px;
   }
   .city-name {
      font-size: 24px;
   }
   .climate-svg {
      width: 40px;
      height: 40px;
   }
}