@import url('derailed/derailed.css');

:root {
  --spacing: 1em;
  --quad-space: calc(4 * var(--spacing));
  --font-size: 18px;

  font-size: var(--font-size);
  color-scheme: light dark;
}

body {
  font-family: Derailed, sans-serif;
  line-height: 1.5;
}

header {
  display: grid;
  align-items: center;
  width: 100%;
  gap: 0 var(--spacing);
  grid-template: "title ncl dig" / 1fr auto auto;
  justify-items: center;

  & h1 {
    grid-area: title;
    flex-grow: 1;
    text-align: center;
    font-size: clamp(1rem,5svw,2rem);

    & a {
      text-decoration: none;
      color: inherit;
    }
    margin: 0;
  }

  & #ncl-logo {
    grid-area: ncl;
    text-align: right;
  }
  
  & #dig-logo {
    grid-area: dig;
  }
  
  & .logo {
    height: 3em;
  }
}

@media (max-width: 50em) {
  header {
    grid-template: 
      "title ncl"
      "title dig"
      / 1fr auto
    ;
    & .logo {
      height: 2em;
    }
  }
}

.qrcode {
  display: inline-block;
  vertical-align: middle;
}
.qrcode svg {
  --size: 3cm;
  height: var(--size);
  margin: calc(0.1 * var(--size));
}

@media screen {
  .qrcode {
    display: none;
  }
}


body.index menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, 12em);
  justify-content: center;
  justify-items: center;
  list-style: none;
  padding: 0;
}

li {
  margin: var(--spacing) 0;
}

footer {
  border-top: thin solid;
  text-align: center;
}

@media print {
  .screen-only {
    display: none;
  }
  footer {
    position: absolute;
    bottom: 0;
    width: 100%;
  }

  a {
    color: inherit;
  }
}

@media screen {
  footer {
    margin-top: var(--quad-space);
  }
}
footer img {
  height: 3em;
  vertical-align: middle;
  margin: var(--spacing);
}