@keyframes topBarDropDown {
	0% {
		transform: translateY(-100%);
	}
	50% {
		transform: translateY(10px);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes meterSlideIn {
	0% {
		left: -4em;
	}
	50% {
		left: 1.5em;
	}
	100% {
		left: 1em;
	}
}

@keyframes socialsStretchIn {
	0% {
		transform: scaleY(0%);
	}
	50% {
		transform: scaleY(120%);
	}
	100% {
		transform: scaleY(100%);
	}
}

@keyframes socialsStretchInStart {
	0% {
		transform: scaleY(0%);
	}
	50% {
		transform: scaleY(0%);
	}
	75% {
		transform: scaleY(120%);
	}
	100% {
		transform: scaleY(100%);
	}
}

@keyframes startPulse {
	0% {
		font-size: 1rem;
	}
	50% {
		font-size: 1.65rem;
	}
	100% {
		font-size: 1.5rem;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 100%;
	}
}

@keyframes lineStretchIn {
	0% {
		transform: scaleX(0%);
	}
	50% {
		transform: scaleX(120%);
	}
	100% {
		transform: scaleX(100%);
	}
}

@keyframes catIn {
	0% {
		transform: scale(0%);
	}
	50% {
		transform: scale(110%);
	}
	100% {
		transform: scale(100%);
	}
}

@keyframes portraitFadeIn {
	0% {
		filter: grayscale(100%);
	}
	100% {
		filter: grayscale(0%);
	}
}

#top-bar.animated {
	animation: 0.5s ease-out 0s 1 topBarDropDown;
}
/*
#top-bar .info > div:nth-child(1) {
	animation-fill-mode: both;
	animation: 0.333s ease-out 0s 1 startPulse;
}
*/
#meter {
	animation: 0.5s ease-out 0s 1 meterSlideIn;
}

#about .socials {
	transform-origin: top center;
	animation-fill-mode: both;
	/*animation: 0.333s ease-out 0s 1 socialsStretchIn;*/
}

#about.animated .socials {
	animation: 0.75s ease-out 0s 1 socialsStretchInStart;
}

#about.animated .character-sprite-container {
	opacity: 0;
	animation: fadeIn 0.65s ease-in-out forwards;
}

#about.animated .character-sprite-container.first-character {
	animation-delay: 0.4s;
}

#about.animated .character-sprite-container.second-character {
	animation-delay: 0.7s;
}

#about.animated .character-sprite-container.third-character {
	animation-delay: 1s;
}

#about.animated .divider > .image > div {
	transform: scale(0);
	animation: 0.35s ease-out 0.35s 1 catIn forwards;
}

#about.animated .divider > .line {
	transform: scaleX(0);
	animation: 0.35s ease-out 0.5s 1 lineStretchIn forwards;
}

#about.animated .divider > div:nth-child(1) {
	transform-origin: top right;
}

#about.animated .divider > div:nth-child(3) {
	transform-origin: top left;
}

#about.animated .portrait {
	filter: grayscale(100%);
	animation: 1s ease-in-out 0.75s 1 portraitFadeIn forwards;
}

@media screen and (max-width: 850px) {
	#top-bar.animated {
		animation: none !important;
	}
	#top-bar .info > div:nth-child(1) {
		animation: none !important;
	}
	#meter {
		animation: none !important;
	}
	#about .socials {
		animation: none !important;
	}
	#about.animated .socials {
		animation: none !important;
	}
	.character-sprite-container {
		opacity: 1 !important;
		animation: none !important;
	}
	.divider > .image > div {
		transform: scale(100%) !important;
		animation: none !important;
	}
	.divider > .line {
		transform: scaleX(100%) !important;
		animation: none !important;
	}
	.portrait {
		filter: none !important;
		animation: none !important;
	}
}