*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.container {
  overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	background-image: url("Firma.png"), url("https://images.pexels.com/photos/1303081/pexels-photo-1303081.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
	background-attachment: fixed, fixed;
	background-repeat: no-repeat, no-repeat;
	background-size: 30%, cover;
	background-position: bottom left, center;
}
.title {
	font-size: 4rem;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	text-align: center;
}
canvas {
  position: absolute;
}

span {
	opacity: 0;
	transition: opacity, color 1.5s ease;
}

span.fade {
	opacity: 1;
	animation: newColor 3s infinite;
}
@keyframes newColor {
	0% {
		color: #fff;
	}
	25% {
		color: red;
	}
	50% {
		color: green;
	}
	75% {
		color: red;
	}
	100% {
		color: #fff;
	}
}

@media screen and (max-width: 1024px) {
	.title {
		font-size: 3rem;
	}
}

@media screen and (max-width: 720px) {
	.title {
		font-size: 2.5rem;
	}
	.container {
	  background-image: url("Firma.png"), url("https://images.pexels.com/photos/188971/pexels-photo-188971.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
	background-attachment: fixed, fixed;
	background-repeat: no-repeat, no-repeat;
	background-size: 40%, cover;
	background-position: bottom left, center;
}

@media screen and (max-width: 480px) {
	.title {
		font-size: 2rem;
	}
	.container {
	padding-top: 50%;
	justify-content: center;
	align-items: flex-start;
	background-image: url("Firma.png"), url("https://images.pexels.com/photos/1671431/pexels-photo-1671431.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
	background-attachment: fixed, fixed;
	background-repeat: no-repeat, no-repeat;
	background-size: 60%, cover;
	background-position: 50% 50%, center;
	  
}