@import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Inconsolata:wght@400;500;700&display=swap');

/* Since we use rem units throughout, the font-size of the html element
   is the base unit of the entire design system. Changing this value will
   change not only all font sizes but also all margins, paddings etc.
*/
html {
  /*font-size: 16px;*/
}

* {
  font-family: 'Inconsolata', monospace;
}

:root {
  --font-size-s:  var(--golden-m);
  --font-size-m:  var(--golden-l);
  --font-size-l:  var(--golden-xl);
  --font-size-xl: var(--golden-xxl);
}

p {
  font-size: var(--font-size-m);
  line-height: var(--font-size-l);
  margin: 0;
  margin-top: var(--golden-xs);
}

.main-menu, .flash, button, th, td {
  font-size: var(--font-size-s);
}

h1, h2, h3 {
  font-family: "Crete Round", serif;
  font-weight: 400;
  font-size: var(--font-size-l);
  line-height: var(--font-size-l);
  margin: 0;
  margin-bottom: var(--font-size-s);
  padding: 0;
}

main > h1 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--font-size-xl);
  text-align: center;
}

a, button.table-button {
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--alt-pink);
  font-weight: 700;
  color: var(--black);
  padding-bottom: 0;

  &:hover {
    text-decoration-color: var(--pink);
  }
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

a .card h1, a .card p {
  text-decoration: none;
}