/* Global css variables used for colors */
/* HEX:
//Clouds
#F47775 - dark red
#FBF4F4 - light pink
//Rain
#F4F7F8 - grey/light blue
#164A68 - dark blue
#A3DEF7 - light blue
//Sunny
#2A5510 - dark green
#F7E9B9 - beige/yellow 
*/

:root {
  --primary: tomato;
  --secondary: #63cdc9;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", sans-serif;
  display: flex;
  justify-content: center;
  margin: 15px 15px;
}

.todays-weather {
  width: 70%;
  padding: 40px 20px;
}

#wind {
  height: 40px;
  width: 40px;
}
#wind:hover {
  opacity: 0.5;
}

.todays-weather p {
  padding-top: 5px;
}

.weather-body {
  height: 100vh;
  width: 100%;
}

.city-weather {
  padding: 10px 20px;
}

.city-weather img {
  transition: transform 0.7s ease-in-out;
}

.city-weather img:hover {
  transform: rotate(360deg);
}

.todays-item {
  /* max-width: 30%; */
  padding: 20px 0px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.items-wrapper {
  display: flex;
  flex-direction: row;
}

.todays-item img {
  padding: 20px 5px;
}

.todays-item p {
  display: flex;
}

h1 {
  animation: pulse 3s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(0.95);
  }
  70% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.95);
  }
}

.forecast-section {
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* margin-bottom: 30px; */
}

.forecast-row {
  font-size: 1.15rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 0.1rem dotted;
}

/* Media qurries  */
/* --Tablet-- */
@media (min-width: 667px) and (max-width: 1024px) {
}

/* --Desktop-- */
@media (min-width: 1025px) {
  body {
    background: linear-gradient(-45deg, #ffffff, #ffe4ee, #cbecf8, wheat);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
  }

  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .weather-body {
    max-width: 40%;
  }
}

form {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.city-selector {
  border: none;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  padding: 3px;
  width: fit-content;
  margin-bottom: 20px;
}