@font-face {
  font-weight: bold;
  font-family: 'Apercu Pro';
  font-style: normal;
  src: url('assets/theme/fonts/ApercuPro-Bold.woff2') format('woff2'),
    url('assets/theme/fonts/ApercuPro-Bold.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: 300;
  font-family: 'Apercu Pro';
  font-style: normal;
  src: url('assets/theme/fonts/ApercuPro-Light.woff2') format('woff2'),
    url('assets/theme/fonts/ApercuPro-Light.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: normal;
  font-family: 'Apercu Pro';
  font-style: normal;
  src: url('assets/theme/fonts/ApercuPro-Regular.woff2') format('woff2'),
    url('assets/theme/fonts/ApercuPro-Regular.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: bold;
  font-family: 'Proxima Nova';
  font-style: normal;
  src: url('assets/theme/fonts/ProximaNova-Bold.woff2') format('woff2'),
    url('assets/theme/fonts/ProximaNova-Bold.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: normal;
  font-family: 'Proxima Nova';
  font-style: normal;
  src: url('assets/theme/fonts/ProximaNova-Regular.woff2') format('woff2'),
    url('assets/theme/fonts/ProximaNova-Regular.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: 500;
  font-family: 'Proxima Nova';
  font-style: normal;
  src: url('assets/theme/fonts/ProximaNova-Semibold.woff2') format('woff2'),
    url('assets/theme/fonts/ProximaNova-Semibold.woff') format('woff');
  font-display: swap;
}

#app {
  /* General Color Variables */
  --theme-color-1: #003e52;
  --theme-color-2: #b8d8eb;
  --theme-color-3: #c59;
  --color-white: #fff;
  --color-gold: #ffdc92;

  /* Font Variables */
  --root-font-family: 'Apercu Pro', helvetica, arial, sans-serif;
  --root-font-family-secondary: 'Proxima Nova', helvetica, arial, sans-serif;
  --root-font-size: 16px;
  --root-font-weight: 400;
  --light-text-color: var(--color-white);
  --dark-text-color: var(--theme-color-1);

  /* Top Bar */
  --top-bar-height: 31px;

  /* Button */
  --button-border-radius: 23px;

  /* Pink Button */
  --primary-button-background-color: var(--theme-color-3);
  --primary-button-text-color: var(--color-white);

  /* Light Blue Button */
  --secondary-button-background-color: var(--theme-color-2);
  --secondary-button-text-color: var(--theme-color-1);

  /* White Button */
  --tertiary-button-background-color: var(--color-white);
  --tertiary-button-text-color: var(--theme-color-1);

  /* Spinner */
  --spinner-background-color: #032a3d;
  --spinner-color: rgba(255, 255, 255, 0.5);

  /* Modal */
  --modal-background-color: rgba(0, 38, 50, 0.8);
  --modal-text-color: #003e52;
  --modal-button-background-color: var(--color-white);
  --modal-button-text-color: #053a53;
}