body {
  /* background-color: #eeeeee; */
  background-image: url(bg.jpeg);
  overflow: hidden;
}

svg {
  /* border: 1px black solid; */
  width: 100%;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.circle-text {
  font-family: sans-serif;
  fill: white;
  font-size: 48px;
  font-weight: bold;
  alignment-baseline: middle;
  text-anchor: middle;
}

.button {
  fill: black;
  stroke: white;
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button-base {
  fill: transparent;
  stroke-width: 5px;
  stroke: transparent;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.text {
  font-family:sans-serif;
}

.text-label {
  fill: gray;
  font-size: 20px;
}

.text-value {
  fill: black;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 3px;
}

.text-value-small {
  fill: black;
  font-size: 20px;
}

.text-south-to-west {
  alignment-baseline: bottom;
  text-anchor: end;
}

.text-south-to-east {
  alignment-baseline: bottom;
  text-anchor: start;
}

.text-northeast {
  alignment-baseline: top;
  text-anchor: end;
}

.text-soutwest {
  alignment-baseline: bottom;
  text-anchor: start;
}

.text-northwest {
  alignment-baseline: top;
  text-anchor: start;
}

.text-souteast {
  alignment-baseline: bottom;
  text-anchor: end;
}

.circle-button {
  fill: white;
  stroke: black;
  stroke-width: 0px;
}

.text-button {
  font-size: 40px;
  font-weight: bold;
  alignment-baseline: central;
  text-anchor: middle;
  fill: black;
}

@keyframes wiggle-text-small {
  0%    {font-size: 20px;}
  50%   {font-size: 30px;}
  100%  {font-size: 20px;}
}

@keyframes wiggle-text-value {
  0%    {font-size: 30px;}
  50%   {font-size: 40px;}
  100%  {font-size: 30px;}
}

.best-time-display-wiggle {
  animation-name: wiggle-text-small;
  animation-duration: 0.5s;
  animation-iteration-count: 3;
  animation-timing-function: ease;
}

.matches-display-wiggle-1 {
  animation-name: wiggle-text-value;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}

.matches-display-wiggle-3 {
  animation-name: wiggle-text-value;
  animation-duration: 0.5s;
  animation-iteration-count: 3;
  animation-timing-function: ease;
}