#landing {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100vw;
	min-height: 100vh;
	padding: 30px;
	background-color: #a9a9a9;
	background-image: linear-gradient(
			rgba(255, 255, 255, 0.6),
			rgba(255, 255, 255, 0.6)
		),
		url(../Images/pc-closeup.jpg);
}

.homePage {
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
	align-items: center;
	margin-top: 50px;
	margin: 20px;
}

.home-welcome {
	margin: 10px;
	font-size: 20px;
	color: black;
}

.home-heading {
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 50px;
	color: black;
}

.home-heading span {
	color: #ed2d34;
}

.home-title {
	margin: 50px;
	font-size: 20px;
	color: black;
}

.home-title span {
	color: #ed2d34;
}

.typewriter h3 {
	overflow: hidden;
	border-right: 0.15em solid #ed2d34;
	white-space: nowrap;
	margin: 0 auto;
	letter-spacing: 0.15em;
	animation: typing 10.5s steps(40, end) infinite,
		blink-caret 0.75s step-end infinite;
}

.home-icons {
	padding: 15px;
}

.home-icons i {
	font-size: 28px;
	color: black;
	transition: 0.3s ease-in-out;
	margin: 15px;
}

.home-icons i:hover {
	color: #ed2d34;
}

.iconify {
	font-size: 28px;
	color: black;
	transition: 0.3s ease-in-out;
}

.iconify:hover {
	color: #ed2d34;
}

.landing-button {
	border: 1px solid black;
	border-radius: 20px;
	background-color: white;
	padding: 10px;
	margin-top: 50px;
	transition: 0.3s ease;
}

.landing-button:hover {
	border: 1px solid #ed2d34;
	background-color: #ed2d34;
	color: white;
}

.landing-button i {
	transition: 0.3s ease-in-out;
}

.landing-button i:hover {
	color: white;
}

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

@keyframes blink-caret {
	from,
	to {
		border-color: transparent;
	}
	50% {
		border-color: #ed2d34;
	}
}