body {
  font-family: 'Quicksand', sans-serif;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

#main_section {
  background-color: #96CCFF;
  background-size:cover;
  background-repeat:no-repeat;
  background-position: center center;
}

#kitty_doggo_pic, #main-temp-pic, #error, #row0-3, #row0-6, #row1-3, #row1-6, #row2-3, #row2-6,
#row3-3, #row3-6, #row4-3, #row4-6, #row5-3, #row5-6, #row6-3, #row6-6, #error-bottom-right-img,
#humid-icon0, #humid-icon1, #humid-icon2, #humid-icon3, #humid-icon4, #humid-icon5, #humid-icon6,
#main-humid, #wind-icon0, #wind-icon1, #wind-icon2, #wind-icon3, #wind-icon4, #wind-icon5,
#wind-icon6, #main-wind
{
  display:none;
}

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 5px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

.btn-hourly{
  border-radius: 30px;
  background-color: #96CCFF;
  border-color: #96CCFF;
  color: white;
  font-weight: bold;
  border-style: solid;
  border-width: 3px;
}

.btn-hourly:hover{
  background-color: #96CCFF;
  border-color: #96CCFF;
  border-style: solid;
  border-width: 3px;
  color:white;
}

.btn-daily{
  border-radius: 30px;
  background-color: white;
  border-color: #96CCFF;
  color: #96CCFF;
  font-weight: bold;
  border-style: solid;
  border-width: 3px;
}

.btn-daily:hover{
  background-color: white;
  border-color: #96CCFF;
  color: #96CCFF;
  border-style: solid;
  border-width: 3px;
}

.bottom-right-rows{
  margin-bottom: -2%;
}

.bottom-right-rows span{
  color: #727272;
}

.left-mid-span{
  margin-top: 2.5%;
  color:white;
}


#refresh {
  display: none;
}

.span-height{
  height: 100vh;
}

.main-temp-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main-temp-pic{
  margin-left:30%;
  margin-top:-10%;
}

#row1-curr {
  padding-top: 3%;
}

#row2-curr {
  padding-left: 5%;
  margin-top:5%;
}

#row3-curr {
  margin-top:12%;
}

#row4-curr {
  margin-top:10%;
  color: #727272;
}

.row-text{
  font-size: 15px;
  margin-bottom: 1%
}

#row5-curr {
  margin-top: 5%;
}

#city {
  color: white;
  font-weight: bolder;
}

#day {
  color: white;
  font-size: 25px;
  font-weight: bold;
  margin-top: 1%;
  margin-bottom: 4%;
}

#temp {
  font-size: 80px;
  color: white;
  font-weight: bolder;
}

#timestamp {
  color: white;
  font-size: 25px;
  font-weight: normal;
}

#weather, #country, #date {
  margin-top: -2%;
  color: white;
  font-size: 25px;
  font-weight: normal;
}

#space{
  margin-top: 1%;
  margin-bottom: 1%;
}

.search-btn {
  font-style: normal;
  font-weight: bold;
  padding: 10px 20px;
  font-size: 15px;
  cursor: pointer;
  display: inline-block;
  color: #96CCFF;
  background-color: white;
  border-color: #96CCFF;
  border-style: solid;
  border-width: 3px;
  text-align: center;
  border-radius: 6px;
  margin-left: 1%;
}

.search-btn:hover{
  background-color: #96CCFF;
  color:white;
  border-color: #96CCFF;
  border-style: solid;
  border-width: 3px;
}

.search-city{
  color:#96CCFF;
}

/* this makes button stay beside the input form */
form {
  display: flex;
}

input[type=text] {
  flex-grow: 2;
  border-color: #96CCFF;
  border-style: solid;
  border-width: 3px;
}

#search-city {
  color: #96CCFF;
}

#search-city::placeholder{
  color: #96CCFF;
}

#error-bottom-right-img {
  margin-top: 2%;
}

.show-city-rows{
  margin-top:2%;
  margin-bottom: 2%;
  margin-right: 0.5%;
  margin-left:0.5%;
}

#loc_pin{
  margin-top:-5%;
}

/*  for when it gets added
.city-div0{
  border-radius: 50px 50px 50px 50px;
  background: #96CCFF;
  padding: 20px;
  width: 100%;
  height: 180px;
  margin-bottom: 2%;
}*/

.city-div0{
  border-radius: 50px 50px 50px 50px;
  border-color: #96CCFF;
  border-style: solid;
  border-width: 3px;
  background: white;
  padding: 20px;
  width: 100%;
  height: 180px;
  margin-bottom: 2%;
}


#div0-name{
  color: white;
  font-weight: bold;
  font-size: 20px;
}

#div0-country, #div0-weather {
  color:#96CCFF;
  font-weight: medium;
  margin-top: -2%;
  font-size: 30px;
}

#div0-temp{
  color:#96CCFF;
  font-weight: bold;
  font-size:30px;
  margin-bottom: 5%;
}

.city-div1{
  border-radius: 50px 50px 50px 50px;
  border-color: #96CCFF;
  border-style: solid;
  border-width: 3px;
  background: white;
  padding: 20px;
  width: 100%;
  height: 180px;
  margin-bottom: 2%;
}

#div1-name{
  color: white;
  font-weight: bold;
  font-size: 20px;
}

#div1-country, #div1-weather {
  color:#96CCFF;
  font-weight: medium;
  margin-top: -2%;
  font-size: 30px;
}

#div1-temp{
  color:#96CCFF;
  font-weight: bold;
  font-size:30px;
  margin-bottom: 5%;
}

.city-div2{
  border-radius: 50px 50px 50px 50px;
  border-color: #96CCFF;
  border-style: solid;
  border-width: 3px;
  background: white;
  padding: 20px;
  width: 100%;
  height: 180px;
  margin-bottom: 2%;
}

#div2-name{
  color: white;
  font-weight: bold;
  font-size: 20px;
}

#div2-country, #div2-weather {
  color:#96CCFF;
  font-weight: medium;
  margin-top: -2%;
  font-size: 30px;
}

#div2-temp{
  color:#96CCFF;
  font-weight: bold;
  font-size:30px;
  margin-bottom: 5%;
}

.city-div3{
  border-radius: 50px 50px 50px 50px;
  border-color: #96CCFF;
  border-style: solid;
  border-width: 3px;
  background: white;
  padding: 20px;
  width: 100%;
  height: 180px;
  margin-bottom: 2%;
}

#div3-name{
  color: white;
  font-weight: bold;
  font-size: 20px;
}

#div3-country, #div3-weather {
  color:#96CCFF;
  font-weight: medium;
  margin-top: -2%;
  font-size: 30px;
}

#div3-temp{
  color:#96CCFF;
  font-weight: bold;
  font-size:30px;
  margin-bottom: 5%;
}

.error-2{
  margin-top:5%;
}