:root {
  --main-bg-color: rgb(255, 255, 255);
  --main-fg-color: rgb(0, 0, 0);
  --link-color: rgb(0, 0, 255);
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: rgb(0, 0, 0);
    --main-fg-color: rgb(255, 255, 255);
    --link-color: rgb(100, 100, 255);
  }

  header img {
    filter: invert(1);
  }
}
  
body {
  background-color: var(--main-bg-color);
  color: var(--main-fg-color);
  font-family: 'Yantramanav', sans-serif;
  margin-top: 5vh;
}

section {
  margin-bottom: 10mm;
}

a:link,
a:visited,
a:active,
a:hover {
  color: var(--link-color);
  text-decoration: none;
}

.main-container {
  width: 90vw;
  margin: auto;
}

header img {
  width: auto;
  height: 20vmin;
}


h1, h2, h3, h4, h5, h6 {
  font-family: 'IBM Plex Serif', serif;
}

.demo-grid {
  display: grid;
  grid-template-columns: 20vw 1fr;
  align-items: center;
}

.demo-grid audio {
  width: 100%;
}

.signature-list {
  column-width: 50mm;
  margin: 0;
  padding: 0;
}

.signature-list li {
  list-style: none;
  margin: 0;
  padding: 1mm;
}

@media only screen and (max-width : 600px) {
  .demo-grid {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr;
  }

  .signature-list {
    column-width: 30mm;
  }
}