:root {
  --dark: hsl(163, 46%, 32%);
  --light: hsl(162, 46%, 95%);
  --gray: hsl(162, 20%, 63%);
}

html,
body {
  margin: 0;
  min-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  font-family: "Space Mono", monospace;
  background-color: var(--light);
  padding: 1em 2em;
}
table {
  width: 100%;
  max-width: 1250px;
  border-collapse: collapse;
  border: 2px solid var(--gray);
}
thead {
  background-color: var(--dark);
  color: white;
}
tbody {
  background-color: var(--light);
}
td {
  border-bottom: 1px solid var(--gray);
  text-align: center;
}
h1 {
  text-align: center;
  line-height: 1.5;
  color: var(--dark);
  margin-top: 0;
}
b {
  font-weight: 700;
}

@media only screen and (max-width: 1920px) {
  #table-long-names {
    display: table-row;
  }
  #table-short-names {
    display: none;
  }

  h1 {
    font-size: 1.5em;
  }
  thead td,
  tbody td {
    font-size: 1em;
  }
}

@media only screen and (max-width: 1000px) {
  #table-long-names {
    display: none;
  }
  #table-short-names {
    display: table-row;
  }
}

@media only screen and (max-width: 500px) {
  .stat {
    display: none;
  }

  h1 {
    font-size: 2em;
  }
  thead td {
    font-size: 1.5em;
  }
  tbody td {
    font-size: 1.2em;
  }
}