:root {
  --color-zombie: #2ecc40;
  --color-pirate: #5f4c16;
  --color-elmito: yellow; 
  --color-camerino: #2ecc40;
  --color-house: white;
  --color-paso: red; 
  --color-coloso: #4a90e2;
  --color-bar: #0a73eb;
  --color-fondo: #0D0F40;
  --sombra-card: 3px 3px 6px rgba(0, 0, 0, 0.8) !important;
}

/* fuentes */
@font-face {
  font-family: 'ZombieFont';
  src: url('../fonts/ZOMBIE.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.zombie-font {
  font-family: 'ZombieFont', cursive, sans-serif;
  color: var(--color-zombie);
  text-shadow: var(--sombra-card);
}

@font-face {
  font-family: 'PirateFont';
  src: url('../fonts/PirataOne-Regular.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.pirate-font {
  font-family: 'PirateFont', cursive, sans-serif;
  color:  var(--color-pirate); 
  text-shadow: var(--sombra-card);
}

@font-face {
  font-family: 'MayanFont';
  src: url('../fonts/Mayan.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.mayan-font {
  font-family: 'MayanFont', cursive, sans-serif;
  color: var(--color-elmito); 
  text-shadow: var(--sombra-card);
}

@font-face {
  font-family: 'ShowTimeFont';
  src: url('../fonts/ShowTime.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.showtime-font {
  font-family: 'ShowTimeFont', cursive, sans-serif;
  color: var(--color-camerino); 
  text-shadow: var(--sombra-card);
}

@font-face {
  font-family: 'HouseFont';
  src: url('../fonts/houseFont.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.house-font {
  font-family: 'HouseFont', cursive, sans-serif;
  color: var(--color-house); 
  text-shadow: var(--sombra-card);
}

@font-face {
  font-family: 'BloodlustFont';
  src: url('../fonts/bloodlustexpand.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.bloodlust-font {
  font-family: 'BloodlustFont', cursive, sans-serif;
  color: var(--color-paso); 
  text-shadow: var(--sombra-card);
}

@font-face {
  font-family: 'sagittariusFont';
  src: url('../fonts/sagittarius.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.sagittarius-font {
  font-family: 'sagittariusFont', cursive, sans-serif;
  color: var(--color-coloso);
  text-shadow: var(--sombra-card);
}

@font-face {
  font-family: 'barFont';
  src: url('../fonts/') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.bar-font {
  font-family: 'barFont', cursive, sans-serif;
  color: var(--color-bar); 
  text-shadow: var(--sombra-card);
}

/* Colores de botones */

.btn-custom-zombie {
  color: var(--color-zombie);
  border-color: var(--color-zombie);
  background-color: transparent;
}

.btn-custom-zombie:hover {
  background-color: var(--color-zombie);
  border-color: var(--color-zombie);
}


.btn-custom-pirate {
  color: var(--color-pirate);
  border-color: var(--color-pirate);
  background-color: transparent;
}

.btn-custom-pirate:hover {
  background-color: var(--color-pirate);
  border-color: var(--color-pirate);
}

.btn-custom-mito {
  color: var(--color-elmito);
  border-color: var(--color-elmito);
  background-color: transparent;
}

.btn-custom-mito:hover {
  background-color: var(--color-elmito);
  border-color: var(--color-elmito);
}

.btn-custom-camerino {
  color: var(--color-camerino);
  border-color: var(--color-camerino);
  background-color: transparent;
}

.btn-custom-camerino:hover {
  background-color: var(--color-camerino);
  border-color: var(--color-camerino);
}

.btn-custom-house {
  color: var(--color-house);
  border-color: var(--color-house);
  background-color: transparent;
}

.btn-custom-house:hover {
  background-color: var(--color-house);
  border-color: var(--color-house);
}

.btn-custom-paso {
  color: var(--color-paso);
  border-color: var(--color-paso);
  background-color: transparent;
}

.btn-custom-paso:hover {
  background-color: var(--color-paso);
  border-color: var(--color-paso);
}

.btn-custom-coloso {
  color: var(--color-coloso);
  border-color: var(--color-coloso);
  background-color: transparent;
}

.btn-custom-coloso:hover {
  background-color: var(--color-coloso);
  border-color: var(--color-coloso);
}

.btn-custom-bar {
  color: var(--color-bar);
  border-color: var(--color-bar);
  background-color: transparent;
}

.btn-custom-bar:hover {
  background-color: var(--color-bar);
  border-color: var(--color-bar);
}

/* colores de letras */
.color-zombie {
  color: var(--color-zombie);
}

.color-pirate {
  color: var(--color-pirate);
}

.color-elmito {
  color: var(--color-elmito);
}

.color-camerino {
  color: var(--color-camerino);
}

.color-house {
  color: var(--color-house);
}

.color-paso {
  color: var(--color-paso);
}

.color-coloso {
  color: var(--color-coloso);
}

.color-bar {
  color: var(--color-bar);
}


/* colores de card */

.zombie-card {
  background-color: transparent !important;
  border: 1px solid var(--color-zombie) !important;
  box-shadow: none !important;
}

.zombie-card,
.zombie-card h3,
.zombie-card .display-6 {
  color: var(--color-zombie) !important;
}


.pirate-card {
  background-color: transparent !important;
  border: 1px solid var(--color-pirate) !important;
  box-shadow: none !important;
}

.pirate-card,
.pirate-card h3,
.pirate-card .display-6 {
  color: var(--color-pirate) !important;
}

.mito-card {
  background-color: transparent !important;
  border: 1px solid var(--color-elmito) !important;
  box-shadow: none !important;
}

.mito-card,
.mito-card h3,
.mito-card .display-6 {
  color: var(--color-elmito) !important;
}


.camerino-card {
  background-color: transparent !important;
  border: 1px solid var(--color-camerino) !important;
  box-shadow: none !important;
}

.camerino-card,
.camerino-card h3,
.camerino-card .display-6 {
  color: var(--color-camerino) !important;
}


.house-card {
  background-color: transparent !important;
  border: 1px solid var(--color-house) !important;
  box-shadow: none !important;
}

.house-card,
.house-card h3,
.house-card .display-6 {
  color: var(--color-house) !important;
}

.paso-card {
  background-color: transparent !important;
  border: 1px solid var(--color-paso) !important;
  box-shadow: none !important;
}

.paso-card,
.paso-card h3,
.paso-card .display-6 {
  color: var(--color-paso) !important;
}

.coloso-card {
  background-color: transparent !important;
  border: 1px solid var(--color-coloso) !important;
  box-shadow: none !important;
}

.coloso-card,
.coloso-card h3,
.coloso-card .display-6 {
  color: var(--color-coloso) !important;
}

.bar-card {
  background-color: transparent !important;
  border: 1px solid var(--color-bar) !important;
  box-shadow: none !important;
}

.bar-card,
.bar-card h3,
.bar-card .display-6 {
  color: var(--color-bar) !important;
}