body {
	background: #958CFF;
}

#background {
    background-image: linear-gradient(#958CFF, #EF91FF);
	animation: bganim 1s forwards 1s;
	transform: translateY(100%);
}

@keyframes bganim {
	from {
		transform: translateY(100%);
	}
	to {
		transform: none;
	}
}

#header span {
	animation: headerAnim forwards 1s 1s;
	display: inline-block;
	opacity: 0%;
}

#header img {
	vertical-align: middle;
	width: 2em;
	margin-right: 0.25em;
	animation: headerIconAnimOpacity forwards 1s, headerIconAnimTransform forwards 1s 1s cubic-bezier(0.19, 1, 0.22, 1);
	transform: translate(2.5em);
}

@keyframes headerAnim {
	from {
		transform: translateX(-2em);
		opacity: 0%;
	}
	to {
		transform: none;
		opacity: 100%;
	}
}
@keyframes headerIconAnimOpacity {
	from {
		opacity: 0%;
	}
	to {
		opacity: 100%;
	}
}
@keyframes headerIconAnimTransform {
	from {
		transform: translateX(2.5em);
	}
	to {
		transform: none;
	}
}

img.social_icon {
	width: 25px;
	height: 25px;
	opacity: 25%;
}

.social_link {
	display: inline-block;
	height: auto;
	margin: auto .3rem;
}

a.social_link {
	text-decoration: none;
	user-select: none;
	opacity: 0%;
	background-color: transparent;
	box-shadow: none;
}

a.social_link:hover img {
	transform: scale(1.25);
	opacity: 50%;
}

a.social_link img {
	transition: transform .25s, opacity .25s;
}

#social_icons {
	text-align: center;
	vertical-align: middle;
	padding-top: .6rem;
	user-select: none;
}

#github_link { animation: slideUp .5s forwards 1s; }
#twitter_link { animation: slideUp .5s forwards 1.1s; }
#tumblr_link { animation: slideUp .5s forwards 1.2s; }
#discord_link { animation: slideUp .5s forwards 1.3s; }
#kofi_link { animation: slideUp .5s forwards 1.4s; }

@keyframes slideUp {
	from {
		transform: translateY(1rem);
		opacity: 0%;
	}

	to {
		transform: none;
		opacity: 100%;
	}
}

/* @keyframes slideUpDisabled {
	from {
		transform: translateY(1rem);
		opacity: 0%;
	}

	to {
		transform: none;
		opacity: 25%;
	}
} */