* {
  margin: 0;
  padding: 0;
}

html {
  margin: 0;
  padding: 0;
}


*::before,
*::after {
  box-sizing: border-box;
}

h1,h2,h3,h4 {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
}

h5,h6 {
  font-family: "Roboto Mono", monospace;
}

h1 {
  font-weight: 900;
  font-size: 48px;
  line-height: 1.1;
  padding: 5px 0;
  font-style: normal;
}

h2 {
  font-weight: 900;
  font-size: 42px;
  line-height: 1.1;
  padding: 5px 0;
  font-style: normal;
}

h3 {
  font-size: 30px;
  padding: 30px 0 10px 0;
}


h4 {
  font-size: 24px;
}

h5 {
  font-size: 18px;
  font-weight: 600;
  padding: 5px 0;
  color: #777777;
  text-transform: uppercase;
}

h6 {
  font-size: 16px;
  font-weight: 600;
  padding: 5px 0;
  color: #777777;
  text-transform: uppercase;
}

p {
  font-family: "Lora", serif;
  font-size: 18px;
  line-height: 1.4;
  padding: 5px 0;
}

header {
  display: flex;
  justify-content: center;
  height: 200px;
  background-color: #ced954;
  font-family: 'Inter', sans-serif;
}

header > .header-inner {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  display: flex; 
  justify-content: space-between;
  align-items: center;
} 

/* Logo */
.logo img {
  max-height: 60px;
}

.logo {
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    font-size: 24px;
}

body {
  background-color: #fafafa;
}

/* Navigation */
header > .header-inner > nav > ul {
  display: flex;
  flex-direction: row;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 18px;
}


header > .header-inner > nav > ul > li {
  text-decoration: none;
}


header > .header-inner > nav > ul > li a {
  text-decoration: none;
  color: #131313;
  font-weight: 500;
}

header > .header-inner > nav > ul > li a:hover {
  text-decoration: underline;
  color: #131313;
  font-weight: 500;
}



/* Container */

.main-heading {
  
  background-color: #ced954;
  width: 100%;
}

/* Links */

.title-article > h2 > a {
  color: #000;
  text-decoration: none;
}

.info-article-details > h2 > a:hover {
  color: #000;
  text-decoration: underline;
}

/* Main heading */

.main-heading-inner{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  background-color: #ced954;
}

.main-heading-inner> .info-article {
  width: 750px;
}

.main-heading-inner> .info-article > img {
  height: 500px;
  width: 750px;
}

.info-article-details {
  width: 350px;
  bottom: -80px;
  left: 30px;
}

.info-article-details > h5 {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #1d1d1d;
  text-transform: none;
  
}

.info-article-details > p {
  font-size: 14px;
  padding: 0;
}

.info-article-details > hr {
  background-color: #000;
  width: 75px;
  border: 1px solid #000;
  margin: 10px 0;
}

.title-article {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  height: 500px;
}

.title-article > h5 {
 color: #000;
}

.main-top-image {
  max-width: 1100px;
  margin: -120px auto 0 auto; /* pulls image upward */
}

.main-top-image > img {
  width: 100%;
  display: block;
}

/* Article Body */

.article-layout {
  display: flex;
  gap: 50px;
  max-width: 1100px;
  margin: 80px auto;
}

/* Main article copy */
.article-content {
  max-width: 750px;
  flex: 1;

}

.article-content p {
  padding: 10px 0;
  line-height: 1.5;
}

/* Sidebar */
.article-sidebar {
  width: 300px;
}

.article-sidebar > h4{
  font-size: 18px;
  padding: 10px 0;
}


/* Table */

.weather-table {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  width: 100%;
  border-collapse: collapse;
  border-top: 4px solid #92b366;
  border-bottom: 4px solid #92b366;
}

.weather-table th,
.weather-table td {
  padding: 6px 10px;
}

/* GREEN header rows */
.weather-table thead th {
  background-color: #fafafa;
  color: rgb(15, 15, 15);
  border-bottom: 1px solid #a6c57e;

}

/* MIN / MAX colors */
.weather-table th.min {
  color: #2c8efd; /* blue */
  background-color: #b2d2f7 ;
}

.weather-table th.max {
  color: #2e0000; /* blue */
  background-color: #ebacac; /* red */
}

/* Zebra striping for data rows */
.weather-table tbody tr:nth-child(odd) {
  background-color: #f1fde3; /* light green */
  border-bottom: 1px solid #a6c57e;
}

.weather-table tbody tr:nth-child(even) {
  background-color: #d7eeb8; /* green */
  border-bottom: 1px solid #a6c57e;
}

.table-with-caption, 
.image-with-caption, 
.figure-with-caption{
  display: flex;
  gap: 24px;
  align-items: flex-end;
  margin: 20px 0;
}

/* Keep table size controlled */
.table-with-caption .weather-table {
  flex: 1;
}

/* Caption block */
.table-caption,
.image-caption,
.figure-caption {
  width: 220px;
  color: #333;
  gap: 0;
  padding: 0;
}

.full-image-caption {
    width: 750px;
    margin-bottom: 25px;
}

.table-caption h5,
.image-caption h5,
.figure-caption h5 {
  font-size: 12px;
  font-weight: 600;
  padding: 10px 0;
}

.table-caption p,
.image-caption p,
.full-image-caption p,
.figure-caption p {
  font-size: 14px;
  font-weight: 700;
  padding: 0;
  color: #1d1d1d;
}

.table-caption hr,
.image-caption hr,
.full-image-caption hr,
.figure-caption hr {
  width: 50px;
  border: 2px solid #BADD89;
  margin-bottom: 5px;
}

.image-with-caption img {
  width: 500px;
  background-color: rgb(243, 243, 243);
  padding: 20px;
}

.full-image-with-caption svg{
    width: 750px;
    margin-top: 25px;
    margin-bottom: 20px;
}


/* lists */

ul, ol {
  font-family: "Lora", serif;
  font-size: 18px;
  line-height: 1.8;
  padding: 10px 0 10px 50px;
}

/* spans */

span.scientists {
  font-family: 'Roboto mono', sans-serif;
  font-size: 16px;
}

/* side-figure */

.side-figure {
  margin: 100px 0;
}

.side-figure > img {
  width: 300px;
  height: auto;
}

.side-figure > p {
  font-size: 14px;
  font-weight: 700;
  padding: 5px 0;
  color: #1d1d1d;
}

.side-figure >  hr {
  width: 50px;
  border: 2px solid #BADD89;
  margin-bottom: 5px;
}

/* Charts */

.figure-with-caption {
  margin: 40px 0;
}

#pieChart {
  max-width: 550px;
  max-height: 350px;
  font-family: 'Inter', sans-serif;
  background-color: rgb(243, 243, 243);
  padding: 10px;
}

/* Footer base */
footer {
  background-color: #111;
  color: #fff;
  padding: 32px 0;
  font-size: 14px;
}

/* Inner container */
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo */
footer .logo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Navigation */
footer nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
    font-family: 'Inter', sans-serif;
}

footer nav a {
 color: #000;
  text-decoration: none;
  font-weight: 400;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

footer nav a:hover {
  opacity: 1;
}

/* Copyright */
.footer-copy {
  font-size: 12px;
  opacity: 0.6;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  footer nav ul {
    flex-direction: column;
    gap: 10px;
  }

  .footer-copy {
    margin-top: 8px;
  }
}

footer {
  background: #ced954;
  color: #000;
  padding: 20px 0;
  font-family: 'Inter', sans-serif;
}

.footer-inner {
  max-width: 1100px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer a {
color: #000;
  text-decoration: none;
}