:root {
	--clr-primaria: #379dfa;
	--clr-secundaria: #8dba43;
	--clr-terciaria: #1dc0f0;

	--clr-fenix: #121858;

	--clr-background: #fcfcfc;
	--clr-header: #79cff3;
	--clr-texto: #494949;

	--font-family: "Trebuchet MS", sans-serif;
}

body,
html {
	margin: 0;
	padding: 0;
	font-family: var(--font-family);
	color: var(--clr-texto);
	word-wrap: normal;
	overflow-x: hidden;
	scroll-behavior: smooth;
	background: #68b6ef;
	background: linear-gradient(
		44deg,
		rgba(104, 182, 239, 1) 0%,
		rgba(112, 143, 239, 1) 22%,
		rgba(112, 143, 239, 1) 33%,
		rgba(102, 188, 226, 1) 50%,
		rgba(107, 168, 236, 1) 64%,
		rgba(108, 164, 238, 1) 70%,
		rgba(108, 162, 239, 1) 72%,
		rgba(94, 211, 250, 1) 100%
	);
}

header {
	text-align: center;
}
.headerContent {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 2rem;
}

img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}
img.headerTitulo {
	width: 700px;
}
img.headerData {
	width: 500px;
}
.logotipoTopo {
	width: 200px;
	margin: 30px auto 50px;
}

.container {
	background: var(--clr-background);
	width: 80%;
	margin: auto;
}

footer {
	width: 80%;
	margin: auto;
	color: #ffffff;
	img {
		max-width: 200px;
	}
	a {
		color: #ffffff;
	}
}
a {
	color: var(--clr-texto);
	text-decoration: none;
}
a:hover {
	color: var(--clr-texto);
}

ul {
	list-style: none;
	padding: 1rem 3rem;
	margin: 0;
}
li {
	padding: 0.3rem;
}
li i,
li strong {
	color: var(--clr-secundaria);
	margin-right: 0.5rem;
}
li span {
	color: var(--clr-primaria);
	font-weight: 600;
	font-size: large;
}

.btn-inscricao {
	background: var(--clr-primaria);
	padding: 9px 50px !important;
	border-radius: 50px;
	position: fixed;
	bottom: 70px;
	right: 30px;
	color: white;
	z-index: 9;
}
.btn-inscricao:hover {
	background: var(--clr-secundaria);
	border-radius: 50px;
	color: white;
}
.btn-inscricao::after {
	content: "Inscreva-se";
	padding-left: 0.5rem;
}

.btn-wpp {
	background: var(--clr-primaria);
	padding: 9px 50px !important;
	border-radius: 50px;
	position: fixed;
	bottom: 20px;
	right: 30px;
	color: white;
	z-index: 9;
}
.btn-wpp:hover {
	background: var(--clr-secundaria);
	border-radius: 50px;
	color: white;
}
.btn-wpp::after {
	content: "Fale conosco";
	padding-left: 0.5rem;
}

.links a {
	border-bottom: 1px solid var(--clr-fenix);
}
.links a:hover {
	color: var(--clr-fenix);
}
.links i {
	color: var(--clr-fenix);
}
.links i:not(:first-child) {
	padding: 0 0.3rem 0 1rem;
}
.links i:first-child {
	padding-right: 0.3rem;
}

.cdfIntro p {
	text-transform: uppercase;
	font-weight: 600;
	color: var(--clr-terciaria);
}
h1 {
	color: var(--clr-primaria);
	font-weight: 700;
	letter-spacing: -1px;
}
h3 {
	color: var(--clr-terciaria);
	letter-spacing: -1px;
	font-weight: 700;
}

.programacao {
	text-align: left;
}
.programacao p {
	margin-top: 0.8rem;
}
.programacao span {
	color: white;
	background-color: var(--clr-primaria);
	padding: 0.3rem 1rem;
	border-radius: 20px;
}

.anexos a {
	color: white;
	background-color: var(--clr-secundaria);
	padding: 0.3rem 1rem;
	border-radius: 20px;
	display: block;
	text-align: center;
}
.anexos strong {
	color: white;
}
.anexos i {
	color: white;
}

@media (min-width: 768px) {
	.anexos a {
		width: fit-content;
	}
}
@media (max-width: 768.98px) {
	.container {
		width: 90%;
		max-width: 90%;
	}

	.btn-inscricao {
		display: none;
	}
	.btn-wpp {
		padding: 10px 18px !important;
		bottom: 20px;
		right: 20px;
		font-size: larger;
	}
	.btn-wpp::after {
		content: none;
		padding-left: 0;
	}
}