@font-face {
  font-family: 'EVENTFONT';
  src: url('/static/fonts/GothamRounded-Medium.ttf') format('truetype');
  font-weight: normal;
}

[class^="themeMap--"], 
[class*=" themeMap--"], 
.theme-light, 
.theme-dark, 
:root {
  /* Fonts */
  --font-primary: 'EVENTFONT', 'Gotham Rounded', ui-rounded, sans-serif !important;
  --font-secondary: 'EVENTFONT', 'Gotham Rounded', ui-rounded, sans-serif !important;

  /* Speedromizer Brand Colors */
  --brand-primary: #D10074 !important;
  --accent-primary: #D10074 !important;
  --accent-background: #D10074 !important;
  --accent-hover: #ff008c !important;
  --accent-active: #a1005a !important;
  
  /* Backgrounds */
  --background-primary: rgb(24, 24, 24) !important;   /* Main page background */
  --background-secondary: rgb(32, 32, 32) !important; /* Alert/Panel backgrounds */
  --background-tertiary: rgb(48, 48, 48) !important;  /* Input fields / Hover states */
  --background-floating: rgb(32, 32, 32) !important;  /* Popouts/Modals */

  /* Text Colors */
  --text-normal: rgb(222, 222, 222) !important;
  --text-default: rgb(222, 222, 222) !important;
  --header-normal: rgb(222, 222, 222) !important;
  --text-muted: rgb(160, 160, 160) !important;
  --header-muted: rgb(160, 160, 160) !important;
  --text-inverted: #ffffff !important;
  --text-link: rgb(127, 127, 255) !important; 
  
  /* Status/Error Colors (Fixes the pink error box) */
  --text-danger: #ff6b6b !important;
  --status-danger-background: rgba(255, 74, 74, 0.15) !important; 

  /* Borders */
  --border-primary: 1px solid rgb(64, 64, 64) !important;
  --border-secondary: 1px solid rgb(48, 48, 48) !important;
  --border-subtle: 1px solid rgb(48, 48, 48) !important;
}

body, #container {
  background-color: var(--background-primary) !important;
  color: var(--text-normal) !important;
}

input, textarea, select {
  color: var(--text-normal) !important;
}

::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

a {
  color: var(--text-link) !important;
}
a:hover {
  color: #a0a0ff !important;
}