body * {
  font-family: "Public Sans Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

body {
  font-size: 1.125rem;
}

p, li, .usa-intro {
  line-height: 1.5;
}

h2, h3, h4, h5, h6 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* responsive iframe approach from https://www.w3schools.com/ */
.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* Blog card images — fixed height, cropped to fill */
.usa-card__media {
  height: 200px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.usa-card__img {
  height: 100% !important;
  overflow: hidden !important;
}

.usa-card__img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Article hero image — fixed height, cropped to fill */
.article-hero {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* USWDS System Colors */

.bg-blue-80v {
  background-color: #112f4e;
}

.globe-hero {
  background-color: #0a0e1a;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  min-height: 480px;
  width: 100%;
}

#earthCanvas {
  display: block;
  max-width: 100%;
}