#observablehq-main,
#observablehq-header,
#observablehq-footer 
{
  max-width: none;
  margin-left: 15vw;
}

@media only screen and (max-width: 800px) {
  #observablehq-main,
  #observablehq-header,
  #observablehq-footer {
    margin-left: 0vw!important;
    margin-right: 0vw!important;

  }
}


h1, h2, h3, h4,p {
  max-width: none;
  font-family: sans-serif
};


/* unvisited link */
a:link {
  color: black;
  border-bottom:1px dashed black;

}

/* visited link */
a:visited {
color: black;
  text-decoration: none;
}

/* mouse over link */
a:hover {
color: #067;
text-decoration: none!important;
}

/* selected link */
a:active {
color: #067;
text-decoration: none!important;
}

text {
  fill: #222;
}

.mark {
  fill: #333;
}

line.mark {
  stroke: #333;
  stroke-width: 2;
}

.heterogeneity-band {
	fill: #067;
	mix-blend-mode: multiply;
}

svg{
  font-family: sans-serif;
  font-size: 0.9rem
}

rect.overlay {
	stroke: black;
}

rect.selection {
	stroke: none;
  fill: steelblue;
  fill-opacity: 0.6;
}

#labelleft, #labelright {
	dominant-baseline: hanging;
  font-size: 12px;
}

#labelleft {
	text-anchor: end;
}

#labelright {
	text-anchor: start;
}

.ttip{
  position:relative; /*  making the .tooltip span a container for the tooltip text */
  border-bottom:1px dashed black; /* little indicater to indicate it's hoverable */

}
.ttip:before {
  content: attr(data-text); /* here's the magic */
  position:absolute;
    /* reset defaults */
  left:initial;
  margin:initial;
  /* vertically center */
  top:50%;
  transform:translateY(-50%);
  /* set new values */
  right:100%;
  margin-right:15px;

  /* basic styles */
  width: 15vw;
  padding:8px;
  border-radius:10px;
  background:white;
  color: black;
  text-align:right;

  display:none; /* hide by default */
}

.ttip:hover:before {
  display:block;
}

input[type="checkbox"]:checked {
  accent-color: #067;
}


:root {

  --theme-foreground-focus:   #067;

}


#observablehq-main,
#observablehq-header,
#observablehq-footer 
{
  max-width: none;
  margin-left: 15vw;
}

.studyDescription {
  color: #6c757d;
}

.studySource {
  color: #9ca1a5;
  font-size: 0.8rem;
}

.analysis{
  margin-top: 3rem;
}


/* Mobile adjustments */
@media (max-width: 768px) {

/* Base font size for the body */
body {
  font-size: 18px; /* Base size */
  line-height: 1.6; /* Comfortable reading */
  margin: 0;
  padding: 0;
}

/* Headings */
h1, h2, h3, h4 {
  font-weight: 700; /* Bold for emphasis */
  line-height: 1.2; /* Tighter for headings */
  margin: 1em 0 0.5em; /* Space above and below */
}

  h1 {
    font-size: 2.5rem; /* Adjust heading sizes for smaller screens */
  }

  h2 {
    font-size: 1.8rem;
  }

  h3 {
    font-size: 1.4rem;
  }

  h4 {
    font-size: 1.2rem;
  }

  p {
    font-size: 0.9rem; /* Slightly smaller for paragraphs */
    line-height: 1.6; /* Adjust for readability on smaller screens */
  }

   /* Shorten and make more central */
  .description, .analysis {
    margin: auto;
    max-width: 96%;
  }

     /* Decrease the gap between range filters on mobile */
  .double-range {
    gap: 0px;
  }

}