@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
  
* {
  padding: 0;
  margin: 0;
  font-family: poppins;
  box-sizing: border-box;
}
body {
  background: #171717;
  color: white;
}
header {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
}
header div {
  display: flex;
  gap: .5rem;
}
header img {
  width: 12.5%;
  margin-top: -.5rem;
  filter: invert(100);
}
header i {
  font-size: 1.5rem;
  cursor: pointer;
}
.search-bar {
  padding: 1rem;
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  z-index: 10;
  background: #171717;
  display: none;
}

.search-bar input {
  margin-top: 1rem;
  padding: .5rem;
  border-radius: 5px;
  background: transparent;
  color: white;
  border: none;
  outline: none;
}

input::placeholder {
  padding: 1rem;
}
/* City */
.city {
  padding: 1.5rem;
}
.main-content, .properties {
  background: #272727;
  margin-right: 1.5rem;
  margin-left: 1.5rem;
  border-radius: 10px;
  display: none;
}
.dateTime {
  font-size: .8rem;
}
.city p {
  color: dimgray;
}
.weather, .properties-div {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}
.first-div {
  display: flex;
  align-self: center;
}
.first-div img {
  width: 25%;
  filter: invert(100%);
}
.first-div h4 {
  align-self: center;
  font-size: 2rem;
}
.second-div div {
  color: dimgray;
  display: flex;
}
.second-div p {
  font-size: .8rem;
  color: dimgray;
}
.third-div {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  gap: 1rem;
}
.third-div p, .third-div h4 {
  text-align: center;
}
.third-div p {
  color: dimgray;
}
.third-div img {
  width: 100%;
  filter: invert(100%);
}

.day-section {
  background: #272727;
  margin-right: 1.5rem;
  margin-left: 1.5rem;
  border-radius: 10px;
  margin-top: 2rem;
  padding: 1.5rem 0rem;
  display: none;
}
.properties {
  display: block;
  padding: 1rem;
  margin-top: 2rem;
  display: none;
  margin-bottom: 1rem;
}
.properties .wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 1.3rem;
}
.properties div {
  display: flex;
  gap: .5rem;
}
 .properties i {
   font-size: 1.5rem;
 }
  .properties p {
   font-size: .8rem;
   color: dimgray;
 }
 .wrap div p {
   color: white;
 }
 
table {
      width: 100%;
      border-collapse: collapse;
    }
    
    th, td {
      padding: 1rem;
      text-align: center;
      width: 20%
    }
    
    @media (max-width: 600px) {
      th, td {
        padding: .3rem;
        font-size: .8rem;
      }
      .main-content, .day-section, .properties {
        margin-right: 1rem;
        margin-left: 1rem;
      }
    }
  .day1 img,.day2 img, .day3 img, .day4 img, .day5 img {
    width: 35%;
    
  }