/*DEFINICION GENERALES*/
:root{
    --color-principal:#ffffff; 
    --color-secondary:rgb(37 77 117); 
    --color-background:#f2f7f9; 
    --color-transparent: transparent; 
    --color-icon:#B5B6B7; 
    --color-title:greenyellow; 
    --color-subtitle: #888;
    --color-text:rgb(255, 255, 255);
    --color-footer: greenyellow;
    --color-nav: black;
      
}

/*ESTILOS GENERALES*/
html{
    font-size: 10px;
}
body{
    width: 100%;
    height: 100%;
    font-family: "poppins", Helvetica, sans-serif;
    font-size: 1.5rem;
    background-color: var(--color-background);
    color:var(--color-text); 
    overflow: hidden;/*asi ya no hay scroll en la web*/
}

h1, h2, h3, h4, h5, h6{
    color:var(--color-title); 
}

/*IMAGEN DE FONDO*/
body{
    background-image: url("../img/fondo.png");
    background-size: auto;
    background-repeat: no-repeat;
    background-position-x: center;
    
}

/*FOOTER*/
footer {
    
    color: var(--color-footer);
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    text-align: center;
    background-color: var(--color-nav);
  }

/* NAVEGACION */

  /* Estilo para la animación de desplazamiento desde la izquierda */
  @media (max-width: 768px) {
    .navbar-collapse {
      position: fixed;
      top: 0;
      left: -100%;
      width: 250px; /* Ancho de la barra desplegable */
      height: 100%;
      background-color: #343a40; /* Color de fondo de la barra desplegable */
      transition: left 0.3s ease-in-out;
    }
  
    .navbar-collapse.show {
      left: 0;
      z-index: 1;
      padding: 5px;
    }
  }
.bg-dark {
    --bs-bg-opacity: 1;
    background-color: var(--color-nav)!important;
}