@import url(bootstrap.min.css);
@import url(static.css);
@import url(fonts.css);

.weatherApp {
   /* background-image: url(../imgs/cloudy.svg); */
   background-position: center;
   background-size: cover;
   color: #FFF;
}

.loader-container {
   position: absolute;
   inset: 0;
   z-index: 10;
   background-color: rgb(0, 25, 60);
}

.fadeOut {
   animation: fadeout 1s 2s ease forwards;
}

@keyframes fadeout {
   0% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

.loader {
   font-size: var(--font-size-5xl);
   animation: loader 3s ease infinite;
}

@keyframes loader {
   0% {
      opacity: 1;
   }

   50% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

.weatherApp.overlay::before {
   background-color: rgba(0, 0, 0, 0.25);
}

.main_sec {
   height: 100dvh;
   text-align: end;
   justify-content: space-between;
   position: relative;
}

.errorMsg {
   position: absolute;
   text-align: start;
   background-color: rgba(93, 93, 93, 0.45);
   backdrop-filter: blur(6px);
   padding: var(--space-md) var(--space-xl);
   border-radius: 10px;
   cursor: pointer;
   inset-inline-start: -28%;
   transition: 1s;
   opacity: 0;
}

.showError {
   opacity: 1;
   inset-inline-start: 2%;
   animation: fadeout 2s 6s ease forwards;
}

.errorMsg p:first-child {
   font-weight: bold;
   letter-spacing: 2px;
   color: rgb(221, 30, 30);
   margin-bottom: var(--space-sm);
}

.errorMsg p:last-child {
   font-size: var(--font-size-sm);
}

.date {
   position: relative;
   padding-inline-end: var(--space-sm);
}

.date::after {
   content: "";
   position: absolute;
   width: 1.5px;
   height: 65%;
   inset-inline-end: 1px;
   top: 50%;
   transform: translateY(-50%);
   background-color: rgba(163, 163, 163, 0.8);
}

.currentWeather h1 {
   /* background: linear-gradient(#ffffff 0%, #2a6b66 100%);
   -webkit-background-clip: text;
   color: transparent;
   background-clip: text; */
   letter-spacing: var(--space-xs);
}

.todaysForecast {
   padding-top: var(--space-lg);
   border-top: rgba(126, 126, 126, 0.7) 3px solid;
}

.forecastCard {
   padding: 14px var(--space-md);
   margin-bottom: 4px;
   border-radius: 8px;
   text-align: center;
   background: rgba(255, 255, 255, 0.07);
   backdrop-filter: blur(6px);
}

.forecastCard p:first-child {
   position: relative;
   margin-bottom: var(--space-md);
}

.forecastCard p:first-child::after {
   content: "";
   position: absolute;
   height: 1.5px;
   width: 100%;
   inset-inline-start: 0;
   bottom: -2px;
   background-color: #5e6565;
}

.weatherIcon {
   background-color: rgba(255, 255, 255, 0.09);
   padding: 14px;
   border-radius: 6px;
}

.forecastCard p:last-child {
   font-weight: bold;
   font-size: var(--font-size-lg);
   margin-top: var(--space-xs);
}

.sideBar {
   height: 100dvh;
   border-left: rgba(126, 126, 126, 0.14) 4px solid;
   background: rgba(255, 255, 255, 0.04);
   backdrop-filter: blur(10px);
   text-align: center;
   /* padding-bottom: var(--space-md); */
}

.cityInput {
   position: relative;
   width: fit-content;
   align-self: center;
}

.cityInput i {
   position: absolute;
   right: 10px;
   top: 35%;
   transform: translateY(-50%);
   cursor: pointer;
}

.input {
   all: unset;
   text-align: start;
   border: rgba(255, 255, 255, 0.1) 2px solid;
   padding: 4px 32px 4px 12px;
   border-radius: 6px;
   margin-bottom: var(--space-md);
}

.input::placeholder {
   color: inherit;
   opacity: 0.8;
}

.input:focus {
   box-shadow: 0px 0px 3px rgb(210, 210, 210);
}

.sideBar__degree {
   padding-bottom: var(--space-md);
   border-bottom: rgba(126, 126, 126, 0.7) 2px solid;
}

.sideBar__degree h2 {
   font-size: var(--font-size-5xl);
   margin-bottom: 0;
}

.subText {
   color: rgba(255, 255, 255, 0.4);
}

.sideBar__forecast {
   margin-top: var(--space-lg);
   overflow: hidden;
}

.sideBar__forecast h3 {
   font-size: var(--font-size-lg);
   font-weight: bold;
   letter-spacing: 2px;
}

.forecast__range {
   margin-block: var(--space-sm);
   font-size: var(--font-size-sm);
   gap: var(--space-sm);
}

.forecast__range li {
   cursor: pointer;
   transition: 0.2s;
   padding: 4px 10px;
   border-radius: 6px;
}

.forecast__range li:hover {
   background-color: #0000004a;
}

.forecast__range .active {
   background-color: #0000004a;
}

.forecast__days {
   overflow-y: auto;
   margin-top: var(--space-md);
}

.forecast__days li {
   display: flex;
   justify-content: space-between;
   padding-inline: var(--space-sm);
   /* margin-top: var(--space-md); */
}

.day-icon {
   display: flex;
   text-align: start;
   gap: var(--space-sm);
}

.day__degree {
   padding: 0 var(--space-md);
   border-left: #5e656573 solid 2px;
}

@media screen and (max-width:768px) {
   :root {
      --tablet-height: 45dvh;
   }

   .main_sec {
      height: var(--tablet-height);
   }

   .sideBar {
      height: calc(100dvh - var(--tablet-height));
   }
}

@media screen and (max-width:540px) {
   :root {
      font-size: 14px;
      --font-size-5xl: 4rem;
      --tablet-height: auto;
   }

   h1 {
      margin-top: 1rem;
      font-size: calc(var(--font-size-5xl) - 0.5rem);
   }
}