/*
Para correr tailwind
npx tailwindcss -i ./src/estilos.css -o ./src/estilos/output.css --watch
*/

html,
body {
	--tw-bg-opacity: 1;
	background-color: rgb(226 232 240 / var(--tw-bg-opacity));
	scroll-behavior: smooth;
}

h1,
h2 {
	font-family: "Oswald", sans-serif;
}

nav a {
	font-family: "Kanit", sans-serif;
}

p {
	font-family: "Kanit", sans-serif;
}

form {
	font-family: "Kanit", sans-serif;
}

button {
	font-family: "Kanit", sans-serif !important;
}

.logotipo img:hover {
	animation: vuelavuela 4s forwards;
}

.navegacion {
	text-transform: uppercase;
}

.fa-facebook {
	color: #212b4f;
	font-size: 30px !important;
	border: 5px outset #f23d3d;
	border-radius: 50%;
}

.fa-facebook:hover {
	color: blue;
	background-color: white;
	animation: vuelavuela 2s forwards;
}

.fa-instagram {
	color: #212b4f;
	font-size: 30px !important;
	border: 5px outset #f23d3d;
	border-radius: 50%;
}

.fa-instagram:hover {
	color: white;
	background-color: #bc2a8d;
	animation: vuelavuela 2s forwards;
}

.fa-phone {
	color: #212b4f;
	font-size: 30px !important;
	border: 5px outset #f23d3d;
	border-radius: 50%;
}

.fa-phone:hover {
	color: black;
	background-color: white;
	animation: vuelavuela 2s forwards;
}

@keyframes vuelavuela {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(60deg);
	}
	50% {
		transform: rotate(10deg);
	}
	75% {
		transform: rotate(100deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

.titulo {
	z-index: 0;
}

.titulo::after {
	content: "";
	padding: 10px;
	margin-top: -20px;
	width: 100%;
	z-index: -1;
	padding-bottom: 20px;
	background-color: #538cdc;
	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
		0 8px 10px -6px rgb(0 0 0 / 0.1);
	border-radius: 10% / 50%;
}

.animation-pulse {
	/*box-shadow: 0 0 0 20px rgba(229,62,62, 0.5);
    transform: scale(0.8);*/
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.8);
		box-shadow: 0 0 0 0 rgba(229, 62, 62, 1);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 60px rgba(229, 62, 62, 0);
	}

	100% {
		transform: scale(0.8);
	}
}