@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');

html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

:root {
	--color-primario: #00a0e9;
	--color-secundario: #00a0e9;
	--color-resalte: #b48725;
	--color-main-bg: #fff;
	--color-main-text: #13322b;
	--color-logo-imss: #486f6c;

	--color-msg-info: hsl(210, 50%, 40%);
	--color-msg-info-light: hsl(210, 50%, 90%);
	--color-msg-warn: hsl(50, 100%, 40%);
	--color-msg-warn-light: hsl(50, 100%, 90%);
	--color-msg-error: hsl(0, 50%, 40%);
	--color-msg-error-light: hsl(0, 50%, 90%);
}

body {
	width: 100vw;
	min-width: 768px;
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	background-color: #e3e8e4;
}

header {
	height: 160px;
	box-sizing: content-box;
	background: none;
	background-color: white;
	display: flex;
	flex-direction: row;
	border-bottom: 8px solid var(--color-main-text);
}

header .header-gradient {
	width: 100%;
}

header #anual {
	padding: 20px;
}

main {
	padding: 2em;
	background-color: var(--color-main-bg);
	color: var(--color-logo-imss);
}

footer {
	background: url(./img/footer-pattern.png) no-repeat;
	color: #fff;
	height: 97px;
	padding-bottom: 32px;
	padding-top: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.75em;
	line-height: 00.75em;
}

h1,
h2,
h3,
hr,
p {
	margin-bottom: 1em;
}

h1 {
	color: var(--color-resalte);
}

hr {
	clear: both;
}

main ul {
	margin-left: 32px;
	margin-bottom: 1em;
}

.container {
	max-width: 1280px;
	margin: 0 auto;
	box-shadow: 1px 1px 8px 8px #00000080;
}