/*....................................................................................................................*/

:root /* JS only */
{
  --bodyW: 0;
  --bodyH: 0;
}

/*....................................................................................................................*/

:root /* CSS only */
{
  --boardW: calc(var(--bodyW) * 0.7);
  --boardH: calc(var(--boardW) / 20 * 14);

  --fieldMiddleW: calc(var(--boardW) / 2);
  --fieldMiddleH: calc(var(--boardH) / 14 * 12 / 2);

  --borderFull: calc(var(--boardW) / 400);
  --borderHalf: calc(var(--borderFull) / 2);
  --borderDouble: calc(var(--borderFull) * 2);

  --cellSize: calc(var(--boardW) / 20);
  --goalSize: calc(var(--cellSize) * 0.8);
  --boardRadius: calc(var(--cellSize) / 2);
  --athleteSize: calc(var(--cellSize) - var(--borderDouble));

  --white: #CCC;
  --unit: calc((var(--boardW) + var(--boardH)) / 3000);
}