* {
  margin: 0;
  padding: 0;
  font-family: "Merriweather", sans-serif;
}

.background {
  background-image: url("../images/background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
}

.website {
  display: block;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  margin: 20px;
}

.website header {
  font-size: 33px;
  color: white;
  padding: 40px;
  display: block;
}

.weather-info {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.right-card {
  display: none;
  justify-content: center;
  align-items: center;
  width: 80%;
  align-self: flex-start;
}

.left-card {
  width: 80%;
  margin: 20px;
  padding: 30px;
  padding-top: 50px;
  padding-bottom: 83px;
  border-radius: 20px;
  text-align: center;
  background-image: linear-gradient(rgb(81, 163, 207), rgb(76, 117, 199));
  align-self: flex-start;
}

.search-card {
  background-image: linear-gradient(rgb(153, 118, 230),  rgb(76, 117, 199));
  display: block;
  margin: 20px;
  padding: 30px;
  border-radius: 20px;
  text-align: center;
}

.search-input {
  width: 100%;
  padding-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-input p {
  padding: 10px;
  display: none;
  font-style: italic;
  color: rgb(227, 227, 227);
}

.search-input input {
  border: 0;
  outline: 0;
  background: white;
  color: rgb(111, 111, 111);
  padding: 5px;
  border-radius: 15px;
  height: 40px;
}

.search-input button {
  border: 0;
  outline: 0;
  background: white;
  color: white;
  padding: 9px;
  border-radius: 25px;
  height: 40px;
  cursor: pointer;
}

.search-input button img {
  max-width: 25px;
}

.todays-date {
  padding: 20px;
  color: rgb(158, 235, 247);
  font-size: 30px;
  font-family: "Poppins", sans-serif;
}

.city {
  padding: 5px;
  padding-top: 35px;
  color: white;
  font-size: 30px;
  font-family: "Merriweather", serif;
}

.temp {
  padding-bottom: 20px;
  color: white;
  font-size: 30px;
  font-family: "Merriweather", serif;
}

.current-weather {
  display: none;
}

.weather-icon {
  max-width: 50px;
  padding: 10px;
}

.conditions {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.column {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.column img {
  max-width: 40px;
}

.humidity {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: white;
  font-size: 20px;
  margin: 5px;
}

.wind {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: white;
  font-size: 20px;
  margin: 5px;
}

.saved-searches {
  display: block;
  font-family: "Merriweather", serif;
  color: rgb(226, 184, 228);
}

.saved-searches button {
  font-family: "Merriweather", serif;
}

.search-handler {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-title {
  padding: 10px;
  font-family: "Merriweather", serif;
  text-align: left;
}

#history {
  padding-top: 15px;
  padding: 10px;
  color: rgb(218, 163, 215);
}

#history div {
  padding: 3px;
}

#history div:hover {
  color: white;
  cursor: pointer;
}

.five-day {
  background-image: linear-gradient(rgb(81, 163, 207), rgb(153, 118, 230));
  margin: 20px;
  border-radius: 20px;
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
  font-size: 20px;
  color: white;
  align-self: flex-start;
}

.five-day header {
  font-family: "Merriweather", serif;
  font-size: 23px;
  color: white;
  padding: 20px;
  padding-bottom: 50px;
}

.tempy,
.future-day {
  padding: 15px;
}

.future-day {
  width: 100px;
  flex: 1 0 100%;
}

.future-date {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  padding: 2px;
  color: rgb(56, 68, 119);
}

.windy .humid {
  text-align: center;
  padding: 2px;
}

.resize {
  width: 25px;
  height: auto;
}

.clear {
  text-align: left;
  background-color: transparent;
  border-color: pink;
  color: pink;
  border-radius: 20px;
  padding: 5px;
}

.slider-wrapper {
  position: relative;
  overflow: hidden;
  max-width: 80%;
  margin: 0 auto;
}

.slider {
  display: flex;
  transform: translateX(0%);
  transition: transform 0.3s ease;
}

.future-day {
  flex: 1 0 100%;
}

.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  color: white;
  font-size: 20px;
  border: none;
  cursor: pointer;
  text-shadow: 1px 1px 2px white;
}

.prev-btn {
  left: 0;
}

.next-btn {
  right: 0;
}

.prev-btn:hover {
text-shadow: 4px 4px 4px white;
}

.next-btn:hover {
  text-shadow: 4px 4px 4px white;
}

.search-scroll {
  display: block;
  height: 70px;
  overflow: hidden;
  overflow-y: scroll;
}

.search-scroll::-webkit-scrollbar {
  width: 10px;
  padding: 10px;
}

.search-scroll::-webkit-scrollbar-track {
  background: rgb(153, 118, 230);
  border-radius: 10px;
}

.search-scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgb(76, 117, 199);
}

@media screen and (max-width: 768px){
  .background {
  height: 215vh;
  }

  .weather-info {
    display: block;
    text-align: center;
    font-size: 15px;
    margin: 0 auto;
  }
}