body {
  margin: 1.0em;
  font-family: "Signika Negative", sans-serif;
}

section {
  /* This ensures that the navbar is not hiding the section's header. */
  padding-top: 60px;
}

/* [Create Responsive CCS Grid Layouts with GRID WRAPPING](https://youtu.be/3T0gjtXRNC0?si=hNJ33YFBpluz1kvs) */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(850px, 1fr));
  column-gap: 10px;
  row-gap: 15px;
}

div#pwps {
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
}

div#matrix_metrics,
div#ci_sort_order2 {
  /* [Bootstrap: Button group not wrapping when too long](https://stackoverflow.com/a/41625276) */
  flex-wrap: wrap;
}

.highlight {
  fill: black;
}

circle.highlight {
  opacity: 1;
}

/* [position: sticky is Amazing](https://mastery.games/post/position-sticky/) */
.heading {
  background: #ccc;
  line-height: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.3em;
  padding-left: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 60px;
  z-index: 1;
}

.loading_error {
  color: red;
  font-size: 2.0em;
}

.md-typeset .headerlink {
  color: #00000052;
  display: inline-block;
  opacity: 0;
  transition: color .25s, opacity 125ms
}

@media print {
  .md-typeset .headerlink {
    display: none
  }
}

.md-typeset .headerlink:focus,
.md-typeset :hover>.headerlink,
.md-typeset :target>.headerlink {
  opacity: 1;
  transition: color .25s, opacity 125ms
}

.md-typeset .headerlink:focus,
.md-typeset .headerlink:hover,
.md-typeset :target>.headerlink {
  color: #526cfe;
}


.topnav {
  /* position: -webkit-sticky; */
  /* position: sticky; */
  /* position: fixed; */
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  margin:0;
  z-index: 10;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: rgb(13, 110, 253);
  color: white;
}

.topnav a.active {
  background-color: rgb(10, 88, 202);
  color: white;
}

/* .active */
/* .topnav > .active > a, */
/* .topnav > .active > a:hover, */
/* .topnav > .active > a:focus { */
/*     color: #000; */
/*     background-color: #d65c14; */
/* } */