@import url('https://fonts.googleapis.com/css2?family=Bitcount+Ink&family=Cutive+Mono&family=Montserrat:wght@400;500;700&display=swap');

:root {
  --back-color: #e4e4e4;
  --header-back-color: #cfcfcf;
  --footer-back-color: #cfcfcf;
}

html { height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  background: #e4e4e4;
  font-family: "Montserrat", sans-serif;
}
body.page { display: flex; flex-direction: column; }

/* fonts */
h1, h2, h3, h1 a, h2 a, h3 a { font-family: "Cutive Mono", monospace; }
.brand, .brand a {
  font-family: "Bitcount Ink", system-ui, sans-serif;
  font-size: 2.4em;
  letter-spacing: 0.08em;
  line-height: 1;
}

/* mini.css pages (index, week) */
header {
  display: flex;
  align-items: center;
  padding: 0.3em 1em;
}
header > span { flex: 1; display: flex; }
header > span:nth-child(1) { justify-content: flex-start; }
header > span:nth-child(2) { justify-content: center; }
header > span:nth-child(3) { justify-content: flex-end; }
header h1 { margin: 0; }
footer {
  min-height: 50px;
  margin-top: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.row { justify-content: center; }
.center { text-align: center; }
.card > .section.dark { --card-back-color: #2d2d2d; --card-fore-color: #f8f8f8; }
.week { font-family: "Cutive Mono", monospace; font-weight: 700; font-size: 6em; margin: 0; line-height: 1; }

/* bootstrap pages (login, private): brand wordmark + dark jumbotron */
.jumbotron { background: #2d2d2d; color: #f8f8f8; }
.jumbotron h1 {
  font-family: "Bitcount Ink", system-ui, sans-serif;
  letter-spacing: 0.08em;
}