/* Estilos generales para el cuerpo de la página */
body {
    background-color: #f8f9fa; /* Color de fondo claro */
    font-family: 'Arial', sans-serif;
}

/* Estilos para el header */
header {
    background-color: #007bff; /* Color azul de Bootstrap */
}

/* Estilos para el footer */
footer {
    background-color: #343a40; /* Color gris oscuro de Bootstrap */
}

/* Estilos para la navegación vertical */
.vertical-nav {
    border-right: 1px solid #dee2e6; /* Línea separadora a la derecha */
    height: 100%; /* Ocupa todo el alto disponible */
    padding-top: 15px;
}

.vertical-nav .nav-link {
    color: #495057; /* Color de texto para los enlaces */
    padding: 10px 15px;
}

.vertical-nav .nav-link:hover {
    background-color: #e9ecef; /* Color de fondo al pasar el mouse */
}

/* Estilos para el contenido principal */
.column {
  /* Ocupa el 100% del ancho del contenedor padre */
  width: 100%;
  
  /* Usamos Flexbox para alinear y distribuir los elementos */
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  /* El height puede ser dinámico o en un porcentaje */
  height: 100px;
  
  /* Un padding para que los botones no toquen los bordes */
  padding: 0 5%;
  
  /* Para visualizar el contenedor */
  /*border: 1px solid black;*/ 
}

.button {
  /* La fuente se ajusta a la pantalla */
  font-size: 5vw;
  cursor: pointer;
  border: none;
  background-color: transparent;
  color: #333;
  transition: transform 0.3s ease;
}

.button:hover {
  transform: scale(1.1);
}

/* Media query para pantallas más pequeñas */
@media (max-width: 768px) {
  .column {
    height: 80px;
    padding: 0 2%;
  }

  .button {
    font-size: 10vw;
  }
}