html,
body,
.container {
	height: 100%;
	color: white;
}

body {
	background-color: #3a3a3a;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.image {
	width: 200px;
	padding-bottom: 3em;
}

p {
	font-size: 2em;
	font-family: 'Comfortaa', cursive;
	font-weight: 900;
}

/* ===========================
   Checkmark & cross stuff 
   =========================== */

.checkmark:after,
.cross:after,
.cross:before {
	-webkit-animation-delay: 400ms;
	animation-delay: 400ms;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-transform-origin: left top;
	transform-origin: left top;

	opacity: 0;
	height: 25px;
	border-right: 6px solid;
	border-top: 6px solid;
	border-radius: 2.5px !important;
	content: '';
	position: absolute;
}

/* ===========================
   Checkmark stuff 
   =========================== */

.checkmark-container {
	transform: translate(-65px, 21px);
}

.checkmark:after {
	-webkit-animation-name: checkmark;
	animation-name: checkmark;
	-webkit-transform: scaleX(-1) rotate(135deg);
	transform: scaleX(-1) rotate(135deg);

	left: 12.333333px;
	top: 27px;

	border-color: greenyellow;
}

@-webkit-keyframes checkmark {
	0% {
		height: 0;
		width: 0;
		opacity: 1;
	}
	20% {
		height: 0;
		width: 12.5px;
		opacity: 1;
	}
	40% {
		height: 25px;
		width: 12.5px;
		opacity: 1;
	}
	100% {
		height: 25px;
		width: 12.5px;
		opacity: 1;
	}
}

@keyframes checkmark {
	0% {
		height: 0;
		width: 0;
		opacity: 1;
	}
	20% {
		height: 0;
		width: 12.5px;
		opacity: 1;
	}
	40% {
		height: 25px;
		width: 12.5px;
		opacity: 1;
	}
	100% {
		height: 25px;
		width: 12.5px;
		opacity: 1;
	}
}

/* ===========================
   Cross stuff 
   =========================== */

.cross-container {
	transform: translate(-40px, 36.5px);
}

.cross:after,
.cross:before {
	-webkit-animation-name: cross;
	animation-name: cross;

	border-color: red;
}

.cross:after {
	-webkit-transform: rotate(315deg);
	transform: rotate(315deg);
}

.cross:before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.cross:after {
	top: 4.25px;
}

.cross:before {
	left: 22px;
}

@-webkit-keyframes cross {
	0% {
		height: 0;
		width: 0;
		opacity: 1;
	}
	20% {
		height: 12.5px;
		width: 0;
		opacity: 1;
	}
	40% {
		height: 25px;
		width: 0;
		opacity: 1;
	}
	100% {
		height: 25px;
		width: 0px;
		opacity: 1;
	}
}

@keyframes cross {
	0% {
		height: 0;
		width: 0;
		opacity: 1;
	}
	20% {
		height: 12.5px;
		width: 0;
		opacity: 1;
	}
	40% {
		height: 25px;
		width: 0;
		opacity: 1;
	}
	100% {
		height: 25px;
		width: 0;
		opacity: 1;
	}
}