body {
  background-image: url("assets/web\ background.png");
  transition: 0.5s;
}

#containerdiv {
  display: flex;
  padding: 3%;
  height: 100vh;
  gap: 3%;
}

/* city div */

#citydiv {
  width: 25%;
  background-color: hsl(34, 78%, 91% ,0.2);
  border-radius: 40px;
  border: 1.5px solid rgb(255, 255, 255, 0.3);
  height: 95%;
  box-shadow: 2px 2px 5px grey;
}
#cityinput {
  margin-top: 20%;
  width: 90%;
  margin-left: 5%;
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 8px;
  height: 35px;
}
#savedcity {
  color: rgba(0, 0, 0, 0.55);
  margin: 8%;
  font-size: large;
}
#savedcitiesdiv {
  color: rgba(0, 0, 0, 0.8);
  font-size: larger;
  margin-left: 5%;
}

/* temp div */


#tempdiv {
  width: 50%;
  background-color: aquamarine;
  background-image: url("assets/temp\ div\ background.png");
  background-size: cover;
  border-radius: 25px;
  color: white;
  border: 2px solid rgb(255, 255, 255,0.5);
  box-shadow: 2px 2px 5px grey;
   height: 85%;
   margin-top: 6%;
   display: flex;
   flex-direction: column;
   gap: 5%;
}
#citynamediv {
  height: 32%;
  padding-top: 10%;
  padding-left: 7%;
  font-size: xxx-large;

}

#weathericon {
  width: 60px;
  height: 60px;
  display: block;
  margin: 10px auto;
}

#tempinfodiv {
  height: 32%;
  padding-left: 7%;
  font-size: xxx-large;
  margin-bottom: 1%;
}

#daysdiv {
  display: flex;
  height: 27%;
   background-color: hsl(34, 78%, 91% ,0.2);
  border-radius: 40px;
  margin-bottom: 7%;
  margin-left: 3%;
  margin-right: 3%
}

.day {
  flex: 1;
  margin: 2%;
  text-align: center;
}

/* info div */

#infocontainerdiv {
 display: flex;
 flex-direction: column;
 width: 25%;
}

.infodiv {
   
  background-color: hsl(34, 78%, 91% ,0.2);
  border-radius: 40px;
  border: 1.5px solid rgb(255, 255, 255, 0.3);
  height: 95%;
  box-shadow: 2px 2px 5px grey;
  margin-bottom: 10%;
  text-align: center;
  font-size: x-large;
}