/* Variables CSS para colores y estilos personalizados */

:root {
  /* Fondo general de la página */
  --bg-general: #03212f;
  /* --bg-general: url('../img/madring/background.png'); */

  /* Color principal para textos */
  --color-primary: #f8f89e;

  /* Color de la cabecera */
  --bg-header: #ffffff;

  /* Color para títulos */
  --color-title: #f8f89e;

  /* Color para bordes de botones */
  --border-button: #e10600;

  /* Color de fondo para botones */
  --bg-button: #e10600;

  /* Color de texto para botones */
  --text-button: #ffffff;

  /* Color para bordes de botones en hover */
  --border-button-hover: #ffffff;

  /* Color de fondo para botones en hover */
  --bg-button-hover: #ffffff;

  /* Color de texto para botones en hover */
  --text-button-hover: #03212f;

  /* Fondo de las cajas de formulario de entradas */
  --bg-forms-box: rgb(58, 91, 106);

  /* Fondo del footer */
  --bg-footer: #03212f;

  /* Fondo de popups */
  --bg-popup: #ffffff;

  /* Color de enlaces */
  --link-color: #ffffff;

  /* Color de enlaces en hover */
  --link-color-hover: #ffffff;

  /* Color de texto negro */
  --text-black: #000;

  /* Color de texto blanco */
  --text-white: #fff;

  /* Grosor del borde */
  --border-width: 3px;

  /* Estilo del borde */
  --border-style: solid;

  /* Radio del borde */
  --border-radius: 50px;

  /* Color para etiquetas (heredado del color principal) */
  --label-color: var(--color-primary);

  /* Color para títulos (heredado del color de título) */
  --title-color: var(--color-title);

  /* Fondo del header (heredado del color de cabecera) */
  --header-bg: var(--bg-header);

  /* Fondo de cajas de ticket */
  --ticket-box-bg: var(--bg-button);

  /* Borde de cajas de ticket */
  --ticket-box-border: var(--border-button);

  /* Texto de cajas de ticket */
  --ticket-box-text: var(--text-button);

  /* Color de texto del menú */
  --text-menu-color: #03212f;

  /* Color de texto del menú en hover */
  --text-menu-color-hover: #03212f;
}

/* Start Custom Fonts CSS*/
@font-face {
  font-family: 'festivalFont';
  font-style: normal;
  font-weight: bold;
  font-display: auto;
  src: url('../fonts/f1/Formula1-Bold_web_0.ttf') format('truetype');
}

@font-face {
    font-family: 'festivalFont';
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url('../fonts/f1/Formula1-Regular_web_0.ttf') format('truetype');
}
/* End Custom Fonts CSS */