/* CSS para aviso*/
/* con * formateamos toda la página web y despues se dará estilo a cada sección*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
    font-family: 'Montserrat', sans-serif;
    box-sizing: content-box;/*distribuirá todos los elementos a lo ancho y alto de cada área*/
	text-decoration: none;/*quitará cualquier decoración que tengan los textos (ej: subrayado)*/
	margin: 0px;/*quitará cualquier margen que tengatoda la página*/
}

/* El estilo para área de la cabecera head*/
.head {
    display: flex;
	/* hara que los elementos se formen de manera horizontal*/
	justify-content: space-evenly;
	/*ubica los elementos en el eje principal, ayudará a separar los elementos, en este caso se iran a las esquinas, con evenly será poca la separación*/
	align-items: center;
	/*con esto centraremos todos los elementos de forma vertical*/
	background-color: #a49cd4;
	padding: 10px;
	margin: 1px;
}

/* El estilo para la imagen de intactum*/
#logo {
    width:110px;
    height: 50px;
    /*primer valor en px arriba y abajo y segundo valor en px a la izquierda y a la derecha*/
	border-radius: 20px;
}
/* El estilo para la imagen de facebook*/
#facebook {
    width:30px;
    height: auto;
}
#whatsapp {
    width:30px;
    height: auto;
}
.hora {
    font-size: 12px;
    color: white;
    text-shadow: -1.5px 1.5px 0 black;/*para agregar un sombreado al texto, el primer valor es para el eje x (sombrea a la derecha en valor positivo y en valor negativo a la izquierda), 
    el segundo el eje y (sombreado abajo en valor positivo y arriba en valor negativo 
    y el tercero es el blur (intensidad del sombreado en 0 es lo más intenso y al subir el valor se desvanece) */
}

/* Estilo para el área total del Menú o lista */
.navbar {
    display: flex;/* hara que los elementos se formen de manera horizontal*/
    justify-content: center;/*ubica los elementos en el eje principal, ayudará a separar los elementos, en este caso se ira al centro*/
	background-color: rgb(199, 195, 195);
	margin: 1px;
    }
a {
    padding: 15px 0px;/*Esto dará el espacio que quiero de separación entre arriba, abajo (el primer valor), a la derecha y a la izquierda (el segundo valor)*/;
    color: #0c0475;
}
a:hover {
	color:whitesmoke;
}

/*Estilo para el artículo*/
article {
	margin: 1px;
	padding: 20px;
	}
h1 {
    text-align: center;
    font-size: medium;
    }
p {
    text-align: justify;
    font-size: small;
}


@media (max-width: 600px) {
	.head{
        display: flex;
        flex-direction: column;
        width:auto;
        height:fit-content;
        background-size: cover;        
    }
/* responsivo el área de logo, facebook, whatsapp y horario*/
    #logo {
        width: 80px;
        height: auto;
    }
    .hora{
        font-size: 70%;
    }
    #facebook{
        margin: 2px;
    }
}