@import url("fonts/fonts.css");

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * Make 1rem = 10px but keep a global font-size of 16px.
 * It doesnt change the behaviour of changing the default font size on browser.
 * I checked.
 */
html {
  font-size: 62.5%;
  body {
    font-size: 1.6rem;
  }
}

body {
  --text-color: black;
  --text-color-reverse: white;
  --border-color: black;
  --background-color: #f9f9f9;
  --surface-color: white;
  --accent-color: #ff9100;
  --primary-color: #0070ff;
  --second-color: #ffe6cb;
  --danger-color: #ff000c;
  --root-margin: 1rem;
  --big-border-thickness: 0.4rem;
  --big-border: var(--big-border-thickness) solid var(--border-color);
  --small-border-thickness: 0.3rem;
  --small-border: var(--small-border-thickness) solid var(--border-color);
  --big-shadow: 0.8rem 0.8rem 0 var(--border-color);
  --small-shadow: 0.4rem 0.4rem 0 var(--border-color);
  --smallest-shadow: 0.2rem 0.2rem 0 var(--border-color);
  --title-font: "Averia Serif Libre", "Times New Roman", Times, serif;
  --no-style-text-decoration: none;

  font-family: Lato, Roboto, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  margin: 0;

  &.train {
    background-color: var(--second-color);
  }
}

dialog {
  h2 {
    margin-bottom: 2rem;
  }

  footer {
    display: flex;
    gap: 2rem;
  }
}