html,
body {
  height: 100%;
  margin: 0;
  background: var(--background);
  overflow: hidden;
}

body {
  font-family: "Ubuntu Mono", monospace;
  color: var(--text);
}

.page {
  height: 100%;
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: var(--page-pad);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--page-gap);
}

.layout {
  min-height: 0;
  display: grid;
  grid-template-columns: var(--axis-width) minmax(0, 1fr);
  gap: var(--page-gap);
  align-items: stretch;
}

* {
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
}

@media (max-width: 500px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .page {
    height: auto;
    min-height: 100%;
    grid-template-rows: auto auto;
  }

  .layout {
    min-height: auto;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
  }

  .cards {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
}