html {
	height: 100%;
}

html,
body {
	background-color: #405f88;
	margin: 0px;
	height: 100%;
}

#container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.letter {
	animation: 2.5s ease-in-out infinite alternate color-change;
}

.letter1 {
	animation-delay: 0s;
}

.letter2 {
	animation-delay: 0.5s;
}

.letter3 {
	animation-delay: 1s;
}

.letter4 {
	animation-delay: 1.5s;
}

.letter5 {
	animation-delay: 2s;
}

.letter6 {
	animation-delay: 2.5s;
}

.letter7 {
	animation-delay: 3s;
}

@keyframes color-change {
	35% {
		filter: brightness(1.0);
	}



	100% {
		filter: brightness(1.5);
	}
}