body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 1rem;
  position: relative;
}

.total::before {
  content: "(";
}

.total::after {
  content: ")";
}

a {
  text-decoration: none;
}


details {
  margin: 1rem 0;
}

article {
  position: relative;
}

article h2 {
  position: sticky;
  padding: 0.5em 0;
  top: 0;
  z-index: 1;
  background-color: white;
}

.grid {
  max-width: 800px;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0 auto;
}

nav a {
  display: block;
}

@media (max-width: 800px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 650px) {
  .grid {
    grid-template-columns: 1fr;
  }
}