:root {
  /* Colors */
  --base-primary: #e0001c;
  --primary-red: #5c0505;
  --neutral-alpha-white-20: rgba(255, 255, 255, 0.2);
  --neutral-alpha-black-70: rgba(0, 0, 0, 0.7);
  --additional-attention: #ffe052;

  /* Surface */
  --surface-surface-black-40: rgba(0, 0, 0, 0.4);
  --surface-surface-black-50: rgba(0, 0, 0, 0.5);
  --surface-surface-black-70: rgba(0, 0, 0, 0.7);

  /* Text */
  --text-primary: #fff;
  --text-secondary: rgba(255, 255, 255, 0.7);

  /* Layout Size */
  --space-2x: 0.5rem;
  --space-3x: 0.75rem;
  --space-4x: 1rem;
  --space-6x: 1.5rem;
  --space-14x: 3.5rem;
  --space-20x: 5rem;
  --space-128x: 32rem;

  --radii-2x: 0.25rem;
  --radii-4x: 0.5rem;
}

* {
  box-sizing: border-box;
}

@font-face {
  font-family: "Fyran Sans";
  font-style: normal;
  font-weight: normal;
  src:
    local("FyranSans"),
    url("fonts/fyran-sans-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Univers";
  font-style: normal;
  font-weight: normal;
  src:
    local("FyranSans"),
    url("fonts/univers.ttf") format("ttf");
}

html {
  /*
  This font-size is 16px on a 1920x1080 screen which is what
  our design is based on.
  By setting this all our rem units will be based on this and
  scale accordingly regardless of the TV resolution.
  */
  font-size: 0.8333333333vw;
}

body {
  margin: 0;
  font-family: "Fyran Sans", sans-serif;

  background: #000;
  color: var(--text-primary);
}

#root {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
}

/*
  Disable google touch AND remote controls.
*/
touch-controls {
  display: none;
}