@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;500&display=swap');

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Kanit', sans-serif;

   /* following method is used to debug the css layout */
   /* outline: 1px solid red; */
}

body {
   display: flex;
   align-items: center;
   justify-content: center;

   min-height: 100vh;

   background: linear-gradient(to left, #FFF4CF, #FFB200);
}

/* top bar styling */
#backButton {
   background: none;
   border: none;
   transform: translateY(2.5px);
   margin-left: 20px;
   cursor: pointer;
}

.wrapper {
   width: 400px;
   background: linear-gradient(to right, #FFF4CF, #FFB200);

   box-shadow: 0px 0px 200px 5px #FFB200;

   padding-bottom: 10px;
}

.wrapper header {
   display: flex;
   align-items: center;
   justify-content: left;

   gap: 70px;

   font-size: 21px;
   font-weight: 600;

   color: black;
   background: linear-gradient(to left, #FFF4CF, #FFB200);

   padding: 20px 0;
}

.content p {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-block: 5px;
   font-size: 16px;
   font-weight: 300;
}

.wrapper .input-part {
   margin: 20px 25px 30px;
}

.wrapper .active .input-part {
   display: none;
}

/* input part styling */
.input-part .info-txt {
   font-size: 17px;
   text-align: center;
   padding: 12px 10px;
   margin-bottom: 15px;
   display: none;
}

.input-part .info-txt.error {
   color: white;
   display: block;
   background: rgb(241, 55, 23);
   border: none;
   border-radius: 5px;
   font-weight: 300;
}

.input-part .info-txt.pending {
   color: white;
   display: block;
   background: #35a306;
   border: none;
   border-radius: 5px;
   font-weight: 300;
}

.input-part :where(input, button) {
   width: 100%;
   height: 50px;
   border: none;
   outline: none;
   font-size: 18px;
   border-radius: 5px;
}

.input-part input {
   text-align: center;
   padding: 0 15px;
}

.input-part input:is(:focus, :valid) {
   border: 2px solid #06283d;
}

.input-part input::placeholder {
   color: #c6c6c6;
   font-weight: 300;
}

.input-part button {
   color: bisque;
   background: #06283d;
   cursor: pointer;
   font-weight: 300;
   transition: background 0.2s ease-in;
}

/* works only in non-touch devices */
@media (hover: hover) and (pointer: fine) {
   .input-part button:hover {
      background: #28313e;
   }

   .input-part button:active {
      transform: translateY(1px);
   }
}

/* weather part styling */
.wrapper .weather-part {
   margin: 25px;

   align-items: center;
   justify-content: center;

   flex-direction: column;

   gap: 3px;

   display: none;
}

.wrapper.active .weather-part {
   display: flex;
}

.weather-part img {
   max-width: 130px;
   margin: 5px 0;
}

.weather-part .temp {
   display: flex;
   font-weight: 500;
   font-size: 60px;
}

.weather-part .temp .deg {
   font-size: 40px;
   display: block;
   margin: 4px 3px;
}

.weather-part .temp .numb {
   font-weight: 500;
}

.weather-part .weather {
   font-size: 20px;
   font-weight: 300;

   text-align: center;

   margin: -15px 20px 7px;
}

.weather-part .location {
   display: flex;
   align-items: flex-start;

   gap: 3px;

   text-align: center;

   font-size: 18px;

   padding: 0 15px 0 0;
   margin-bottom: 25px;
}

.weather-part span {
   margin-top: 1.3px;
}

/* secondary weather details */
.weather-part .bottom-details {
   display: flex;
   justify-content: center;

   flex-wrap: wrap;

   gap: 10px;

   width: 100%;
   padding: 10px 0;
}

.column {
   display: flex;
   flex-direction: row;
   justify-content: center;
}

.column i {
   color: black;
   font-size: 40px;

   margin-right: 15px;

   transform: translateY(6px);
}

.humidity i {
   font-size: 35px;
   transform: translateY(8px);
}

.column .details {
   margin-right: 25px;
}

.details .temp,
.humidity span {
   font-size: 15px;
   font-weight: 400;

   gap: 1px;
}

.column .details p {
   font-size: 15px;
   font-weight: 400;
   margin: 0;
}

/* responsive for mobile screens */

@media screen and (min-width: 320px) and (max-width: 430px) {
   .wrapper {
      width: 90%;
   }

   .wrapper header {
      justify-content: center;
   }

   #backButton {
      display: none;
   }

   .input-part input::placeholder {
      font-size: 15px;
   }
}