* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #e1e6fa;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 16px;
}

#app {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
  min-height: 85dvh;
  padding: 15px;
}

h1 {
  color: #183152;
}

.blueText {
  color: #375d81;
}

.weatherBox,
.forecastBox {
  background-color: #ffffff;
  border-radius: 15px;
}

nav {
  height: 60px;
  background-color: #183152;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
nav a {
  color: #fff;
  text-decoration: none;
}

.locationSearch {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 10px;
}
.locationSearch label {
  font-size: 21px;
  color: #183152;
  font-weight: bold;
}
.locationSearch input {
  padding: 12px 10px;
  color: #375d81;
  border: none;
  border-bottom: 2px solid #183152;
}
.locationSearch #userLocation {
  width: 45vw;
  text-align: center;
}
.locationSearch #search {
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 21px;
  font-weight: bold;
  border: 3px solid #183152;
  background-color: #183152;
  color: #e1e6fa;
  cursor: pointer;
  transition-duration: 0.25s;
}
.locationSearch #search:hover {
  background-color: #e1e6fa;
  color: #183152;
}
.locationSearch #search:active {
  background-color: #ffffff;
}

.weatherBox {
  padding: 25px;
  margin-bottom: 15px;
}

.headerText {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 45px;
  border-bottom: 3px solid #375d81;
  padding-bottom: 10px;
  margin-bottom: 8px;
}
.headerText h3,
.headerText p {
  margin-bottom: 0;
}
.headerText h3 {
  font-size: 24px;
}
.headerText p {
  color: #abc8e2;
}

.imageSect {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-bottom: 3px solid #375d81;
  padding-bottom: 15px;
  margin-bottom: 18px;
}

.weatherIcon {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.weatherIcon img {
  width: 96px;
}
.weatherIcon h3 {
  margin-bottom: 0;
}

.tempGroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tempGroup h3,
.tempGroup p {
  margin-bottom: 0;
}
.tempGroup h3 {
  font-size: 25px;
  color: #375d81;
}
.tempGroup p {
  color: #abc8e2;
}

.forecastBox {
  width: 85%;
  padding-bottom: 20px;
  margin-bottom: 25px;
}
.forecastBox .headerText {
  padding: 15px;
  margin-bottom: 0;
}

.dailyWeather {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
}
.dailyWeather .dailyItem {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  border-bottom: 2px solid #abc8e2;
}

.dailyItem {
  padding: 13px 0;
}
.dailyItem h3,
.dailyItem p {
  margin-bottom: 0;
}
.dailyItem .weatherIcon {
  flex-direction: row;
  gap: 10px;
}
.dailyItem .weatherIcon img {
  width: 64px;
}
.dailyItem .tempGroup {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: row;
}
.dailyItem .tempGroup h3 {
  font-size: 21px;
}
.dailyItem .description {
  gap: 5px;
}
.dailyItem .description h3 {
  font-size: 18px;
  color: #375d81;
}
.dailyItem .description p {
  margin-bottom: 0;
  font-size: 13px;
  color: #abc8e2;
}

/*# sourceMappingURL=styles.css.map */