/* Import fonts via Google Fonts */
body { 
  font-family: 'Cardo', serif; 
  font-size: 18px;
  color: #1a1a1a;
  line-height: 1.6;
  background-color: #f7f7f7;
  margin: 0 auto;
  max-width: 800px;
  padding-top: 60px;
  overflow-x: visible;
}

/* Links style - keeps the previous body font */
.links {
  font-family: 'Montserrat', sans-serif; /* Use Montserrat for links */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #1a1a1a;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif; /* Use Montserrat for headings */
  color: #1a1a1a;
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 700;
}

/* We want the headings to be a little bigger than the paragraph text */
.big { 
  font-size: 2.5em;
  font-family: 'Montserrat', sans-serif; /* Use Montserrat for larger headings */
}

h2 {
  font-size: 1.75em;
  font-family: 'Montserrat', sans-serif;
}

.small {
  font-size: 1.25em;
}

/* Paragraph */
p {
  margin-bottom: 1em;
  font-weight: 300;
}

section {
  margin-bottom: 2.5em; /* We want a little more space between sections */
}

/* We want the links to be a little more visible and a different color */
a {
  color: #002fa7;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Specific rule for links in the .links class */
.links a {
  color: #1a1a1a; /* Keep the dark gray color for links in the "links" class */
  text-decoration: underline;
}

.links a:hover {
  text-decoration: underline;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
}

/* General centering rule for all iframes */
iframe {
  display: block;
  margin: 0 auto; /* Centers the iframe when using block display */
  max-width: 100%; /* Ensures responsiveness for smaller viewports */
}

/* Specific styles for bigmap */
iframe.bigmap {
  width: 1000px;
  height: 600px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  max-width: none;
}


/* Specific styles for wide visualizations */
iframe.wide {
  width: 600px; /* Width for wide visualizations */
  height: 450px; /* Height for wide visualizations */
  margin: 0 auto; /* Centers the iframe */
  display: block;
}

/* Specific styles for tall visualizations */
iframe.tall {
  width: 600px; /* Width for tall visualizations */
  height: 710px; /* Height for tall visualizations */
  margin: 0 auto; /* Centers the iframe */
  display: block;
}

/* Specific styles for very tall visualizations */
iframe.verytall {
  width: 600px; /* Width for very tall visualizations */
  height: 800px; /* Height for very tall visualizations */
  margin: 0 auto; /* Centers the iframe */
  display: block;
}

/* Ensure parent containers like figure allow wider elements */
figure {
  width: 100%; /* Allows figure to span the full width of the page */
  text-align: center; /* Ensures content is centered */
  margin: 20px 0; /* Adds spacing above and below */
}

/* Blockquote styling */
blockquote {
  margin: 20px 0;
  padding: 10px 20px;
  border-left: 4px solid #ccc; /* Vertical line on the left */
  background: #f7f7f7; /* Light gray background */
  font-style: italic;
  color: #1a1a1a;
}