/* Créditos: From uiverse.io by @Voxybuns */

/*Falta mejorar el fondo de los botones */
/* Paleta de colores: #55ff00 ; #00dddd; #FdFF44; #ED6A5A*/
/*Paleta de la botonera: #00ffff; ffff00 */
/*Botón para ir a la landing page */

.botonatras {
  /* Variables */
  --button_radius: 0.75em;
  --button_color: #00ffff;
  --button_outline_color: #000000;
  font-size: 1.4vw;
  font-weight: bold;
  border: none;
  border-radius: var(--button_radius);
  background: var(--button_outline_color);
}

.botonatras {
  display: block;
  box-sizing: border-box;
  border: 2px solid var(--button_outline_color);
  border-radius: var(--button_radius);
  padding: 0.75em 1.5em;
  background: var(--button_color);
  color: var(--button_outline_color);
  transform: translateY(-0.2em);
  transition: transform 0.2s ease;
}

button:hover .botonatras {
  /* Para que suba el botón al hacer hover */
  transform: translateY(-0.5em);
}

button:active .botonatras {
  /* Para que baje el botón al presionarlo */
  transform: translateY(0);
}
/* Boton para presentación */
.botonpresentacion {
  /* Variables */
  --button_radius: 0.75em;
  --button_color: #FFFF00;
  --button_outline_color: #000000;
  font-size: 1.4vw;
  font-weight: bold;
  border: none;
  border-radius: var(--button_radius);
  background: var(--button_outline_color);
}

.botonpresentacion {
  display: block;
  box-sizing: border-box;
  border: 2px solid var(--button_outline_color);
  border-radius: var(--button_radius);
  padding: 0.75em 1.5em;
  background: var(--button_color);
  color: var(--button_outline_color);
  transform: translateY(-0.2em);
  transition: transform 0.2s ease;
}

button:hover .botonpresentacion {
  /* Para que suba el botón al hacer hover */
  transform: translateY(-0.5em);
}

button:active .botonpresentacion {
  /* Para que baje el botón al presionarlo */
  transform: translateY(0);
}

/*Botón preguntas */
.botonpreguntas {
  /* Variables */
  --button_radius: 0.75em;
  --button_color: #00ffff;
  --button_outline_color: #000000;
  font-size: 1.4vw;
  font-weight: bold;
  border: none;
  border-radius: var(--button_radius);
  background: var(--button_outline_color);
}

.botonpreguntas {
  display: block;
  box-sizing: border-box;
  border: 2px solid var(--button_outline_color);
  border-radius: var(--button_radius);
  padding: 0.75em 1.5em;
  background: var(--button_color);
  color: var(--button_outline_color);
  transform: translateY(-0.2em);
  transition: transform 0.2s ease;
}

button:hover .botonpreguntas {
  /* Para que suba el botón al hacer hover */
  transform: translateY(-0.5em);
}

button:active .botonpreguntas {
  /* Para que baje el botón al presionarlo */
  transform: translateY(0);
}

/*Botón pasoxIllia */
.botonpasoxillia {
  /* Variables */
  --button_radius: 0.75em;
  --button_color: #ffff00;
  --button_outline_color: #000000;
  font-size: 1.4vw;
  font-weight: bold;
  border: none;
  border-radius: var(--button_radius);
  background: var(--button_outline_color);
}

.botonpasoxillia {
  display: block;
  box-sizing: border-box;
  border: 2px solid var(--button_outline_color);
  border-radius: var(--button_radius);
  padding: 0.75em 1.5em;
  background: var(--button_color);
  color: var(--button_outline_color);
  transform: translateY(-0.2em);
  transition: transform 0.2s ease;
}

button:hover .botonpasoxillia {
  /* Para que suba el botón al hacer hover */
  transform: translateY(-0.5em);
}

button:active .botonpasoxillia {
  /* Para que baje el botón al presionarlo */
  transform: translateY(0);
}

/*Botón sobre preferencias */
.botonpreferencias {
  /* Variables */
  --button_radius: 0.75em;
  --button_color: #00ffff;
  --button_outline_color: #000000;
  font-size: 1.4vw;
  font-weight: bold;
  border: none;
  border-radius: var(--button_radius);
  background: var(--button_outline_color);
}

.botonpreferencias {
  display: block;
  box-sizing: border-box;
  border: 2px solid var(--button_outline_color);
  border-radius: var(--button_radius);
  padding: 0.75em 1.5em;
  background: var(--button_color);
  color: var(--button_outline_color);
  transform: translateY(-0.2em);
  transition: transform 0.2s ease;
}

button:hover .botonpreferencias {
  /* Para que suba el botón al hacer hover */
  transform: translateY(-0.5em);
}

button:active .botonpreferencias{
  /* Para que baje el botón al presionarlo */
  transform: translateY(0);
}

/*Botón fututo */
.botonfuturo {
  /* Variables */
  --button_radius: 0.75em;
  --button_color: #ffff00;
  --button_outline_color: #000000;
  font-size: 1.4vw;
  font-weight: bold;
  border: none;
  border-radius: var(--button_radius);
  background: var(--button_outline_color);
}

.botonfuturo {
  --button_radius: 0.75em;
  --button_color: #ffff00;
  --button_outline_color: #000000;
  display: block;
  box-sizing: border-box;
  border: 2px solid var(--button_outline_color);
  border-radius: var(--button_radius);
  padding: 0.75em 1.5em;
  background: var(--button_color);
  color: var(--button_outline_color);
  transform: translateY(-0.2em);
  transition: transform 0.2s ease;
}

button:hover .botonfuturo {
  /* Para que suba el botón al hacer hover */
  transform: translateY(-0.5em);
}

button:active .botonfuturo {
  /* Para que baje el botón al presionarlo */
  transform: translateY(0);
}