nav {
  background-image: linear-gradient(to bottom right, #ffd89b, #19547b);
}

nav h1 {
  color: rgb(75, 75, 75);
  font-size: 35px;
}

#search_container {
  width: 200%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

#search_container button {
  width: 100%;
  margin-bottom: 5px;
  background-color: #19547b;
  box-shadow: 5px 5px 5px #19547b59;
}

#today {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.UVI {
  padding: 5px;
  border-radius: 10px;
}

#green {
  background-color: rgb(3, 185, 3);
  color: white;
}

#yellow {
  background-color: rgb(231, 216, 0);
  color: white;
}

#orange {
  background-color: rgb(219, 143, 0);
  color: white;
}

#red {
  background-color: rgb(190, 0, 0);
  color: white;
}

#purple {
  background-color: rgb(131, 46, 75);
  color: rgb(146, 129, 129);
}

#forecast-card {
  font-family: "Times New Roman", Times, serif;
  background-color: #19547b;
  padding: 25px;
}

#forecast-card:hover {
  box-shadow: 10px 10px 5px #ccc;
  -moz-box-shadow: 10px 10px 5px #ccc;
  -webkit-box-shadow: 10px 10px 5px #ccc;
  -khtml-box-shadow: 10px 10px 5px #ccc;
  transition: box-shadow 0.6s, transform 0.6s;
  transform: translateY(-5px) translateX(-5px);
}

#history {
  margin-top: 30px;
}

#history button {
  background-color: #ffd89b;
  color: black;
  margin-top: 5px;
}