style.css

html{
	height: 100%;
	overflow: hidden;
}

/*
 Background settings and color
*/
body {
	margin:0;
	background-color: #110d08;
	background-repeat:no-repeat;
	background-size:cover;
}

/*
	Name display on top of page
*/
h1{
	background-size: cover;
	color: wheat;
	font-family: 'Quicksand', sans-serif;
	text-align: center;
	box-sizing: border-box;
	margin-top: 4%;
	width: 20%;
	margin-left: auto;
	margin-right: auto;
}

/*
	Links at the bottom of the page
*/
ul {
	position:absolute;
	bottom:0;
	text-align: center;
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

/* Style all font awesome icons */
.fa {
	position: relative;
	padding: 1%;
	font-size: 30px;
	width: 50px;
	text-align: center;
	text-decoration: none;
	color: wheat;
	margin-left: auto;
	margin-right: auto;
  } 

/* Glow when hovered over */
.fa:hover {
	color: rgba(245,220, 174);
	text-shadow: 0px 0px 10px;
}

/* Turn black when clicked on */
.fa:active {
	color: black;
}

/* 
	Covers each line in the about paragraph. Each is the same but wait different times to animate to give
	illusion of typing. Add as many of these as line in your description.	
*/
#line1 {
	font-size: large;
	width: 10%;
	margin-left: 30%;
	margin-top: 10%;
	animation-fill-mode: both;
}
#line2 {
	font-size: large;
	width: 10%;
	margin-left: 30%;
	margin-top: 2%;
	animation-delay: 1.5s;
	animation-fill-mode: both;
}
#line3 {
	font-size: large;
	width: 10%;
	margin-left: 30%;
	margin-top: .5%;
	animation-delay: 3s;
	animation-fill-mode: both;
}
#line4 {
	font-size: large;
	width: 10%;
	margin-left: 30%;
	margin-top: .5%;
	animation-delay: 4.5s;
	animation-fill-mode: both;
}
#line5 {
	font-size: large;
	width: 10%;
	margin-left: 30%;
	margin-top: .5%;
	animation-delay: 6s;
	animation-fill-mode: both;
}

/* Animation code for the main paragraph */
.typewrite1 {
	color: wheat;
	overflow: hidden;
	border-right: .15em solid wheat;
	white-space: nowrap;
	margin: 0 auto;
	letter-spacing: .10em;
	animation:
		typing 3.5s steps(100, end),
		blink-caret .75s step-end infinite;
}

@keyframes typing {
	from {width: 0}
	to { width: 100% }
}

@keyframes blink-caret {
	from, to { border-color: transparent }
	100% { border-color: wheat;}
}