:root{
  --main-color:hsl(171, 100%, 41%);
  --color-black:black;
  --color-white:white;
}

/* header starts */
.body-night{
  background-image: url(../images/pexels-photo-631477.jpeg);
}

header{
  background-color: var(--main-color);
}

h2{
  font-size: 45px;
}
/* header ends */



/* col one starts */
.search-hr{
  background-color: black;
}

p.city{
  font-size: 20px;
  font-weight: bold;
  background-color: rgb(61, 55, 55);
  padding: 25px;
  margin: 10px;
  cursor: pointer;
}

p.city:hover{
  background-color: var(--main-color);
  color: var(--color-black);
  border: 1px solid var(--color-black);
}

.uv-index{
  background-color: rgb(12, 141, 12);
  font-size: 23px;
  color: white;
  padding:5px 20px 5px 20px;
  border-radius: 15px;
}

#user-input{
  border: 2px solid black;
}

#search{
  color: black;
}

#search:hover{
  background-color: black;
  color: white;
}
/* col one ends */



/* col two starts */
.city-info{
  font-size: 30px;
  margin-top:25px;
}

/* col two ends */
#col-1{
  background-color: bisque;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 10px;
  border-right: 2px solid var(--color-black);
}

#city-infos{
  border: 1px solid black;
}

#home-btn{
  background-color: var(--main-color);
  color: var(--color-black);
  cursor: pointer;
  padding: 5px;
  border-radius: 10px;
}

#home-btn:hover{
  background-color: black;
  color: white;
  padding: 10px;
  border: 2px solid white;
}

#home-weather-page{
  background-image: url(../images/weather.logo.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}