:root {
  --color-bg: white;
  --color-nav-bg: hsl(215, 30%, 95%);
  --color-calcumber-bg: hsl(215, 60%, 95%);
  --color-calcumber-bg-dark: hsl(215, 60%, 80%);
  --color-calcumber-caption: hsl(215, 60%, 30%);
  --color-calcumber-link: hsl(215, 60%, 40%);
  --color-em: hsl(215 30% 40%);
  --color-focus-border: hsl(215 30% 55%);
  --color-border: hsl(215 20% 70%);
  --color-button-text: #222;
  --color-button-bg: hsl(215 90% 50%);
  --color-button-bg-hover: hsl(215 50% 80%);
  --color-menu-bg-hover: hsl(215, 50%, 92%);
  --color-shadow: rgba(0, 0, 0, 0.4);
}

html {
  height: 100%;

  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", sans-serif;
  font-size: 100%;
  /* this defines rem unit */
}

body {
  height: 100%;
  margin: 0;
  background: var(--color-bg);
  padding: 0;
  box-sizing: border-box;
  /* width specifications include border and padding */
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  margin-bottom: 0.6rem;
}

h1 {
  text-align: center;
  font-size: 250%;
}

h2 {
  font-size: 200%;
  margin-top: 1.5rem;
}

h3 {
  font-size: 150%;
  margin-top: 1.5rem;
}

h4 {
  font-size: 117%;
  margin-top: 1.5rem;
}

p,
li {
  margin-top: 0em;
  margin-bottom: 0.7em;
}

p.large-margin-top {
  margin-top: 1.7em;
}

ul,
ol {
  margin-top: 0em;
  margin-bottom: 1em;
}

em {
  font-style: normal;
  font-weight: bold;
  color: var(--color-em);
}

code {
  /* font-weight: bold; */
  font-size: 110%;
  background-color: var(--color-nav-bg);
  padding: 0.1em 0.3em;
}

img {
  /*Keep aspect ratio*/
  width: auto;
  height: auto;
}

nav {
  background-color: var(--color-nav-bg);
  margin-bottom: 1rem;
  /* background-color: hsl(240, 30%, 95%); */
}

/* .calcumber-table {
  text-decoration: none;
  color: inherit;
} */

footer a,
nav a {
  text-decoration: none;
  color: inherit;
}

footer {
  background-color: var(--color-nav-bg);
  margin-top: 2.5em;
}

.nav-links {
  margin-left: auto;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.nav-links a {
  font-size: 110%;
}

.btn {
  color: white;
  text-decoration: none;
  font-weight: 700;
  background-color: var(--color-button-bg);
  padding: 0.6em 0.9em;
  border-radius: 9999px;
}

footer a:hover,
.nav-links a:hover {
  color: var(--color-button-bg);
}

.side-margin {
  margin-left: 1rem;
  margin-right: 1rem;
}

.padding {
  padding: 1rem;
}

.flex-col,
.flex-row,
.flex-col-center,
.flex-row-center {
  display: flex;
  gap: 1em;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-col-center {
  flex-direction: column;
  align-items: center;
}

.flex-row-center {
  flex-direction: row;
  align-items: center;
}

nav.flex-row-center {
  flex-wrap: wrap;
}

caption {
  color: var(--color-calcumber-caption);
  font-weight: bold;
  caption-side: bottom;
  text-align: left;
  margin-top: 0.3em;
}

a.calcumber-table {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  width: fit-content;
}

a.calcumber-table table,
table.calcumber-table {
  font-size: 80%;
  font-family: Consolas, "Courier New", monospace;
  border-collapse: separate;
  border-spacing: 0.1em;
  margin-bottom: 1em;
}

.calcumber-table th,
.calcumber-table td {
  padding: 0.2em 1em 0.2em 0.4em;
}

/* hide header of calcumber tables */
.calcumber-table.no-header thead {
  display: none;
}

.calcumber-table th {
  background-color: var(--color-calcumber-bg-dark);
}

.calcumber-table td {
  background-color: var(--color-calcumber-bg);
}

.calcumber-link {
  color: var(--color-calcumber-link);
}

.link-cell {
  text-align: center;
}