/* --Archivo css, estilo de los componentes globales-- */


/* --Estilo perteneciente del componente HEADER-- */

#container-header {  /* Contenedor padre del header */
    background-color: #0d2d6d;
}

#image-logo { /* Imagen del logo UTN */
    cursor: pointer;
    height: 80px;
    width: auto;
    margin: 10px;
}

#image-logo-greenhouse { /* Imagen del logo INVERNADERO */
    height: 80px;
    width: auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    margin: 10px auto;
}

#image-logo-plantandcare { /* Imagen del logo PLANTANDCARE */
    cursor: pointer;
    height: 80px;
    width: 80px;
    margin: 10px;
    position: absolute;
    top: 0;
    right: 0;
}

/* --Estilo perteneciente del componente NAV-- */

#menu { /* Contenedor completo, cubre todos los botones de navegacion y los especiales */
    display: flex;
    list-style: none;
    padding: 8px 0;
    margin: 0;
    background-color: #0d2d6d;
    align-items: center;
}

.button-navegation-container { /* Clase de los contenedores que cubre cada boton de navegacion */
    flex: 1;
    text-align: center;
}

.button-navegation { /* Clase de cada boton de navegacion */
    color: white;
    text-decoration: none;
    cursor: pointer;
    font-weight: 50;
}

.button-navegation:hover { /* A los botones de navegacion se les pone una animacion que cambia de color */
    color: #0a58ca;
    transition: color 0.3s ease;
}

.button-special-container { /* Contenedor de los botones especiales por cada uno separados */
    flex: 0 0 auto;
}

.button-special { /* Clase que indica el boton especial */
    display: block;
    padding: 0;
    background: transparent;
    border: none;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
}

.image-button-special { /* Clase que indica la imagen utilizada para el boton */
    display: block;
    height: 30px;
    width: auto;
    margin: 0;
}

/* --Estilo perteneciente del componente MODULE NAV-- */

#bar-sticky { /* ID que pertenece al contenedor que tiene las dos barras de navegacion */
    position: sticky;
    z-index: 999;
    top: 0;
}

#nav-module { /* ID que pertenece a la etiqueta de lista, contenedor de la lista completa de los botones de navegacion de modulos */
    display: flex;
    list-style: none;
    padding: 8px 0;
    margin: 0;
    background-color: #ffffff;
    align-items: center;
}

.nav-module-content { /* ID que pertenece a la etiqueta de cada componente de la lista de la barra de navegacion de modulos */
    flex: 1;
    text-align: center;
}

.button-nav-module-content { /* ID que pertenece a la etiqueta "a" que integra el link al archivo donde nos va a llevar al archivo correspondiente */
    text-decoration: none;
    color: black;
}

.button-nav-module-content:hover { /* Se le integra una animacion a los botones, cuando el cursor se encuentra sobre */
    color: #e99a2b;
    transition: color 0.3s ease;
}

/* Estilo perteneciente del componente FOOTER */

#footer-text { /* ID que pertenece al texto dentro del FOOTER */
    margin: 0;
}