body {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		margin: 0;
		background-color: #f0f0f0;
		font-family: Arial, sans-serif;
	}

	.bienvenido {
		font-size: 10vh; /* Utilizar vw para hacer el texto responsivo */
		overflow: hidden; /* Para el efecto de escritura */
		white-space: nowrap; /* Para evitar saltos de línea 
		position: relative;*/
	}

	.letra {
		opacity: 0; /* Inicialmente oculto */
		animation: aparecer 0.5s forwards; /* Animación para aparecer */
		animation-delay: calc(0.1s * var(--i)); /* Retraso individual para cada letra */
	}

	@keyframes aparecer {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	.imagen {
		display: none; /* Inicialmente oculta */
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
		opacity: 0;
		animation: mostrarImagen 2s forwards; /* Animación para mostrar la imagen */
	}

	.desaparecer {
		animation: desaparecer 0.5s forwards;
		animation-delay: calc(0.1s * var(--i));
	}

	.header {
		position: absolute;
		top: 20%; /* Ajuste relativo al viewport */
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
		font-size: 5vw; /* Utilizar vw para hacer el texto responsivo */
	}

	.header div {
		float: left;
		color: #fff;
		font-family: 'Exo', sans-serif;
		font-weight: 200;
	}

	.header div span {
		color: #5379fa !important;
	}

	.login {
		position: absolute;
		top: 50%; /* Ajuste relativo al viewport */
		left: 50%;
		transform: translate(-50%, -50%);
		height: auto;
		width: 80vw; /* Ajuste relativo al viewport */
		max-width: 350px;
		padding: 10px;
		z-index: 2;
	}

	.login input[type=text],
	.login input[type=password] {
		width: 100%; /* Ajuste relativo al contenedor */
		height: 5vw; /* Ajuste relativo al viewport */
		max-height: 30px;
		background-color: #0c103bb0;
		border: 1px solid rgba(255, 255, 255, 0.6);
		border-radius: 2px;
		color: #fff;
		font-family: 'Exo', sans-serif;
		font-size: 4vh; /* Ajuste relativo al viewport */
		max-font-size: 16px;
		font-weight: 400;
		padding: 4px;
		margin-top: 10px;
	}

	.login input[type=button] {
		width: 100%; /* Ajuste relativo al contenedor */
		height: 7vw; /* Ajuste relativo al viewport */
		max-height: 35px;
		background: #fff;
		border: 1px solid #fff;
		cursor: pointer;
		border-radius: 2px;
		color: #a18d6c;
		font-family: 'Exo', sans-serif;
		font-size: 4vh; /* Ajuste relativo al viewport */
		max-font-size: 16px;
		font-weight: 400;
		padding: 6px;
		margin-top: 10px;
	}

	.login input[type=button]:hover {
		opacity: 0.8;
	}

	.login input[type=button]:active {
		opacity: 0.6;
	}

	.login input[type=text]:focus,
	.login input[type=password]:focus,
	.login input[type=button]:focus {
		outline: none;
		border: 1px solid rgba(255, 255, 255, 0.9);
	}

	@keyframes desaparecer {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	@keyframes mostrarImagen {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	/* Estilos específicos para diferentes resoluciones de pantalla */
	@media (max-width: 450px) {
		.imagen {
			background-image: url('https://i.pinimg.com/originals/c3/16/27/c3162775635d404d6462187ea4b5941f.gif!d');
		}
	}

	@media (min-width: 451px) {
		.imagen {
			background-image: url('https://i.pinimg.com/originals/c3/16/27/c3162775635d404d6462187ea4b5941f.gif');
		}
	}