body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: #48484a;
  /* background-color: #f5f5f5; */
  background: linear-gradient(
    125deg,
    #ecfcff 0%,
    #ecfcff 40%,
    #b2fcff calc(40% + 1px),
    #b2fcff 60%,
    #5edfff calc(60% + 1px),
    #5edfff 72%,
    #3e64ff calc(72% + 1px),
    #3e64ff 100%
  );
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 1s;
  height: 100vh;
  margin: 0px;
  padding: 0px;
}

main {
  height: 100vh;
}

p {
  text-align: center;
}

#locationBtn {
  font-size: 16px;
  display: flex;
  align-items: center;
  padding: 10px;
  padding-right: 15px;
  border: none;
  border-radius: 5px;
  margin: 0px 0px 0px 0px;
  background-color: #3e64ff;
  color: white;
  font-weight: bold;
}

#inputSpan {
  margin: 50px;
  display: inline-block;
  clear: both;
}

.userInputs {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  margin: 10px;
  margin-top: 0px;
}

.extraInfoDiv {
  text-align: center;
}

.extraInfo {
  display: inline-block;
  background-color: #3e64ff;
  padding: 10px;
  color: white;
  border-radius: 5px;
}

#weatherDescription {
  text-transform: capitalize;
  margin-top: 0;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 10px 0px 10px;
}

input {
  font-size: 16px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #3e64ff;
  margin-right: 10px;
}

#searchBtn {
  font-size: 16px;
  border: 1px solid #3e64ff;
  background-color: #3e64ff;
  color: white;
  font-weight: bold;
  padding: 10px;
  border-radius: 5px;
}

.icon {
  min-width: 100px;
  min-height: 100px;
}

#temp {
  margin-bottom: 2px;
}

#location {
  margin-top: 2px;
}

#locationIcon {
  display: flex;
  height: 20px;
  width: 20px;
  padding-right: 10px;
}

.hidden {
  display: none;
}

form {
  display: flex;
  align-items: center;
  justify-content: center;
}

#sunriseP {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  display: inline-block;
}

#sunriseIcon {
  align-items: center;
  text-align: center;
  display: flex;
  flex-direction: row;
}