body {
	margin: 0;
	text-align: center;
	/* font-family: 'Festive', cursive; */
	font-family: 'Montserrat', sans-serif;
	background-color: #ffffff;
	color: black;
}
h1 {
	margin-top: 4rem;
	font-size: 3.26rem; /*16px=1em  */
	margin-top: 0;
	line-height: 7rem;
}
.fp {
	position: relative;
	font-weight: normal;
	font-size: 1.5rem;
	color: #11999e;
}
.fp-text {
	display: inline-block;
	padding-right: 7px;
	border-right: 1.3px solid #66bfbf;
	overflow: hidden;
	white-space: nowrap;
	animation: typing 2s steps(23) forwards, cursor 0.4s step-end infinite alternate;
}
@keyframes cursor {
	50% {
		border-color: transparent;
	}
}
@keyframes typing {
	from {
		width: 0;
	}
	to {
		width: 265.156px;
	}
}
.top-container {
	margin: 0 auto 100px 0;
	background-color: #fef5ed;
	position: relative;
	padding-top: 5%;
}
h1,
h2 {
	color: #66bfbf;
}
h2 {
	margin-bottom: 40px;
}
h3,
a {
	color: #11999e;
}
a:hover {
	color: #eaf6f6;
}
span {
	text-decoration: underline;
}
.skill-row {
	width: 50%;
	margin: 100px auto 100px auto;
	text-align: left;
}
.skill-row p {
	line-height: 2;
}
.web {
	width: 25%;
	float: right;
	margin-right: 30px;
}
.java {
	width: 25%;
	float: right;
	margin-left: 30px;
}
hr {
	border-top: 5px dotted #eaf6f6;
	border-left: none;
	border-right: none;
	border-bottom: none;
	width: 10%;
	margin: 80px auto 80px auto;
}
.top-cloud {
	position: absolute;
	right: -100%;
	animation: slide-in-right 2s forwards;
}
.bottom-cloud {
	position: absolute;
	left: -100%;
	animation: slide-in-left 2s forwards;
}
.BUTTON {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 15px;
	color: #ffffff;
	font-family: Tahoma;
	font-size: 15px;
	font-weight: 300;
	padding: 10px 15px 10px 15px;
	background-color: #66bfbf;
	border: solid #337fed 1px;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	text-align: center;
	margin: 50px;
	margin-bottom: 100px;
}

.BUTTON:hover {
	background: #1ebed0;
	border: solid #337fed 0;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 15px;
	text-decoration: none;
}
.bottom-container {
	background-color: #fef5ed;
	padding: 20px;
	padding-bottom: 50px;
	line-height: 5;
}
.footer-link {
	text-decoration: none;
	margin: 0 15px 0 15px;
	color: #11999e;
	font-size: larger;
	font-weight: 900;
}
.my-desk {
	width: 30%;
	margin: 0 auto;
}
.me3 {
	-webkit-clip-path: circle(50% at 50% 50%);
	clip-path: circle(50% at 50% 50%);
	height: 25rem;
}
.top-container h1 {
	opacity: 0;
	animation: fade-in 2s forwards;
}
/* animations */
@keyframes fade-in {
	to {
		opacity: 1;
	}
}
@keyframes slide-in-left {
	to {
		left: 20%;
	}
}
@keyframes slide-in-right {
	to {
		right: 20%;
		top: 20%;
	}
}

/* small screen css */
@media all and (max-width: 500px) {
	.top-container {
		z-index: -10;
		padding-bottom: 60px;
		width: 100vw;
	}
	h1 {
		z-index: 100;
	}
	.top-cloud {
		display: none;
	}
	.bottom-cloud {
		display: none;
	}
	.mountain {
		display: none;
	}
}