h1 {
  font-weight: 900;
}

body {
  background-color: lightgray;
}

.page {
  width: 850px;
  background-color: #fefefeff;
  margin: auto;
  padding: 50px;
  margin-left: auto;
  margin-right: auto;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 30px;
}

.vis-container {
  width: 100%;
}

.description h2,
h1 {
  font-family: "Geograph", system-ui, sans-serif;
  margin-top: 0px;
  color: #222222;
}

.description-right {
  padding-left: 20px;
}

.description-left {
  padding-right: 20px;
}

.pure-g {
  margin-bottom: 25px;
}

.chart-section {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 18px;
  box-sizing: border-box;
}

.small-font {
  font-size: 14px;
  color: #2d2d2d;
}

.center-card{
  display:flex;
  align-items:center;   
  justify-content:center;
  text-align:center;   
  margin-bottom: 25px; 
}
.center-card h1{ margin:0; line-height:1.2; }

.param-controls{
  display:flex;
  justify-content: center; 
  align-items:center;
  gap:5px;
  flex-wrap:nowrap;
}
#text_div1 {
    padding-left: 10px;
}

#text_div2 {
    padding-right: 10px;
}

.central {
    background-color: white;
}

.text_div {
    font-family: 'Roboto', sans-serif;
}

.donut-row { 
  margin-bottom: px !important;   
}
.donut-row .vis-container {
  padding-bottom: 4px;            
}

.description h3 {
  margin-top:6px;
  font-family:"Geograph";
}
.description h4 {
  font-family:"Geograph";
  font-size: 18px;
  color: #2d2d2d;
}
.small h4 {
  font-family:"Geograph";
  font-size: 19px;
  color: #2d2d2d;
}

#vis-donut-cover, #vis-donut { margin-bottom: 0px; }
#vis-choro-multiple { position: relative; z-index: 1; }

.maps-text-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;   /* 2/3 – 1/3 */
  grid-template-rows: auto auto;    /* two rows */
  grid-template-areas:
    "maps  ."
    "maps  notes";
  gap: 16px;
}

/* Place items into the grid areas */
#vis-choro-multiple-sm{ grid-area: maps; width:100%; }
.map-notes{ grid-area: notes; }

/* Make sure the chart never bleeds and sits under the notes in z-order */
.vis-container{ width:100%; max-width:100%; overflow:hidden; box-sizing:border-box; }
.map-notes{ position:relative; z-index:2; }


@font-face{
  font-family:"Geograph";
  src:url("../assets/fonts/fonnts.com-geographwebregular.woff2") format("woff2"),
      url("../assets/fonts/fonnts.com-geographwebregular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Geograph";
  src:url("../assets/fonts/fonnts.com-geographwebbold.woff2") format("woff2"),
      url("../assets/fonts/fonnts.com-geographwebbold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}

:root { --ui: "Geograph", system-ui, sans-serif; }
body { font-family: var(--ui); font-synthesis: none; color: #2d2d2d } /* avoid faux bold */
strong, b { font-weight: 700; }                        /* make <strong> truly bold */
body {
  font-family: var(--font-ui);
  font-weight: 400;
  color: #222222;
  font-synthesis: none; /* prevent browser from faking bold/italic */
}

p, li, ul, ol {
  font-family:"Geograph";
  color: #2d2d2d;
}
.list-to-paragraphs p { color: #2d2d2d; }
.title{
  font-size: large;
  font-family:"Geograph";
  text-align:center
}
.small.list-to-paragraphs {
  text-align: left;
}