* {font-family: 'Figtree', sans-serif;}

body {
	background: #e9f8f1;
}

#wave {
	position: fixed;
	bottom: 0;
	left: 0;
	pointer-events: none;
}

main {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
	min-height: 100vh;
	width: 100%;
}

#logo-container {
	width: 50%;
}

#logo-icon {
	animation: animIcon 1s;
}

@keyframes animIcon {
	0% {opacity: 0; transform: scale(0.5);}
	50% {opacity: 0; transform: scale(0.5);}
	100% {opacity: 1; transform: scale(1.0);}
}

#logo-name {
	animation: animName 1.2s;
}

@keyframes animName {
	0% {opacity: 0; transform: translateX(-20px);}
	50% {opacity: 0; transform: translateX(-20px);}
	100% {opacity: 1; transform: translateX(0px);}
}

#logo-baseline {
	animation: animBaseline 1.5s;
}

@keyframes animBaseline {
	0% {opacity: 0; transform: translateY(-20px);}
	50% {opacity: 0; transform: translateY(-20px);}
	100% {opacity: 1; transform: translateY(0px);}
}

#content {
	animation: animContent 1.5s;
}

@keyframes animContent {
	0% {opacity: 0; transform: translateX(-20px);}
	80% {opacity: 0; transform: translateX(-20px);}
	100% {opacity: 1; transform: translateX(0px);}
}

hr {
	margin: 50px 0;
	border: 0;
	background: rgba(0,0,0,.1);
	height: 2px;
	width: 100%;
	max-width: 200px;
}

h1 {
	font-weight: 600;
	color: #0d3c56;
}

h1 span {
	color: #22b573;
}

p {
	color: #0d3c56;
	font-size: 1.2rem;
	margin-top: 20px;
}

a {
	font-size: 1.2rem;
	color: #22b573;
	font-weight: 600;
	text-decoration: none;
	display: flex;
	align-items: center;
}

a:hover {
	color: #22b573;
	text-decoration: underline;
}

a i {
	margin-right: 5px;
}