body {
  background: rgb(197, 190, 190);
  color: #111;
  padding: 1em 4em 4em 4em;
  font-family: sans-serif;
  line-height: 1.15;
}

a {
  color: #111;
}

ul {
  max-width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #cecece;
}

li {
  float: left;
}

li a {
  display: block;
  color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #048caa;
}

/* weather Section */
.logo {
  width: auto;
  height: 100px;
  display: block;
}

nav {
  margin: 0.5em 0;
}

nav ul {
  background: #cecece;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 20px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

nav ul :last-child {
  margin-left: auto;
}

li a:hover:not(.active) {
  background-color: #048caa;
  color: #fff;
}

.page {
  padding: 2em;
  background: #cecece;
  max-width: 100%;
}

.archive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 1em;
  grid-auto-flow: dense;
}

.article {
  text-align: center;
  padding: 1em;
  background: rgba(200, 200, 255, 0.3);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 20px 20px rgba(0, 0, 0, 0.05);
}

.article img {
  max-width: 100%;
}

.five-day {
  text-align: center;
  padding: 1em;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 20px 20px rgba(0, 0, 0, 0.05);
  grid-column: 1 / 5;
  background: rgba(200, 200, 255, 0.3);
}

.day {
  color: #111;
  max-width: 100px;
  height: 125px;
  background-color: #048caa;
}

.article:nth-child(1) {
  grid-column: 1 / -1;
  background: rgba(200, 200, 255, 0.3);
}

.article:nth-child(8) {
  grid-column: -3 / -1;
  background: rgba(255, 200, 255, 0.3);
}

.article:nth-child(8):after {
  content: "grid-column: -3 / -1";
}

@media (max-width: 680px) {
  .archive {
    display: flex;
    flex-direction: column;
  }
  .article {
    margin-bottom: 1em;
  }
}

@media (max-width: 900px) {
  .news-blips {
    flex-wrap: wrap;
  }
}

/* Weather sections */
.article-five-day {
  grid-column: 1 / -1;
  padding: 15px;
  margin-top: 15px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 20px 20px rgba(0, 0, 0, 0.05);
  background-color: rgba(200, 200, 255, 0.3);
}

.five-article {
  text-align: center;
}

#city {
  text-align: center;
}

#forecastTitle {
  text-align: center;
}

.flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.flex-col {
  text-align: center;
  margin-right: 50px;
}

.flex-col img {
  width: 100px;
  height: 100px;
  padding: 10px;
}

#stats {
  text-align: start;
  float: left;
}

.temp-data {
  margin-left: 10px;
  display: flex;
}

.weatherIcon {
  display: flex;
  margin-left: 0px;
}

footer {
  text-align: center;
}

/* News Section */

.late-news {
  padding: 1em;
  background: #cecece;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 20px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.news-blips {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: center;
  padding: 1em;
}

#newsContainer {
  margin: 1em;
}

.news-box a {
  font-size: 0.75rem;
  font-style: italic;
}

.news-box .title {
  font-size: 1.2rem;
  font-weight: bold;
}

.news-box {
  padding: 15px;
  margin: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 20px 20px rgba(0, 0, 0, 0.05);
  background-color: rgba(200, 200, 255, 0.3);
  overflow: hidden;
}

.news-blips,
.news-box {
  min-width: 0;
}

.news-box img {
  max-width: 100%;
  height: auto;
}