html, body {
  height: 100%;
  margin: 0;
  font-size: calc((((100vh) - (100vh / 9)) / 8) * 0.7);
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  background-color: #000;
  color: #fff; }

.container.scoreboard {
  display: grid;
  grid-template-rows: [title] 1fr [data] 8fr;
  height: 100%; }

.scoreboard--title {
  grid-row-start: title;
  grid-row-end: data;
  display: grid;
  background-color: #0d47a1;
  /* TODO: Make into a variable */
  color: #fff;
  /* TODO: Make into a variable */
  font-size: 8.08081vh; }

.scoreboard--title__text {
  justify-self: center;
  align-self: center;
  font-weight: normal; }

.scoreboard--data {
  display: grid;
  grid-row-start: data; }

.scoreboard--data--data-point {
  display: grid;
  grid-template-columns: [place] 10% [name] 60% [mark] 30%; }

.scoreboard--data--data-point--place {
  display: grid;
  text-align: center; }

.scoreboard--data--data-point:nth-child(even) .scoreboard--data--data-point--place {
  background-color: #fff;
  color: #000; }

.scoreboard--data--data-point:nth-child(odd) .scoreboard--data--data-point--place {
  background-color: #e6e6e6;
  color: #000; }

.scoreboard--data--data-point--finished:nth-child(even) .scoreboard--data--data-point--place {
  background-color: #455a64;
  color: #fff; }

.scoreboard--data--data-point--finished:nth-child(odd) .scoreboard--data--data-point--place {
  background-color: #303f46;
  color: #fff; }

.scoreboard--data--data-point--place__text {
  justify-self: center;
  align-self: center; }

.scoreboard--data--data-point--name {
  align-self: center;
  margin: 0 1vw;
  overflow: hidden;
  white-space: nowrap; }

.scoreboard--data--data-point--mark {
  align-self: center;
  overflow: hidden;
  white-space: nowrap; }

.scoreboard--title {
  grid-template-columns: [title] 5fr [data] 2fr; }

.scoreboard--title__text {
  justify-self: auto;
  align-self: auto;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 1vw; }

.scoreboard--title__time {
  text-align: center;
  background-color: #093272; }

.has-results .entries {
  display: none; }

.has-results .results {
  display: block; }

.has-entries .entries {
  display: block; }

.has-entries .results {
  display: none; }