body {
  font-family: "Roboto", sans-serif;
}

input {
  margin: 10px 0;
  border: solid 1px blue;
  color: blue;
  padding: 5px 10px;
}

button {
  margin: 10px 0;
  padding: 5px 10px;
}

h1 {
  margin: 0;
}

i {
  font-size: 50px;
}

ul {
  list-style: none;
}

.container {
  background: radial-gradient(
    848px at 10% 20%,
    rgba(174, 231, 165, 0.9) 0%,
    rgb(181, 205, 154) 90%
  );
  display: block;
  max-width: 60%;
  margin-top: 20px;
  margin-bottom: 20px;
  border: solid 2px rgb(15, 85, 15);
  border-radius: 8px;
}

.col.main {
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  color: blue;
}

.unit {
  font-size: 48px;
}

.metric {
  font-size: 48px;
  font-weight: normal;
}

.col {
  text-align: right;
  color: blue;
  font-size: 18px;
  font-weight: bold;
}
.weatherForecast {
  text-align: center;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
  color: blue;
  font-size: 20px;
  transition: all 150ms ease-in-out;
}

.aLink {
  text-decoration: none;
  color: rgb(15, 85, 15);
}

:hover .aLink {
  color: rgb(15, 85, 15);
}

.conecting {
  margin: 0 auto;
  display: block;
  max-width: 60%;
}

.col-2 {
  background: linear-gradient(to right, rgb(182, 244, 146), rgb(51, 139, 147));
}