body {
	background: url("background.jpg"); /* Links to your background image, which you can also replace with a URL. */
	background-size: cover; /* Image covers page. */
	background-blend-mode:
	background-repeat: no-repeat; /* Image does not repeat. */
	background-attachment: fixed; /* Image doesn't move when you scroll up or down. */
	background-position: top;
	text-align: center;
	color: white; /* Text color. */
	font-family: 'Avenir', sans-serif; /* Font: sans-serif included in case browser doesn't support first option. */
}

h1 {
	font-size: 35px;
	animation: flash 5s;
	font-family: "Segoe Print", Arial, sans-serif
}

h2 {
	font-size: 20px;
	animation: flash 5s;
	font-family: "Segoe Print", Arial, sans-serif
}

h3 {
	font-size: 15px;
	animation: flash 5s;
	font-family: "Segoe Print", Arial, sans-serif
}

h4 {
	font-size: 20px;
	animation: flash 5s;
	font-family: "Segoe Print", Arial, sans-serif
}

f1 {
	font-side 7px;
	font-family: "Segoe Print", Arial, sans-serif;
	color: deepskyblue
}

/* This just centers the header container vertically on the page. */
.container-fluid {
	height: 200px;
	width: 90%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

/* Styling for icons. */
.fa {
	color: deepskyblue;
	margin: 10px 5px;
	font-size: 3em !important;
}

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	color: deepskyblue;
}

@keyframes flash {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}
}

.container {
	color: deepskyblue;
}
<script >
setTimeout(function() {
    document.querySelector('.header').classList.add('flash');
  }, 1000); /* Change the duration to match the animation duration */
</script >

/* Define the blinking cursor animation */